"For agents" panel (floating bottom-right button) for Raven MCP #2586

"For agents" panel (custom component)

Part of the Raven docs epic (see parent tracker). Depends on the "Building with AI" section issue.

Add a persistent "For agents" entry point on docs pages that surfaces the ways to point an AI agent at Stellar: the Raven MCP server (raven.stellar.buzz, open source at https://github.com/kalepail/stellar-raven), Stellar Skills, and llms.txt.

This is a custom React component, not a stock Docusaurus dropdown, because it contains a tool selector and copy-paste code blocks.

Design: Figma, "Agent menu" section (by @minkyeongshin). Includes light and dark variants of the panel for all six tools, plus open and closed page states.

Placement (updated)

Decided with design after the mockup pass. This replaces the original plan of a navbar dropdown to the right of search.

• Trigger: a fixed pill button labeled ✦ For agents in the bottom right of the content area. Persists across page navigation.
• Open state: a 400px panel docked to the right edge, running full height below the navbar. The trigger shifts left to sit beside the open panel.
• Close: the × in the panel header, Esc, or clicking the trigger again.
• No navbar changes. Drop the previously planned { type: 'search', position: 'right' } addition to config/theme/navbar.ts.

Contents

Per Figma, top to bottom:

• Header: "Use Stellar with AI" with a close button.
• "Your tool" pill selector, six options: Claude Code, Codex, VS Code, Cursor, Claude desktop, Other clients. One selection drives the commands in both sections below.
• Raven MCP Server with a "Full guide →" link. Copy: "Connect your AI agent to Stellar data and tooling." Copyable block, for Claude Code: claude mcp add --transport http stellar-raven "https://raven.stellar.buzz/mcp" followed by a comment line for the /mcp → Authenticate → browser sign-in step. Footer links: "Try in chat →" and "View source →" (https://github.com/kalepail/stellar-raven).
• Stellar Skills with a "skills.stellar.org →" link. Copy: "Stellar context for your agent before it writes code." An Install / Try without installing toggle with helper text ("Adds the skill to your tool permanently.") and a copy block per mode.
• llms.txt → with "Machine-readable overview of the Stellar docs."

Changed from the original spec, please confirm

The Figma copy drifted from this ticket's first draft. Flagging rather than silently picking one:

1. Skills install command. Figma shows /plugin marketplace add stellar/stellar-dev-skill then /plugin install stellar-dev@stellar-dev. This ticket originally said npx skills add stellar/stellar-dev-skill.
2. Raven CTA. Figma says "Try in chat →". This ticket originally said "Try it live → raven.stellar.buzz/playground".

Requirements

• Works in light and dark mode, driven by --ifm-* theme variables (no hardcoded colors).
• Responsive. Desktop gets the docked side panel. Mobile behavior TBD with design (full-screen sheet is the likely answer). The trigger must not cover the sidebar toggle, pagination, or content on small screens.
• Copy-to-clipboard on every code block, with copied-state feedback.
• Tool selection persists (localStorage) so it survives navigation.
• Keyboard and a11y: Esc closes, focus moves into the panel on open and returns to the trigger on close, arrow keys move across the tool pills, aria labels throughout.
• Mount via a Root swizzle (src/theme/Root.tsx) so the trigger survives route changes. src/theme/DocSidebar and src/theme/DocItem/Footer are already swizzled, follow that pattern.

Open questions

• Does the trigger appear on non-docs routes (homepage, blog), or docs only?
• Any collision with the ReaderFeedback widget or a scroll-to-top control in the same corner?

References

• Design: Figma "Agent menu"
• Original inspiration: Tempo's "For agents" dropdown, https://tempo.xyz/developers/docs
• Raven (open source): https://github.com/kalepail/stellar-raven