Spaces:
Running
Running
| <html> | |
| <head> | |
| <title>Connection to A0 MCP Server</title> | |
| </head> | |
| <body> | |
| <div x-data> | |
| <p>Agent Zero MCP Server is an SSE MCP running on the same URL and port as the Web UI + /mcp/sse or /mcp/http path.</p> | |
| <p>The same applies if you run A0 on a public URL using a tunnel.</p> | |
| <!-- API Token Information --> | |
| <div x-data> | |
| <template x-if="$store.settings.settings"> | |
| <div style="background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 6px; padding: 12px; margin: 16px 0;"> | |
| <h4 style="margin: 0 0 8px 0; color: var(--color-text-primary);">API Token Information</h4> | |
| <p style="margin: 0 0 8px 0; color: var(--color-text-secondary); font-size: 14px;"> | |
| The token used in the URL is automatically generated from your username and password. | |
| This same token is also used for external API endpoints. The token changes when you update your credentials. | |
| </p> | |
| <div style="margin-top: 8px;"> | |
| <label style="display: block; margin-bottom: 4px; color: var(--color-text-secondary); font-size: 12px; font-weight: 600;">Token:</label> | |
| <input type="text" readonly x-model="$store.settings.settings.mcp_server_token" style="width: 100%; padding: 6px 8px; background-color: var(--color-bg-primary); color: var(--color-text-primary); border: 1px solid var(--color-border); border-radius: 4px; font-family: monospace; font-size: 13px;" /> | |
| </div> | |
| </div> | |
| </template> | |
| </div> | |
| <p>The token is intentionally not retrievable from OpenOperator. Replace YOUR_SPYNEL_AGENT_ZERO_API_KEY with the value configured as your Hugging Face secret SPYNEL_AGENT_ZERO_API_KEY.</p> | |
| <h3>Example MCP Server Configuration JSON</h3> | |
| <!-- Project selector --> | |
| <div style="margin: 16px 0;"> | |
| <label for="mcp-project-select" style="display: block; margin-bottom: 8px; color: var(--color-text-primary);"> | |
| Select Project (optional): | |
| </label> | |
| <select id="mcp-project-select" style="width: 100%; padding: 8px; background-color: var(--color-bg-secondary); color: var(--color-text-primary); border: 1px solid var(--color-border); border-radius: 4px;"> | |
| <option value="">No project</option> | |
| </select> | |
| </div> | |
| <div id="mcp-server-example"></div> | |
| <script> | |
| (async () => { | |
| const API = await import("/js/api.js"); | |
| const url = window.location.origin; | |
| // Use the operator-owned deployment secret; never interpolate the settings mask. | |
| const token = "YOUR_SPYNEL_AGENT_ZERO_API_KEY"; | |
| // Fetch and populate projects | |
| const projectSelect = document.getElementById('mcp-project-select'); | |
| try { | |
| const response = await fetchApi('/projects', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ action: 'list' }) | |
| }); | |
| const data = await response.json(); | |
| if (data.ok && data.data) { | |
| data.data.forEach(project => { | |
| const option = document.createElement('option'); | |
| option.value = project.name; | |
| option.textContent = project.title || project.name; | |
| projectSelect.appendChild(option); | |
| }); | |
| } | |
| } catch (e) { | |
| console.error('Failed to load projects:', e); | |
| } | |
| // Function to update JSON based on selected project | |
| function updateMcpConfig() { | |
| const selectedProject = projectSelect.value; | |
| const projectPath = selectedProject ? `/p-${selectedProject}` : ''; | |
| const jsonExample = JSON.stringify({ | |
| "mcpServers": | |
| { | |
| "agent-zero": { | |
| "type": "sse", | |
| "url": `${url}/mcp/t-${token}${projectPath}/sse` | |
| }, | |
| "agent-zero-http": { | |
| "type": "streamable-http", | |
| "url": `${url}/mcp/t-${token}${projectPath}/http` | |
| } | |
| } | |
| }, null, 2); | |
| editor.setValue(jsonExample); | |
| editor.clearSelection(); | |
| } | |
| // Initialize editor | |
| const editor = ace.edit("mcp-server-example"); | |
| const dark = localStorage.getItem("darkMode"); | |
| editor.setTheme(dark !== "false" ? "ace/theme/github_dark" : "ace/theme/tomorrow"); | |
| editor.session.setMode("ace/mode/json"); | |
| updateMcpConfig(); | |
| editor.setReadOnly(true); | |
| // Update JSON when project selection changes | |
| projectSelect.addEventListener('change', updateMcpConfig); | |
| })(); | |
| </script> | |
| <!-- </template> --> | |
| </div> | |
| <style> | |
| #mcp-server-example { | |
| width: 100%; | |
| height: 15em; | |
| } | |
| </style> | |
| </body> | |
| </html> | |