Model Context Protocol server for AI Canvas. Lets your AI editor (Claude Code, Cursor, Claude Desktop, Codex) discover and install AI Canvas components without leaving the chat.

You:   "find me an animated card stack"
AI:    [calls search_components → ranks matches → picks polaroid-stack]
       [calls get_install_command → returns: npx shadcn add @aicanvas/polaroid-stack]
       [runs the command — file lands in your project]
You:   "make the rotation more dramatic"
AI:    [edits the file directly]

What it exposes

Five tools, derived from the live aicanvas.me registry — adding a component to the website auto-updates the MCP within minutes:

Tool	Purpose
`list_categories`	Show every category with component counts. Orient before drilling in.
`list_components`	Browse components, optionally filtered by category. Paginated.
`search_components`	Fuzzy keyword search across slugs, names, descriptions, categories, tags. Ranked results.
`get_component`	Full metadata + complete `.tsx` source code for one component.
`get_install_command`	Get the `npx shadcn add @aicanvas/<slug>` command for a component.

All tools are read-only. Nothing is mutated on AI Canvas's side.

Setup

Claude Desktop

Edit claude_desktop_config.json:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Windows: %APPDATA%\Claude\claude_desktop_config.json
Linux: ~/.config/Claude/claude_desktop_config.json

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

Restart Claude Desktop. The aicanvas tools should appear in the tools list.

Cursor

Project-level (.cursor/mcp.json in your repo) or global (~/.cursor/mcp.json):

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

Claude Code

Project-level .mcp.json (committed alongside your code):

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

Or via the CLI:

claude mcp add aicanvas -- npx -y @aicanvas/mcp

Codex

~/.codex/config.toml:

[mcp_servers.aicanvas]
command = "npx"
args = ["-y", "@aicanvas/mcp"]

Verify it works

Inside any of the AI editors above, ask:

"What categories of components does AI Canvas have?"

You should see all 11 categories with counts. If you don't, check the host's MCP logs — typically a "Failed to spawn process" or network error means npx couldn't fetch the package, or the host wasn't restarted after editing the config.

To inspect the server outside an editor:

npx -y @modelcontextprotocol/inspector npx -y @aicanvas/mcp

This opens a browser UI where you can call each tool by hand.

Configuration

Env var	Default	What it does
`AICANVAS_REGISTRY_BASE`	`https://aicanvas.me/r`	Registry root URL. Override only for local development against a self-hosted mirror.

How the registry stays fresh

The MCP fetches https://aicanvas.me/r/aicanvas-mcp.json on first use and caches it for 5 minutes. New components on AI Canvas appear in the MCP automatically — no package update required.

The full source code for each component is fetched on demand from /r/<slug>.json (the same shadcn registry items the CLI installs).

Local development

git clone https://github.com/uiNerd16/aicanvas.git
cd aicanvas/mcp
npm install
npm run build

# Smoke-test against the deployed registry:
npm run inspect

# Or point at a locally running aicanvas dev server:
AICANVAS_REGISTRY_BASE=http://localhost:3000/r node dist/index.js

Edit src/index.ts, run npm run build, restart your AI editor.