AI Canvas MCP

Lets an agent search, inspect, and install AI Canvas components together with their design spec and motion.

Before you start

The server reads the live registry, so new components reach your agent about five minutes after they ship.
Installs still run through the shadcn CLI and need the AICANVAS_TOKEN from a free account, as described on the AI Canvas library page.

MCP server setup

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

Add to .mcp.json. Start Claude Code in the project and approve the aicanvas server when asked.

Agent setup prompt

Paste this into a coding agent to set AI Canvas MCP up in the client you use.

Set up AI Canvas MCP (https://aicanvas.me/mcp) for the AI client I use with this project.

MCP server "aicanvas":
- Runs locally over stdio: npx -y @aicanvas/mcp
- Needs no sign-in or API key.
- Config file per client: Claude Code: .mcp.json; Cursor: .cursor/mcp.json; Codex: ~/.codex/config.toml.

Before you start:
- The server reads the live registry, so new components reach your agent about five minutes after they ship.
- Installs still run through the shadcn CLI and need the AICANVAS_TOKEN from a free account, as described on the AI Canvas library page.

Steps:
1. Ask which client I use if you can't tell.
2. For Claude Code, Cursor, or Codex, add the "aicanvas" server to that client's config file, using its documented format. Keep every server and setting already in the file.
3. Reload the client, finish any sign-in, and confirm the server's tools are listed.

Never write a secret value into a config file or ask me to paste one into this chat. If anything here differs from the provider's guide, follow the guide.