webui/components/settings/mcp/server/example.html

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

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

                // Fetch token from settings API
                let token = "";
                try {
                    const response = await API.callJsonApi("settings_get", null);
                    token = response?.settings?.mcp_server_token || "";
                } catch (e) {
                    console.error("Failed to fetch token:", e);
                }

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