Model Context Protocol

Enable AI assistants to browse, search, and add Archyra components to your projects through natural conversation.

What is MCP?

Model Context Protocol (MCP) is an open standard that allows AI assistants to interact with external tools and data sources. Archyra includes a built-in MCP server that exposes our component library to AI coding assistants.

Once configured, you can simply ask your AI assistant to "add a loading animation" or "show me the chat components" and it will use the MCP server to find and add the right components to your project.

Quick Setup

Run one command to automatically configure MCP for your AI coding tool:

npx archyra init

This will detect your installed tools and guide you through the setup process.

Supported AI Tools

Click on your AI coding tool for detailed setup instructions:

Claude Code

Anthropic's official CLI for Claude AI

~/.claude/claude_desktop_config.json

Cursor

AI-first code editor built on VS Code

.cursor/mcp.json

Windsurf

Codeium's AI-powered IDE

~/.codeium/windsurf/mcp_config.json

Available MCP Tools

Once configured, your AI assistant will have access to these tools:

list_components

Browse all available UI components with optional category filtering

get_component

Get detailed information and full source code for a specific component

add_component

Get instructions and source code to add a component to your project

get_install_command

Get the npm install command for a component's dependencies

Example Prompts

After setup, try asking your AI assistant:

You

"List all available UI components"

You

"Show me loading indicator options"

You

"Add the LoadingDots component to my project"

You

"Get the source code for AuthPage"

You

"What dependencies does FloatingLogin need?"

You

"Add PulseCircle to src/components/ui"

You

"Show me ready-to-use section components"

Next Steps

Claude Code Setup

Configure MCP for Claude Code CLI

CLI Reference

All available CLI commands