ArupUI MCP Server
ArupUI ships its own Model Context Protocol (MCP) server that gives AI coding agents direct access to the component registry. Your agent can search components, read source code, get props, and generate install commands — without you copying and pasting anything.
What can it do?
When connected, your AI agent gets these tools:
| Tool | Description |
|---|---|
search_components | Search components and hooks by name, keyword, or description. Fuzzy matching across all metadata. |
get_component | Get full details for a specific component — props table, usage code, dependencies, install command. |
get_source_code | Get the actual TypeScript/TSX source code of any component, with imports already transformed to user aliases. |
list_components | List all available components, optionally filtered by category (creative, hook, block). |
get_install_command | Generate CLI install commands for one or more components, with your preferred package manager. |
Setup
1. Add the MCP config
A .mcp.json file is included at the ArupUI project root:
{
"mcpServers": {
"arupui": {
"command": "npx",
"args": ["tsx", "apps/mcp/src/index.ts"]
}
}
}2. Connect your agent
MCP-compatible agents (Claude Code, Cursor, VS Code Copilot) will automatically discover the .mcp.json and connect to the ArupUI server.
Example Prompts
Once connected, try asking your agent:
"Search ArupUI for animated text components"
"Get me the source code for the spotlight-card component"
"What props does the number-ticker component have?"
"Give me the pnpm install command for retro-grid, meteors, and shimmer-button"
"List all ArupUI hooks"
How It Works
The ArupUI MCP server is a standalone Node.js process (apps/mcp/) that communicates via stdio using the MCP protocol. It contains:
- A complete registry of all 50+ creative components and 14 hooks with metadata, props, keywords, usage code, and source file paths
- Fuzzy search across names, descriptions, and keywords
- Source code reader that reads actual
.tsx/.tsfiles from the monorepo and transforms internal@arupui/*imports to user-facing@/aliases - Multi-component install command generation for npm, pnpm, yarn, and bun
No network requests, no API keys, no external services — it reads directly from the local codebase.
Running Manually
You can test the MCP server locally:
npx tsx apps/mcp/src/index.ts
The server communicates via stdin/stdout using the MCP protocol. In normal usage, your coding agent handles this automatically.