io.github.aicanvas-me/aicanvas MCP Server

<p align="center"> <a href="https://aicanvas.me"> <img width="100%" alt="AI Canvas: open-source animated React and Tailwind components, design systems, and templates, installable with the shadcn CLI or your AI editor over MCP" src="https://ik.imagekit.io/aitoolkit/readme-banner.png" /> </a> </p>

AI Canvas

<p align="center"> <a href="https://aicanvas.me" title="Browse the live catalog"><img src="assets/readme-buttons/btn-site.png" alt="Visit aicanvas.me" width="240" height="56" /></a> </p> <p align="center"> <em>Finished Components, Not Headless Primitives</em> </p>

A growing collection of animated React components and composed page blocks, installed as real source code in your project rather than as a dependency.

<p align="center"> <a href="./LICENSE"><img src="assets/readme-buttons/btn-license.png" alt="License: MIT" width="154" height="45" valign="middle" /></a> &nbsp; <a href="https://aicanvas.me"><img src="assets/readme-buttons/btn-components.png" alt="80+ free components" width="228" height="45" valign="middle" /></a> &nbsp; <a href="#install"><img src="assets/readme-buttons/btn-registry.png" alt="shadcn registry: @aicanvas" width="218" height="45" valign="middle" /></a> &nbsp; <a href="#use-it-with-your-ai-editor-mcp"><img src="assets/readme-buttons/btn-agents.png" alt="Works with Claude, Codex and Cursor" width="319" height="45" valign="middle" /></a> &nbsp; <a href="https://mcpservers.org/servers/uinerd16/aicanvas"><img src="assets/readme-buttons/btn-mcpservers.png" alt="Listed on mcpservers.org" width="259" height="45" valign="middle" /></a> &nbsp; <a href="https://github.com/aicanvas-me/aicanvas"><img src="assets/readme-buttons/btn-github.png" alt="aicanvas-me on GitHub" width="220" height="45" valign="middle" /></a> </p> <p align="center">_{<a href="#install">Install</a> · <a href="#components">Components</a> · <a href="#blocks">Blocks</a> · <a href="#use-it-with-your-ai-editor-mcp">MCP</a> · <a href="#repository-layout">Repo layout</a> · <a href="#common-questions">FAQ</a> · <a href="#license">License</a>}</p>

Install

Add any component to your project with one command:

npx shadcn@latest add @aicanvas/task-cards

Starting a new project? Initialize first, then add:

npx shadcn@latest init        # new projects only
npx shadcn@latest add @aicanvas/task-cards

Installs are tied to a free AI Canvas account. Signed out, the CLI writes a small placeholder file instead of the component, so authenticate once first:

1. Sign up free and copy your token from account settings.
2. Put it in .env.local as AICANVAS_TOKEN.
3. Add the registry to your project's components.json, once:

{ "registries": { "@aicanvas": { "url": "https://aicanvas.me/r/{name}.json", "params": { "token": "${AICANVAS_TOKEN}" } } } }

Every npx shadcn@latest add @aicanvas/<slug> is authenticated after that. Each component page also shows a ready tokenized command when you are signed in.

No account is needed to read the code: every component page shows its full source, free to read and copy.

Requirements

Tailwind CSS v4, React 19 and Framer Motion. Components are written against Tailwind v4 tokens and will not render correctly on v3. The Next.js App Router is the default target, not a requirement.

Three ways to use it

Path	Command or action	Best for
shadcn CLI	npx shadcn@latest add @aicanvas/<slug>	Dropping finished, open-source code straight into your repo
AI Canvas MCP	npx -y @aicanvas/mcp	Letting your AI editor search and install components for you
Remix with AI	Copy the full prompt from any free component page	Rebuilding a component your way in any AI coding tool

Browse the full catalog and copy the exact command for any component at aicanvas.me. pnpm dlx, yarn dlx, and bunx work too.

Why AI Canvas

• MIT licensed. The free library is MIT, 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.
• Full source, yours to keep. Every component arrives as real React and TypeScript code in your codebase, not a black-box dependency. Restyle it, extend it, or ship it as is. It is yours.
• Built for AI workflows. Install with the shadcn CLI, connect the MCP so your agent installs for you, or hand it a remix prompt that works in any AI coding tool.
• Animated by default. Built with Framer Motion and Tailwind CSS, ready for the Next.js App Router or any modern React setup. 3D pieces use Three.js.

Components

<p align="center"> <a href="https://aicanvas.me/components/tilted-coverflow"><img src="https://ik.imagekit.io/aitoolkit/tilted-coverflow.png" width="48%" alt="Tilted Coverflow: 3D coverflow card carousel of seven tilted photos, drag or arrows to focus any card" /></a> <a href="https://aicanvas.me/components/crypto-swap"><img src="https://ik.imagekit.io/aitoolkit/crypto-swap.png?v=2" width="48%" alt="Crypto Swap: token-swap widget with live exchange rates, price impact and an animated swap button" /></a> <a href="https://aicanvas.me/components/signature-pad"><img src="https://ik.imagekit.io/aitoolkit/signature-pad.png?v=2&tr=w-846,h-480" width="48%" alt="Signature Pad: pill button morphs into a canvas to draw with mouse or touch" /></a> <a href="https://aicanvas.me/components/product-card-deck"><img src="https://ik.imagekit.io/aitoolkit/product-card-deck.png?v=1" width="48%" alt="Product Card Deck: a draggable card deck you flick through one card at a time" /></a> <a href="https://aicanvas.me/components/glass-ai-compose"><img src="https://ik.imagekit.io/aitoolkit/glass-ai-compose.png" width="48%" alt="Glass AI Composer: glassmorphism AI chat input with image upload, web search toggle and model switcher" /></a> <a href="https://aicanvas.me/components/voice-chat-pill"><img src="https://ik.imagekit.io/aitoolkit/voice-chat-pill.png?v=2026050501" width="48%" alt="Live Session Pill: compact presence pill with an animated speaking indicator and overlapping avatars" /></a> </p> <p align="center">_{<a href="https://aicanvas.me">Browse all components at aicanvas.me</a>}</p>

Blocks

Composed, multi-component page sections: card decks, task boards, galleries. Same install, same MIT license, just a larger unit of work than a single component.

<p align="center"> <a href="https://aicanvas.me/components/ai-job-cards"><img src="https://ik.imagekit.io/aitoolkit/ai-job-cards.png" width="48%" alt="AI Job Cards: three job card stacks with swipe-to-cycle, brand logos and a bookmark toggle" /></a> <a href="https://aicanvas.me/components/scroll-wipe-gallery"><img src="https://ik.imagekit.io/aitoolkit/scroll-wipe-gallery.png?v=2" width="48%" alt="Scroll Wipe Gallery: a gallery section that wipes between images as you scroll" /></a> <a href="https://aicanvas.me/components/task-cards"><img src="https://ik.imagekit.io/aitoolkit/task-cards.png" width="48%" alt="Task Cards: a task board section with draggable cards" /></a> <a href="https://aicanvas.me/components/slide-deck"><img src="https://ik.imagekit.io/aitoolkit/slide-deck.png" width="48%" alt="Slide Deck: a presentation-style slide section" /></a> </p> <p align="center">_{<a href="https://aicanvas.me/components/category/blocks">Browse all blocks at aicanvas.me</a>}</p>

Use it with your AI editor (MCP)

Connect AI Canvas to your AI editor and let your agent search, inspect, and install components for you. Save tokens. Do not start from scratch.

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

Or add it to your MCP config:

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

Works with Claude Code, Codex, Cursor, and other MCP-compatible editors. The server is read-only and fetches the live registry at runtime, so new components reach your agent shortly after they ship. It returns published component metadata and source.

Repository layout

This repo holds the AI Canvas source: the website and the free component library. The component source lives here, not just the site.

Path	What's there
components-workspace/<slug>/	Each free component: index.tsx source and its prompts.ts remix prompt, plus a spec.md on many
design-systems/andromeda/	The free Andromeda design system source: tokens, components, utilities
app/	The aicanvas.me website (Next.js App Router)
scripts/generate-registry.mjs	Builds the shadcn registry JSON from the sources above

The @aicanvas registry files served at /r/*.json are generated at build time from components-workspace/ and design-systems/, so there is no checked-in registry/ folder. Run node scripts/generate-registry.mjs to produce them locally.

Tech stack

React and TypeScript, Tailwind CSS, and Framer Motion. Built for the Next.js App Router and works in any modern React setup. 3D components use Three.js.

Common Questions

Do I need an account? Not to read the code. Every component page shows its full source, free to read and copy. Most of the free library also lives right here in this repo. A free account is only needed for the one-command npx shadcn add install, which writes a placeholder file when you are signed out.

Does it work outside Next.js? Yes. Components are plain React and TypeScript with Tailwind and Framer Motion. The App Router is the default target, not a requirement. A few components load their display font through next/font/google; outside Next.js, swap that import for your own font loader.

Do I get a dependency or real code? Real code. Installing copies the source into your project, so you own it and can change anything. There is no AI Canvas package to keep in sync.

Can I use it commercially? Yes, the free library is MIT. Use it in commercial projects, modify it, and ship it without attribution. Premium is licensed separately, see License.

What is the remix prompt? Every component ships with one comprehensive, platform-agnostic prompt. Paste it into any AI coding tool to rebuild that component your way instead of copying it as is.

How do I keep components up to date? You do not have to. Once installed, the code is yours and never changes under you. Re-run the install command if you want the latest version of a component.

Contributing

AI Canvas is actively maintained and new components ship regularly. Issues, ideas, and pull requests are welcome: open an issue to suggest a component or report a bug.

If AI Canvas saves you time, a star helps more builders find it.

License

The free library is MIT licensed. Use it in personal and commercial projects, modify it freely, and ship it without attribution. See LICENSE. Premium components, design systems, and templates are proprietary under the AI Canvas Premium License.