/MCP

AI Canvas MCP connected withClaude Code, Codex, and Cursor.

Save tokens. Don’t start from scratch. Your agent pulls a finished component with the design spec and the motion included, and you just adapt it to your project. It takes seconds.

1

Run this in any terminal. The MCP works in every project you open. Install once, then forget it exists.

claude mcp add aicanvas --scope user -- npx -y @aicanvas/mcp
2

Restart Claude Code. The aicanvas MCP loads automatically.

3

Test it. Ask Claude:

Optional
What's the best navbar component in AI Canvas? Install it for me.

What you get

One command, then forget it

Install the MCP with a single command. After that your agent can search, inspect, and install AI Canvas components on its own.

No more from-scratch UI

Instead of generating UI from zero, your agent pulls a real component with full source, the design spec, and Framer Motion.

Always current

The server fetches from the live registry at runtime, so new components reach your agent about five minutes after they ship.

Try these prompts after installing

  • Use AI Canvas to show me what categories of components are available.
  • Add the task cards from AI Canvas to my dashboard and match my dark theme.
  • My hero section feels boring. Find something animated in AI Canvas to fix it.
  • I need an animated background for my landing page. Find me a good one in AI Canvas.