|
|
<!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> |
|
|
|
