/* "For agents" panel, ported from developers.stellar.org. Opens from any link whose href ends with "#for-agents" (see navbar.primary in docs.json). Styles live in style.css under "For agents panel". */ (function () { if (window.__forAgentsPanelLoaded) return; window.__forAgentsPanelLoaded = true; var RAVEN_MCP_URL = "https://raven.stellar.buzz/mcp"; var DOCS_MCP_URL = "https://developers.stellar.org/mcp"; var SKILL_REPO_URL = "https://github.com/stellar/stellar-dev-skill"; var npxSkillsInstall = { note: "Works with any tool that supports the Agent Skills standard.", snippets: ["npx skills add " + SKILL_REPO_URL] }; var browseSkillsInstead = { note: "Tell your agent:", snippets: ["Read skills.stellar.org before you start building on Stellar."] }; var TOOLS = [ { id: "claude-code", label: "Claude Code", raven: { snippets: ['claude mcp add --transport http stellar-raven "' + RAVEN_MCP_URL + '"\n# then run /mcp -> Authenticate -> sign in in your browser'] }, docsMcp: { snippets: ['claude mcp add --transport http --scope user stellar-docs "' + DOCS_MCP_URL + '"\n# then run /mcp to confirm it is connected'] }, skills: { install: { note: "Adds the skill to your tool permanently.", snippets: ["/plugin marketplace add stellar/stellar-dev-skill", "/plugin install stellar-dev@stellar-dev"] }, tryWithoutInstalling: browseSkillsInstead } }, { id: "codex", label: "Codex", raven: { snippets: ['codex mcp add stellar-raven --url "' + RAVEN_MCP_URL + '"\ncodex mcp login stellar-raven # opens your browser'] }, docsMcp: { snippets: ['codex mcp add stellar-docs --url "' + DOCS_MCP_URL + '"'] }, skills: { install: { note: "Codex reads skills from ~/.codex/skills/.", snippets: ["git clone " + SKILL_REPO_URL + " ~/.codex/skills/stellar-dev-skill"] }, tryWithoutInstalling: browseSkillsInstead } }, { id: "vscode", label: "VS Code", raven: { snippets: ['code --add-mcp \'{"name":"stellar-raven","type":"http","url":"' + RAVEN_MCP_URL + '"}\''] }, docsMcp: { note: "Adds the server to your user profile.", snippets: ['code --add-mcp \'{"name":"stellar-docs","type":"http","url":"' + DOCS_MCP_URL + '"}\''] }, skills: { install: npxSkillsInstall, tryWithoutInstalling: browseSkillsInstead } }, { id: "cursor", label: "Cursor", raven: { note: "Add to ~/.cursor/mcp.json (or .cursor/mcp.json per project). Cursor runs the OAuth sign-in on first use.", snippets: ['{\n "mcpServers": {\n "stellar-raven": { "url": "' + RAVEN_MCP_URL + '" }\n }\n}'] }, docsMcp: { note: "Add to ~/.cursor/mcp.json (or .cursor/mcp.json per project).", snippets: ['{\n "mcpServers": {\n "stellar-docs": { "url": "' + DOCS_MCP_URL + '" }\n }\n}'] }, skills: { install: npxSkillsInstall, tryWithoutInstalling: browseSkillsInstead } }, { id: "claude-desktop", label: "Claude desktop", raven: { note: "Go to Customize -> Connectors -> Add -> Add custom connector, paste the endpoint, and approve the browser sign-in.", snippets: [RAVEN_MCP_URL] }, docsMcp: { note: "Go to Customize -> Connectors -> Add -> Add custom connector, paste the endpoint, and choose \"No sign in\" under Authentication.", snippets: [DOCS_MCP_URL] }, skills: { install: npxSkillsInstall, tryWithoutInstalling: browseSkillsInstead } }, { id: "other", label: "Other clients", raven: { note: "For clients without native remote or OAuth support, bridge with mcp-remote.", snippets: ['{\n "mcpServers": {\n "stellar-raven": {\n "command": "npx",\n "args": [\n "-y",\n "mcp-remote@latest",\n "' + RAVEN_MCP_URL + '",\n "--transport",\n "http-only"\n ]\n }\n }\n}'], links: [{ label: "mcp-remote", href: "https://github.com/geelen/mcp-remote" }] }, docsMcp: { note: "For clients without native remote MCP support, bridge with mcp-remote.", snippets: ['{\n "mcpServers": {\n "stellar-docs": {\n "command": "npx",\n "args": [\n "-y",\n "mcp-remote@latest",\n "' + DOCS_MCP_URL + '",\n "--transport",\n "http-only"\n ]\n }\n }\n}'], links: [{ label: "mcp-remote", href: "https://github.com/geelen/mcp-remote" }] }, skills: { install: npxSkillsInstall, tryWithoutInstalling: browseSkillsInstead } } ]; var SECTIONS = { raven: { title: "Raven MCP Server", description: "Connect your AI agent to Stellar data and tooling.", guide: { label: "Full guide", href: "/docs/build/building-with-ai" }, links: [ { label: "Try in chat", href: "https://raven.stellar.buzz/playground" }, { label: "View source", href: "https://github.com/stellar-experimental/stellar-raven" } ] }, docsMcp: { title: "Stellar Docs MCP Server", description: "Search and read these docs from your agent. No sign-in needed.", guide: { label: "Full guide", href: "/docs/build/building-with-ai#stellar-docs-mcp-server" }, links: [] }, skills: { title: "Stellar Skills", description: "Stellar context for your agent before it writes code.", home: { label: "skills.stellar.org", href: "https://skills.stellar.org/" }, modes: [{ id: "install", label: "Install" }, { id: "tryWithoutInstalling", label: "Try without installing" }] }, llmsTxt: { title: "llms.txt", href: "/llms.txt", description: "Machine-readable overview of the Stellar docs." } }; var state = { toolId: TOOLS[0].id, mode: "install" }; var panel = null; var returnFocus = null; function esc(s) { return String(s).replace(/[&<>"']/g, function (c) { return { "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c]; }); } function link(l, external) { var ext = external || /^https?:/.test(l.href); return '" + esc(l.label) + ' '; } function copyBlock(code) { return '

' + esc(code) + "

" + '

'; } function tool() { for (var i = 0; i < TOOLS.length; i++) if (TOOLS[i].id === state.toolId) return TOOLS[i]; return TOOLS[0]; } function mcpSection(section, entry) { var html = '

' + esc(section.title) + "

" + link(section.guide) + "

" + esc(section.description) + "

"; if (entry.note) html += '

' + esc(entry.note) + "

"; entry.snippets.forEach(function (c) { html += copyBlock(c); }); var links = section.links.concat(entry.links || []); if (links.length) { html += '

'; links.forEach(function (l) { html += link(l, true); }); html += "

"; } return html + "

"; } function render() { var t = tool(); var skills = t.skills[state.mode]; var html = ""; html += '

Use Stellar with AI' + '

'; html += '

Your tool

'; TOOLS.forEach(function (x) { html += '"; }); html += "

"; html += mcpSection(SECTIONS.raven, t.raven); html += mcpSection(SECTIONS.docsMcp, t.docsMcp); html += '

' + esc(SECTIONS.skills.title) + "

" + link(SECTIONS.skills.home, true) + "

" + esc(SECTIONS.skills.description) + "

"; html += '

'; SECTIONS.skills.modes.forEach(function (m) { html += '"; }); html += "

"; if (skills.note) html += '

' + esc(skills.note) + "

"; skills.snippets.forEach(function (c) { html += copyBlock(c); }); html += "

"; html += '

' + link({ label: SECTIONS.llmsTxt.title, href: SECTIONS.llmsTxt.href }) + '

' + esc(SECTIONS.llmsTxt.description) + "

"; html += "

"; panel.innerHTML = html; } function refocus(selector) { var el = panel.querySelector(selector); if (el) el.focus(); } function ensurePanel() { if (panel) return panel; panel = document.createElement("div"); panel.id = "for-agents-panel"; panel.setAttribute("role", "dialog"); panel.setAttribute("aria-labelledby", "fa-panel-title"); panel.setAttribute("aria-modal", "true"); panel.hidden = true; document.body.appendChild(panel); panel.addEventListener("click", function (e) { var el = e.target.closest("button"); if (!el) return; if (el.classList.contains("fa-close")) return close(); // render() replaces the panel's contents, so put focus back on the same pill. if (el.dataset.tool) { state.toolId = el.dataset.tool; render(); refocus('[data-tool="' + state.toolId + '"]'); return; } if (el.dataset.mode) { state.mode = el.dataset.mode; render(); refocus('[data-mode="' + state.mode + '"]'); return; } if (el.dataset.copy !== undefined) { navigator.clipboard.writeText(el.dataset.copy).then(function () { el.classList.add("is-copied"); setTimeout(function () { el.classList.remove("is-copied"); }, 2000); }).catch(function (err) { console.error("For agents panel: copy failed", err); }); } }); render(); return panel; } function open() { returnFocus = document.activeElement; ensurePanel(); panel.hidden = false; document.body.classList.add("fa-open"); var first = panel.querySelector(".fa-close"); if (first) first.focus(); } function close() { if (!panel) return; panel.hidden = true; document.body.classList.remove("fa-open"); if (returnFocus && returnFocus.focus) returnFocus.focus(); returnFocus = null; } document.addEventListener("click", function (e) { var a = e.target.closest("a[href]"); if (a && /#for-agents$/.test(a.getAttribute("href"))) { e.preventDefault(); panel && !panel.hidden ? close() : open(); return; } if (panel && !panel.hidden && e.composedPath().indexOf(panel) === -1) close(); }); document.addEventListener("keydown", function (e) { if (!panel || panel.hidden) return; if (e.key === "Escape") return close(); // Keep Tab focus inside the open panel. if (e.key !== "Tab") return; var items = panel.querySelectorAll("button, a[href]"); if (!items.length) return; var first = items[0], last = items[items.length - 1]; if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } }); })();

​Architecture Overview

Architecture Overview