aicanvas — Claude Code MCP server: what it does, how to install
Finds animated, shadcn-compatible React components and brings them into your codebase. Helps assemble UI directly from the AI chat.
claude mcp add aicanvas -- npx -y @aicanvas/mcpWhat aicanvas does
This server connects your editor to the AI Canvas registry. Your agent gets access to catalog queries, property documentation, JSX validation, and layout planning. The registry covers standalone interface parts and the Andromeda design system.
Adding components relies on the standard shadcn CLI. The server returns the exact shell command, saving you from manual file downloads. Browsing the component metadata works right away.
Without AICANVAS_TOKEN, requests for raw component code return an account prompt. You need a free account token to pull source files directly into the repository.
What it helps with
- search animated shadcn-compatible components from your coding assistant
- inspect component props and types before generating interface code
- validate JSX files against declared component properties
- generate layout composition plans using existing design templates
Example prompts for the agent
- Search AI Canvas for an animated card stack and add it to my project
- Validate prop usage in
src/components/Hero.tsxagainst AI Canvas docs - Create an interface layout plan using Andromeda templates
How to install aicanvas
Platform CLI
claude mcp add aicanvas -- npx -y @aicanvas/mcpPlatform CLI
codex mcp add mcp -- npx -y @aicanvas/mcpConfig file
{
"mcpServers": {
"mcp": {
"command": "npx",
"args": [
"-y",
"@aicanvas/mcp"
]
}
}
}Config file
{
"servers": {
"mcp": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@aicanvas/mcp"
]
}
}
}Platform CLI
gemini mcp add mcp npx -y @aicanvas/mcpStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about aicanvas
How to install aicanvas in Claude Code?
Run claude mcp add aicanvas -- npx -y @aicanvas/mcp in your terminal. Restart Claude Code to load the new tools into your session.
What does aicanvas do?
It lets your agent explore the AI Canvas component catalog, check prop definitions, and run validation on your React markup.
Is an account required to use aicanvas?
Reading metadata and generating install commands requires no account. Downloading component source code requires setting AICANVAS_TOKEN from a free account.
