| 1 | <html> |
| 2 | |
| 3 | <head> |
| 4 | <title>Connection to A0 MCP Server</title> |
| 5 | |
| 6 | </head> |
| 7 | |
| 8 | <body> |
| 9 | <div x-data> |
| 10 | <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> |
| 11 | <p>The same applies if you run A0 on a public URL using a tunnel.</p> |
| 12 | |
| 13 | <!-- API Token Information --> |
| 14 | <div x-data> |
| 15 | <template x-if="$store.settings.settings"> |
| 16 | <div style="background-color: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: 6px; padding: 12px; margin: 16px 0;"> |
| 17 | <h4 style="margin: 0 0 8px 0; color: var(--color-text-primary);">API Token Information</h4> |
| 18 | <p style="margin: 0 0 8px 0; color: var(--color-text-secondary); font-size: 14px;"> |
| 19 | The token used in the URL is automatically generated from your username and password. |
| 20 | This same token is also used for external API endpoints. The token changes when you update your credentials. |
| 21 | </p> |
| 22 | <div style="margin-top: 8px;"> |
| 23 | <label style="display: block; margin-bottom: 4px; color: var(--color-text-secondary); font-size: 12px; font-weight: 600;">Token:</label> |
| 24 | <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;" /> |
| 25 | </div> |
| 26 | </div> |
| 27 | </template> |
| 28 | </div> |
| 29 | |
| 30 | <h3>Example MCP Server Configuration JSON</h3> |
| 31 | |
| 32 | <!-- Project selector --> |
| 33 | <div style="margin: 16px 0;"> |
| 34 | <label for="mcp-project-select" style="display: block; margin-bottom: 8px; color: var(--color-text-primary);"> |
| 35 | Select Project (optional): |
| 36 | </label> |
| 37 | <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;"> |
| 38 | <option value="">No project</option> |
| 39 | </select> |
| 40 | </div> |
| 41 | |
| 42 | <div id="mcp-server-example"></div> |
| 43 | |
| 44 | <script> |
| 45 | (async () => { |
| 46 | const API = await import("/js/api.js"); |
| 47 | const url = window.location.origin; |
| 48 | |
| 49 | // Fetch token from settings API |
| 50 | let token = ""; |
| 51 | try { |
| 52 | const response = await API.callJsonApi("settings_get", null); |
| 53 | token = response?.settings?.mcp_server_token || ""; |
| 54 | } catch (e) { |
| 55 | console.error("Failed to fetch token:", e); |
| 56 | } |
| 57 | |
| 58 | // Fetch and populate projects |
| 59 | const projectSelect = document.getElementById('mcp-project-select'); |
| 60 | try { |
| 61 | const response = await fetchApi('/projects', { |
| 62 | method: 'POST', |
| 63 | headers: { 'Content-Type': 'application/json' }, |
| 64 | body: JSON.stringify({ action: 'list' }) |
| 65 | }); |
| 66 | const data = await response.json(); |
| 67 | if (data.ok && data.data) { |
| 68 | data.data.forEach(project => { |
| 69 | const option = document.createElement('option'); |
| 70 | option.value = project.name; |
| 71 | option.textContent = project.title || project.name; |
| 72 | projectSelect.appendChild(option); |
| 73 | }); |
| 74 | } |
| 75 | } catch (e) { |
| 76 | console.error('Failed to load projects:', e); |
| 77 | } |
| 78 | |
| 79 | // Function to update JSON based on selected project |
| 80 | function updateMcpConfig() { |
| 81 | const selectedProject = projectSelect.value; |
| 82 | const projectPath = selectedProject ? `/p-${selectedProject}` : ''; |
| 83 | |
| 84 | const jsonExample = JSON.stringify({ |
| 85 | "mcpServers": |
| 86 | { |
| 87 | "agent-zero": { |
| 88 | "type": "sse", |
| 89 | "url": `${url}/mcp/t-${token}${projectPath}/sse` |
| 90 | }, |
| 91 | "agent-zero-http": { |
| 92 | "type": "streamable-http", |
| 93 | "url": `${url}/mcp/t-${token}${projectPath}/http` |
| 94 | } |
| 95 | } |
| 96 | }, null, 2); |
| 97 | |
| 98 | editor.setValue(jsonExample); |
| 99 | editor.clearSelection(); |
| 100 | } |
| 101 | |
| 102 | // Initialize editor |
| 103 | const editor = ace.edit("mcp-server-example"); |
| 104 | const dark = localStorage.getItem("darkMode"); |
| 105 | editor.setTheme(dark !== "false" ? "ace/theme/github_dark" : "ace/theme/tomorrow"); |
| 106 | editor.session.setMode("ace/mode/json"); |
| 107 | updateMcpConfig(); |
| 108 | editor.setReadOnly(true); |
| 109 | |
| 110 | // Update JSON when project selection changes |
| 111 | projectSelect.addEventListener('change', updateMcpConfig); |
| 112 | })(); |
| 113 | </script> |
| 114 | <!-- </template> --> |
| 115 | </div> |
| 116 | |
| 117 | <style> |
| 118 | #mcp-server-example { |
| 119 | width: 100%; |
| 120 | height: 15em; |
| 121 | } |
| 122 | </style> |
| 123 | |
| 124 | </body> |
| 125 | |
| 126 | </html> |