What is AI Canvas MCP?
AI Canvas is a registry of animated React and Tailwind components, blocks, design systems and templates. Its MCP server is read only and fetches the live registry, so an AI coding agent can search, inspect and install components as real source code in your project.
AI Canvas describes itself as finished components, not headless primitives. The repository holds the aicanvas.me site and the free component library, and the MCP server lets an agent browse that catalog directly.
Components arrive as real React and TypeScript source in your codebase, not as a package dependency. The README says the server is read only and returns published component metadata and source.
Three ways to use the library
- shadcn CLI:
npx shadcn@latest add @aicanvas/<slug>drops a component straight into your repo. - AI Canvas MCP:
npx -y @aicanvas/mcplets your editor search and install for you. - Remix with AI: every free component page carries a prompt you can paste into any AI coding tool.
Requirements and account rules
Components target Tailwind CSS v4, React 19 and Framer Motion, and will not render correctly on Tailwind v3. Installs through the shadcn CLI need a free AI Canvas account and token. Reading source on the site needs no account.
Who it suits
Best for
- React and Tailwind 4 projects that want animated, finished sections such as card decks, task boards and galleries.
- Teams that already install components through the shadcn CLI, where the shadcn skill helps an agent use components correctly.
- Teams that want to own the source and edit it freely.
Not for
- Tailwind 3 projects, which the README says will not render these components correctly.
- People who need premium items without a license. Premium components, design systems and templates are proprietary.
- Anyone who needs write access. The server is read only.
Connect AI Canvas MCP: Animated React Components for Your Agent to your AI client
claude mcp add aicanvas -- npx -y @aicanvas/mcpAdd the server
Run the command above, or paste the JSON config into your MCP-compatible editor. The README lists Claude Code, Codex and Cursor.
Ask for a component
Describe what you need. The agent searches and inspects the live registry, which the README says updates shortly after new components ship.
Create a free account for CLI installs
Sign up, copy your token from account settings and set
AICANVAS_TOKENin.env.local. Signed out, the CLI writes a placeholder file instead of the component.Register the registry once
Add the
@aicanvasregistry URL tocomponents.json, then runnpx shadcn@latest add @aicanvas/task-cardsor any other slug.
Client configuration
{
"mcpServers": {
"aicanvas": {
"command": "npx",
"args": ["-y", "@aicanvas/mcp"]
}
}
}Endpoints and ports
https://aicanvas.me/r/{name}.jsonAdded as @aicanvas in components.json with a token paramhttps://aicanvas.meBrowse components and copy exact commandsWhat you can do with it
- Animated by defaultComponents use Framer Motion and Tailwind CSS, and 3D pieces use Three.js.
- Real source in your repoEach install copies React and TypeScript code you can restyle, extend or ship as is.
- Blocks as well as componentsComposed sections such as card decks, task boards, galleries and slide decks use the same install and license.
- Read only MCPThe server fetches the live registry at runtime and returns published component metadata and source.
- Remix promptA platform agnostic prompt on each free component rebuilds it your way in any AI coding tool.
- Free MIT libraryThe free library is MIT licensed for personal and commercial use, with no attribution needed.
Tools it exposes
Search components
Searches the live registry for components.
Inspect components
Returns published component metadata and source from the live registry, which the server fetches at runtime.
Install components
Lets your agent install components for you, per the README MCP section.
Frequently asked questions
What is AI Canvas MCP?
It is a read only MCP server for the AI Canvas registry of animated React components, blocks, design systems and templates. An agent uses it to search, inspect and install components as source code in your project. The repository holds the aicanvas.me site and the free component library.
How do I install AI Canvas MCP?
Run claude mcp add aicanvas -- npx -y @aicanvas/mcp, or add an aicanvas entry that runs npx -y @aicanvas/mcp to your MCP config. For CLI installs of components you also need a free account token. The README adds that pnpm dlx, yarn dlx and bunx work for its CLI commands too.
Which tools does AI Canvas MCP provide?
The README describes three actions, search, inspect and install, and gives no individual tool IDs. It says the server is read only, fetches the live registry at runtime and returns published component metadata and source, so new components reach your agent shortly after they ship.
Do I need an account?
Not to read the code, because every component page shows full source. A free account is needed for the one command shadcn install, which writes a placeholder file when you are signed out. The token goes in .env.local. Most of the free library also lives in the repository itself.
Does it work outside Next.js?
Yes. The README says components are plain React and TypeScript with Tailwind and Framer Motion, and the App Router is the default target, not a requirement. A few load a display font through next/font/google, which you swap outside Next.js. Installing copies the source into your project, so you own it and can change anything.
Which AI coding agents can use it?
The README says AI Canvas MCP works with Claude Code, Codex, Cursor and other MCP compatible editors. Claude Code can add it with the claude mcp add command, and other editors take an aicanvas entry in their MCP config that runs npx -y @aicanvas/mcp.
Is AI Canvas free and what is the license?
The free library is MIT licensed, so you can use it in personal and commercial projects, modify it freely and ship it without attribution. Premium components, design systems and templates are proprietary under the AI Canvas Premium License. The README's License section links the LICENSE file.