🔌 @viasat/beam-react-mcp

MCP server for the Beam React design system. It gives AI coding tools (Claude Code, Cursor, VS Code, etc.) accurate, structured access to Beam component APIs, props, usage examples, and concept docs — so they stop guessing prop names and produce correct Beam usage.

🧰 What it provides

Six tools, served over stdio from a static manifest bundled inside the package. No network calls.

| Tool | What it returns | | ------------------------------------- | ---------------------------------------------------------------------------- | | listComponents(query?, category?) | The component catalog — name, slug, category, description | | getComponent(name) | Props, subcomponent props, paired hooks/providers (with signatures), and the list of available story names | | getComponentStory(component, story) | The JSX source for one named story | | listConcepts() | Concept docs (theming, accessibility, getting started, …) | | getConcept(name) | Full content for one concept doc | | listIcons() | All Beam icons organized by import path (main, illustrative, logos by group) |

✅ Requirements

• Node.js >= 20.11

🛠️ Usage

Add the server to your MCP client config. For Claude Code (.mcp.json in your project root):

{
  "mcpServers": {
    "beam": {
      "command": "npx",
      "args": ["-y", "@viasat/beam-react-mcp"]
    }
  }
}

Restart your editor, then ask something like "What props does the Beam Button accept?" — the model will call the tools and return real data from the manifest instead of guessing.

📝 Notes

• Offline: all data ships inside the package; the server makes no network requests.
• Restart on failure: this is a stdio server, which does not auto-restart. If the Beam tools disappear from your session, restart your editor.
• The component data reflects the version of @viasat/beam-react the server was built from — see beamVersion in the bundled beam-manifest.json.