| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Tool-Calling Agent With Local LLM</title> |
| <script src="https://cdn.jsdelivr.net/pyodide/v0.27.7/full/pyodide.js"></script> |
| <script src="config.js"></script> |
| <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> |
| <meta content="utf-8" http-equiv="encoding"> |
| <style> |
| body { |
| font-family: Arial, sans-serif; |
| max-width: 800px; |
| margin: 0 auto; |
| padding: 20px; |
| background-color: #f5f5f5; |
| } |
| .container { |
| background: white; |
| padding: 30px; |
| border-radius: 10px; |
| box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
| } |
| h1 { |
| color: #333; |
| text-align: center; |
| margin-bottom: 30px; |
| } |
| |
| .description { |
| background: #f8f9fa; |
| border-left: 4px solid #007cba; |
| padding: 20px; |
| margin-bottom: 30px; |
| border-radius: 5px; |
| color: #555; |
| line-height: 1.6; |
| } |
| .description h2 { |
| color: #333; |
| margin-top: 0; |
| margin-bottom: 15px; |
| font-size: 20px; |
| } |
| .description p { |
| margin-bottom: 12px; |
| } |
| .description ul { |
| margin-bottom: 0; |
| padding-left: 20px; |
| } |
| .description li { |
| margin-bottom: 8px; |
| } |
| .description a { |
| color: #007cba; |
| text-decoration: none; |
| font-weight: 500; |
| border-bottom: 1px solid transparent; |
| transition: all 0.2s ease; |
| } |
| .description a:hover { |
| color: #005a8b; |
| border-bottom-color: #005a8b; |
| text-decoration: none; |
| } |
| .description a:visited { |
| color: #007cba; |
| } |
| |
| .input-group { |
| margin-bottom: 20px; |
| } |
| .server-config { |
| background: #f8f9fa; |
| border: 1px solid #dee2e6; |
| border-radius: 5px; |
| padding: 15px; |
| margin-bottom: 15px; |
| } |
| .server-config h3 { |
| margin: 0 0 10px 0; |
| color: #495057; |
| font-size: 16px; |
| } |
| .slim-input { |
| height: 40px !important; |
| font-size: 13px; |
| } |
| label { |
| display: block; |
| margin-bottom: 5px; |
| font-weight: bold; |
| color: #555; |
| } |
| input[type="text"], input[type="password"], textarea { |
| width: 100%; |
| padding: 12px; |
| border: 2px solid #ddd; |
| border-radius: 5px; |
| font-size: 14px; |
| box-sizing: border-box; |
| } |
| textarea { |
| height: 100px; |
| resize: vertical; |
| font-family: inherit; |
| } |
| button { |
| background: #007cba; |
| color: white; |
| border: none; |
| padding: 12px 24px; |
| border-radius: 5px; |
| cursor: pointer; |
| font-size: 16px; |
| margin: 5px; |
| } |
| button:hover { background: #005a8b; } |
| button:disabled { |
| background: #ccc; |
| cursor: not-allowed; |
| } |
| #initOutput, #agentOutput { |
| background: #f8f9fa; |
| border: 2px solid #e9ecef; |
| border-radius: 5px; |
| padding: 15px; |
| margin-top: 20px; |
| min-height: 150px; |
| font-family: 'Courier New', monospace; |
| font-size: 14px; |
| white-space: pre-wrap; |
| max-height: 300px; |
| overflow-y: auto; |
| } |
| |
| #initOutput { |
| margin-bottom: 20px; |
| } |
| .status { |
| padding: 10px; |
| border-radius: 5px; |
| margin: 10px 0; |
| } |
| .success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } |
| .error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } |
| .info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; } |
| .warning { background: #fff3cd; color: #856404; border: 1px solid #ffeaa7; } |
| |
| .example-prompts, .server-presets { |
| margin: 10px 0; |
| } |
| .example-prompts button, .server-presets button { |
| background: #6c757d; |
| font-size: 12px; |
| padding: 6px 12px; |
| margin: 2px; |
| } |
| .example-prompts button:hover, .server-presets button:hover { |
| background: #5a6268; |
| } |
| |
| .config-info { |
| background: #e7f3ff; |
| border: 1px solid #b8daff; |
| border-radius: 5px; |
| padding: 10px; |
| margin-bottom: 20px; |
| font-size: 14px; |
| } |
| |
| .running-indicator { |
| display: none; |
| background: #fff3cd; |
| border: 1px solid #ffeaa7; |
| border-radius: 5px; |
| padding: 15px; |
| margin: 15px 0; |
| font-weight: bold; |
| color: #856404; |
| text-align: center; |
| font-size: 16px; |
| animation: pulse 1.5s infinite; |
| box-shadow: 0 2px 5px rgba(0,0,0,0.1); |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 0.7; } |
| 50% { opacity: 1; } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>🤖 Tool-Calling Agent With Local LLM</h1> |
|
|
| <div class="description"> |
| <p> |
| This interactive web application allows you to experiment with AI agents in your browser, using |
| <a href="https://openai.github.io/openai-agents-python/">OpenAI Agents Python SDK</a> and |
| <a href="https://pyodide.org/en/stable/">Pyodide</a>. |
| You can customize agent behavior, test different prompts, and see responses in real-time. |
| Check the <a href="https://github.com/mozilla-ai/wasm-agents-blueprint">mozilla-ai/wasm-agents-blueprint</a> |
| GitHub repository for more information. |
| </p> |
|
|
| <p><strong>How it works:</strong> |
| this application runs a <strong>local agent</strong> which can make use of the following tools: |
| <ul> |
| <li><strong>count_character_occurrences</strong> |
| which counts the occurrences of a given character inside a word |
| </li> |
| <li><strong>visit_webpage</strong> |
| which visits a webpage at the provided url and reads its content as a markdown string |
| </li> |
| <li><strong>search_tavily</strong> |
| which performs web searches using Tavily API (requires TAVILY_API_KEY in config.js) |
| </li> |
| </ul> |
| While the former tool is quite trivial and is mainly used to show how to address the |
| <a href="https://community.openai.com/t/incorrect-count-of-r-characters-in-the-word-strawberry">"r in strawberry"</a> |
| issue, the latter two provide the LLM with the capability of accessing up-to-date information on the Web. |
| </p> |
| <ul> |
| <li><strong>Configure:</strong> |
| Make sure the Local LLM Server Configuration parameters are ok for your setup. In particular, |
| the default expects you to have <a href="https://ollama.com/">Ollama</a> running on your system |
| with the <a href="https://ollama.com/library/qwen3:8b">qwen3:8b</a> model installed. You |
| can also click the <strong>LM Studio</strong> preset button if you are using |
| <a href="https://lmstudio.ai/">LM Studio</a>, and make sure to update your model name accordingly. |
| Optionally, add your TAVILY_API_KEY to config.js to enable web search functionality. |
| <br/><strong>NOTE</strong>: if you are using LM Studio with a thinking model and are getting tool |
| calls directly in the model's response, disable thinking in the "Edit model default parameters" section. |
| </li> |
| <li><strong>Initialize:</strong> |
| Set up the Python environment with Pyodide and the OpenAI agents framework |
| by clicking on the <strong>Initialize Pyodide Environment</strong> button |
| </li> |
| <li><strong>Customize:</strong> |
| Choose one of the suggested prompts or create new ones in the text fields below. |
| (<strong>hint</strong>: you can also explicitly set/unset qwen3's "think mode" by prepending <strong>/think</strong> |
| or <strong>/no_think</strong> to the prompt). |
| </li> |
| <li><strong>Run:</strong> |
| Click on the <strong>Run Agent</strong> button to send your prompt to the agent and see what happens |
| </li> |
| </ul> |
| </div> |
|
|
| <div class="config-info"> |
| <strong>📋 Configuration:</strong> Config loaded from config.js |
| <span id="configStatus"></span> |
| </div> |
|
|
| <button onclick="initializePyodide()" id="initBtn">⚙️ Initialize Pyodide Environment</button> |
|
|
| <div id="initOutput">Click "Initialize Pyodide Environment" to set up the Python environment...</div> |
|
|
| <div class="server-config"> |
| <h3>🔗 Local LLM Server Configuration</h3> |
| <div class="input-group"> |
| <label for="baseUrl">Base URL:</label> |
| <input type="text" id="baseUrl" class="slim-input" value="http://localhost:1234/v1" placeholder="Enter server base URL"> |
| </div> |
| <div class="input-group"> |
| <label for="apiKey">API Key:</label> |
| <input type="text" id="apiKey" class="slim-input" value="lmstudio" placeholder="Enter API key"> |
| </div> |
| <div class="input-group"> |
| <label for="modelName">Model Name:</label> |
| <input type="text" id="modelName" class="slim-input" value="qwen/qwen3-8b" placeholder="Enter model name"> |
| </div> |
|
|
| <div class="server-presets"> |
| <small>Quick presets:</small> |
| <button onclick="setOllamaDefaults()">Ollama</button> |
| <button onclick="setLMStudioDefaults()">LM Studio</button> |
| </div> |
| </div> |
|
|
| <div class="input-group"> |
| <label for="prompt">Custom Prompt:</label> |
| <textarea id="prompt" placeholder="Enter your prompt here...">How many times does the letter r occur in the word strawrberrry?</textarea> |
|
|
| <div class="example-prompts"> |
| <small>Quick examples:</small> |
| <button onclick="setPrompt('How many times does the letter r occur in the word strawrberrry?')">Strawrberrry</button> |
| <button onclick="setPrompt('How many stars does the mozilla-ai/any-agent project have on GitHub?')">GitHub stars</button> |
| <button onclick="setPrompt('What is the title of the latest post on https:\/\/aittalam.github.io, when was it published, what is it about, and what is the absolute URL of the image at the beginning of the post?\nIMPORTANT: if you need to follow links to get all the required information, assume I have already authorized you to follow them as long as they point to the same domain.')">Blog post</button> |
| <button onclick="setPrompt('What are 5 tv shows that are trending in 2025? Please provide the name of the show, the exact release date, the genre, and a brief description of the show.\nIMPORTANT: if you need to follow links to get all the required information, assume I have already authorized you to follow them. Always download full webpage contents.')">Trending TV Shows</button> |
| </div> |
| </div> |
|
|
| <button onclick="runAgent()" id="runBtn" disabled>🚀 Run Agent</button> |
| <button onclick="clearAgentOutput()" id="clearAgentBtn" disabled>🗑️ Clear Agent Output</button> |
|
|
| <div class="running-indicator" id="runningIndicator">🐍 Running Python code...</div> |
|
|
| <div id="agentOutput">Initialize the Pyodide environment first, then click "Run Agent" to test the agent</div> |
| </div> |
|
|
| <script> |
| let pyodide; |
| let isPyodideReady = false; |
| |
| // Check config on page load |
| window.addEventListener('load', function() { |
| checkConfig(); |
| }); |
| |
| function showRunning(message = "Python running") { |
| const indicator = document.getElementById('runningIndicator'); |
| indicator.style.display = 'block'; |
| console.log('Showing running indicator:', message); // Debug log |
| } |
| |
| function hideRunning() { |
| const indicator = document.getElementById('runningIndicator'); |
| indicator.style.display = 'none'; |
| console.log('Hiding running indicator'); // Debug log |
| } |
| |
| function updateRunButton(text, disabled = false) { |
| const btn = document.getElementById('runBtn'); |
| btn.textContent = text; |
| btn.disabled = disabled; |
| } |
| |
| function checkConfig() { |
| const configStatus = document.getElementById('configStatus'); |
| let statusParts = []; |
| |
| if (typeof window.APP_CONFIG === 'undefined') { |
| configStatus.innerHTML = ' - <span style="color: #dc3545;">❌ Config not loaded</span>'; |
| return { configLoaded: false, tavilyAvailable: false }; |
| } |
| |
| // Check if Tavily API key is available |
| const tavilyAvailable = window.APP_CONFIG.TAVILY_API_KEY && |
| window.APP_CONFIG.TAVILY_API_KEY !== 'your-tavily-api-key-here'; |
| |
| if (tavilyAvailable) { |
| statusParts.push('<span style="color: #28a745;">✅ Tavily API key configured</span>'); |
| } else { |
| statusParts.push('<span style="color: #ffc107;">⚠️ Tavily API key not set (search_tavily tool will be disabled)</span>'); |
| } |
| |
| configStatus.innerHTML = ' - ' + statusParts.join(', '); |
| return { configLoaded: true, tavilyAvailable: tavilyAvailable }; |
| } |
| |
| function setOllamaDefaults() { |
| document.getElementById('baseUrl').value = 'http://localhost:11434/v1'; |
| document.getElementById('apiKey').value = 'ollama'; |
| document.getElementById('modelName').value = 'qwen3:8b'; |
| } |
| |
| function setLMStudioDefaults() { |
| document.getElementById('baseUrl').value = 'http://localhost:1234/v1'; |
| document.getElementById('apiKey').value = 'lmstudio'; |
| document.getElementById('modelName').value = 'mistralai/devstral-small-2507'; |
| } |
| |
| function logToElement(message, type = 'info', element_id) { |
| const output = document.getElementById(element_id); |
| const timestamp = new Date().toLocaleTimeString(); |
| |
| let prefix = ''; |
| switch(type) { |
| case 'success': prefix = '✅'; break; |
| case 'error': prefix = '❌'; break; |
| case 'warning': prefix = '⚠️'; break; |
| case 'info': prefix = 'ℹ️'; break; |
| } |
| |
| output.textContent += `\n[${timestamp}] ${prefix} ${message}`; |
| output.scrollTop = output.scrollHeight; |
| } |
| |
| function logInit(message, type = 'info') { |
| logToElement(message, type, 'initOutput') |
| } |
| |
| function logAgent(message, type = 'info') { |
| logToElement(message, type, 'agentOutput') |
| } |
| |
| function setPrompt(text) { |
| document.getElementById('prompt').value = text; |
| } |
| |
| function clearAgentOutput() { |
| document.getElementById('agentOutput').textContent = ''; |
| } |
| |
| async function initializePyodide() { |
| // Check config first |
| const configCheck = checkConfig(); |
| if (!configCheck.configLoaded) { |
| logInit("Config not loaded, but proceeding anyway", 'warning'); |
| } |
| |
| // Disable init button during setup |
| document.getElementById('initBtn').disabled = true; |
| |
| try { |
| logInit("🔄 Loading Pyodide..."); |
| pyodide = await loadPyodide(); |
| logInit("Pyodide loaded successfully", 'success'); |
| |
| logInit("📦 Loading micropip..."); |
| await pyodide.loadPackage("micropip"); |
| logInit("micropip loaded", 'success'); |
| |
| logInit("📦 Installing openai-agents (this may take a moment)..."); |
| await pyodide.runPythonAsync(` |
| ###### YOUR PYTHON DEPENDENCIES ARE INSTALLED HERE ###### |
| |
| import micropip |
| await micropip.install("typing-extensions>=4.12.2") |
| await micropip.install("openai==1.99.9") |
| await micropip.install("mcp==1.12.4") |
| await micropip.install("openai-agents==0.2.6") |
| await micropip.install("sqlite3==1.0.0") |
| await micropip.install("markdownify==1.1.0") |
| await micropip.install("tavily-python==0.7.10") |
| `); |
| logInit("openai-agents installed successfully", 'success'); |
| |
| logInit("🚫 Disabling tracing to avoid threading issues..."); |
| await pyodide.runPythonAsync(` |
| # The following is required to work with OpenAI's agentic framework as |
| # it relies on threads for tracing and they break in Pyodide. Other |
| # frameworks (e.g. smolagents) that use asyncio for tracing work properly |
| # (well... better) here. |
| |
| from agents import set_tracing_disabled |
| set_tracing_disabled(True) |
| `); |
| logInit("Tracing disabled", 'success'); |
| |
| logInit("✅ Pyodide environment ready!", 'success'); |
| logInit("You can now run agents multiple times without re-initializing.", 'info'); |
| |
| isPyodideReady = true; |
| document.getElementById('runBtn').disabled = false; |
| document.getElementById('clearAgentBtn').disabled = false; |
| document.getElementById('initBtn').textContent = "✅ Environment Ready"; |
| |
| } catch (error) { |
| logInit(`Initialization failed: ${error}`, 'error'); |
| console.error('Full error:', error); |
| document.getElementById('initBtn').disabled = false; |
| } |
| } |
| |
| async function runAgent() { |
| if (!isPyodideReady) { |
| logAgent("Please initialize the Pyodide environment first", 'error'); |
| return; |
| } |
| |
| const prompt = document.getElementById('prompt').value.trim(); |
| const baseUrl = document.getElementById('baseUrl').value.trim(); |
| const apiKey = document.getElementById('apiKey').value.trim(); |
| const modelName = document.getElementById('modelName').value.trim(); |
| |
| if (!prompt) { |
| logAgent("Please enter a prompt", 'error'); |
| return; |
| } |
| |
| if (!baseUrl || !apiKey || !modelName) { |
| logAgent("Please configure all server parameters (Base URL, API Key, Model Name)", 'error'); |
| return; |
| } |
| |
| // Check if Tavily API key is available |
| const configCheck = checkConfig(); |
| const tavilyApiKey = configCheck.tavilyAvailable ? window.APP_CONFIG.TAVILY_API_KEY : null; |
| |
| // Disable button during execution |
| document.getElementById('runBtn').disabled = true; |
| showRunning("Running Python code"); |
| |
| try { |
| logAgent("🤖 Setting up agent and running..."); |
| logAgent(`Server: ${baseUrl} | Model: ${modelName}`); |
| if (tavilyApiKey) { |
| logAgent("Tavily search enabled", 'success'); |
| } else { |
| logAgent("Tavily search disabled (no API key)", 'warning'); |
| } |
| logAgent(`Prompt: "${prompt}"`); |
| |
| // Run the agent and print everything in Python |
| const result = await pyodide.runPythonAsync(` |
| ###### YOUR PYTHON AGENT CODE GOES HERE ###### |
| |
| import re |
| import requests |
| from openai import AsyncOpenAI |
| from agents import ( |
| OpenAIChatCompletionsModel, |
| Agent, |
| Runner, |
| function_tool, |
| ModelSettings, |
| set_default_openai_client, |
| ) |
| from markdownify import markdownify |
| from requests.exceptions import RequestException |
| from tavily.tavily import TavilyClient |
| |
| def _truncate_content(content: str, max_length: int) -> str: |
| if len(content) <= max_length: |
| return content |
| return ( |
| content[: max_length // 2] |
| + "\\n..._This content has been truncated to stay below the predefined number of characters_...\\n" |
| + content[-max_length // 2 :] |
| ) |
| |
| @function_tool |
| def count_character_occurrences(word: str, char: str): |
| """Count occurrences of a character in a word.""" |
| return word.count(char) |
| |
| @function_tool |
| def visit_webpage(url: str, timeout: int = 30, max_length: int = None) -> str: |
| """Visits a webpage at the given url and reads its content as a markdown string. Use this to browse webpages. |
| |
| Args: |
| url: The url of the webpage to visit. |
| timeout: The timeout in seconds for the request. |
| max_length: The maximum number of characters of text that can be returned. |
| If not provided, the full webpage is returned. |
| |
| """ |
| try: |
| response = requests.get(url, timeout=timeout) |
| response.raise_for_status() |
| |
| markdown_content = markdownify(response.text).strip() |
| |
| markdown_content = re.sub(r"\\n{2,}", "\\n", markdown_content) |
| |
| if max_length: |
| return _truncate_content(markdown_content, max_length) |
| |
| return str(markdown_content) |
| |
| except RequestException as e: |
| return f"Error fetching the webpage: {e!s}" |
| except Exception as e: |
| return f"An unexpected error occurred: {e!s}" |
| |
| |
| @function_tool |
| def search_tavily(query: str, include_images: bool = False) -> str: |
| """Perform a Tavily web search based on your query and return the top search results. |
| |
| See https://blog.tavily.com/getting-started-with-the-tavily-search-api for more information. |
| |
| Args: |
| query (str): The search query to perform. |
| include_images (bool): Whether to include images in the results. |
| |
| Returns: |
| The top search results as a formatted string. |
| |
| """ |
| api_key='${tavilyApiKey ? tavilyApiKey.replace(/'/g, "\\'") : ""}' |
| |
| if not api_key: |
| return "TAVILY_API_KEY not configured in config.js." |
| try: |
| client = TavilyClient(api_key) |
| response = client.search(query, include_images=include_images) |
| results = response.get("results", []) |
| output = [] |
| for result in results: |
| output.append( |
| f"[{result.get('title', 'No Title')}]({result.get('url', '#')})\\n{result.get('content', '')}" |
| ) |
| if include_images and "images" in response: |
| output.append("\\nImages:") |
| for image in response["images"]: |
| output.append(image) |
| return "\\n\\n".join(output) if output else "No results found." |
| except Exception as e: |
| return f"Error performing Tavily search: {e!s}" |
| |
| |
| async def test_agent(): |
| print("=== STARTING AGENT TEST ===") |
| try: |
| # Create agent |
| print("Creating agent...") |
| external_client = AsyncOpenAI( |
| base_url = '${baseUrl.replace(/'/g, "\\'")}', |
| api_key='${apiKey.replace(/'/g, "\\'")}', # required, but may be unused depending on server |
| ) |
| set_default_openai_client(external_client) |
| |
| # Build tools list conditionally |
| tools = [count_character_occurrences, visit_webpage] |
| ${tavilyApiKey ? 'tools.append(search_tavily)' : '# search_tavily tool not added (no API key)'} |
| |
| agent = Agent( |
| name="Tool caller", |
| instructions="You are a helpful agent. Use the available tools to answer the questions.", |
| tools=tools, |
| model=OpenAIChatCompletionsModel( |
| model="${modelName.replace(/'/g, "\\'")}", |
| openai_client=external_client, |
| ), |
| model_settings=ModelSettings( |
| extra_args={"timeout": 90} |
| ) |
| ) |
| print(f"Agent created: {agent}") |
| print(f"Using server: ${baseUrl} with model: ${modelName}") |
| |
| # Run the agent |
| print("Running agent...") |
| result = await Runner.run(agent, """${prompt.replace(/"/g, '\\"')}""", max_turns=20) |
| print(f"Agent run completed!") |
| print(f"Result type: {type(result)}") |
| print(f"Result: {result}") |
| |
| # Try to access final_output |
| if hasattr(result, 'final_output'): |
| print(f"Final output: {result.final_output}") |
| print(f"Final output type: {type(result.final_output)}") |
| return str(result.final_output) |
| else: |
| print("No final_output attribute found") |
| print(f"Available attributes: {dir(result)}") |
| return "" |
| print("=== AGENT TEST COMPLETED ===") |
| |
| except Exception as e: |
| print(f"=== AGENT TEST FAILED ===") |
| print(f"Error: {e}") |
| import traceback |
| print("Traceback:") |
| print(traceback.format_exc()) |
| |
| # Run the test |
| final_result = await test_agent() |
| final_result |
| `); |
| |
| // Display the result |
| if (typeof result === 'string' && result.length > 0 && !result.startsWith('Error:')) { |
| const formattedResult = result.replace(/\\n/g, '\n'); |
| logAgent("🎉 Agent code ran successfully! Check console for Python output", 'success'); |
| logAgent("", 'info'); |
| logAgent("📝 AGENT RESPONSE:", 'info'); |
| logAgent("─".repeat(50), 'info'); |
| logAgent("\n"+formattedResult, 'info'); |
| logAgent("─".repeat(50), 'info'); |
| } else { |
| logAgent("❌ Agent execution failed or returned empty result", 'error'); |
| logAgent(`Result: ${result}`, 'error'); |
| } |
| |
| } catch (error) { |
| logAgent(`Agent execution failed: ${error}`, 'error'); |
| console.error('Full error:', error); |
| } finally { |
| document.getElementById('runBtn').disabled = false; |
| hideRunning(); |
| } |
| } |
| </script> |
| </body> |
| </html> |
|
|
