Arc MCP Server

A Model Context Protocol (MCP) server that provides AI assistants with comprehensive access to the Arc UI System. Query Arc components, icons, and documentation directly from your AI assistant.

Features

• get_arc_components_list — Returns a complete list of all available Arc components
• get_arc_icons_list — Returns a complete list of all available Arc icons for BT and EE brands
• get_api_info — Fetches TypeScript interface definitions and prop types for a component
• get_arc_docs_index — Lists all available Arc documentation files with paths, titles, and previews
• get_arc_doc — Retrieves the full content of a specific Arc documentation page by its ID
• get_arc_documentation_links — Provides links to Arc documentation website pages, with optional search filtering
• get_storybook_links — Generates direct links to component examples in Arc Storybook
• get_arc_guidelines — Retrieves Arc development guidelines and best practices
• get_arc_rules — Returns all Arc coding rules (components, TypeScript, imports, icons, packages, testing) as a single document

Versioning

@arc-ui/mcp is versioned in sync with the other @arc-ui packages in the monorepo. Component and icon data is bundled at build time, so each version of the MCP server reflects the exact components and APIs available in the matching version of @arc-ui/components.

Setup

Install

Local

npm install @arc-ui/mcp
# or
pnpm install @arc-ui/mcp

Global

npm install -g @arc-ui/mcp
# or
pnpm install -g @arc-ui/mcp

Kiro CLI

Local (workspace)

kiro-cli mcp add --name arc-mcp --command npx --args @arc-ui/mcp

Or manually add to .kiro/settings/mcp.json:

{
  "mcpServers": {
    "arc-mcp": {
      "command": "npx",
      "args": ["-y", "@arc-ui/mcp"]
    }
  }
}

Global

kiro-cli mcp add --name arc-mcp --command npx --args @arc-ui/mcp --scope global

Amazon Q (VS Code)

Add the MCP server via the Amazon Q Chat panel in VS Code, or manually create/update .vscode/mcp.json in your project:

{
  "servers": {
    "arc-ui": {
      "command": "npx",
      "args": ["-y", "@arc-ui/mcp"]
    }
  }
}

Example Queries

Once configured, you can ask your AI assistant:

• "What components are available in Arc?"
• "How do I use the ButtonV2 component?"
• "Show me all Arc icons"
• "Analyze the Calendar component structure"
• "What's the difference between ButtonV2 and Button?"

Writing Arc-compliant code

Before writing or reviewing Arc code, ask your AI assistant to load the coding rules:

• "Get the Arc rules" or "What are the Arc coding standards?"

This returns all the project conventions (component structure, TypeScript patterns, import ordering, icon theming, etc.) so the LLM follows them when generating code.

Troubleshooting

MCP server not connecting

1. Verify the server is installed: arc-mcp --version
2. Check your MCP configuration file syntax
3. Restart your AI assistant after configuration changes

Support

• Slack: #arc-help-and-support (BT Business CDO Slack)
• Teams: Arc Help and Support
• Email: [email protected]