MCP 服务器

AI Canvas

Model Context Protocol server for AI Canvas. Search, inspect, and install open-source React and Tailwind components from the aicanvas.me registry directly in your AI editor.

README

<h1 align="center">AI Canvas</h1>

Open-source animated React and Tailwind components, design systems, and templates. Browse, copy, and ship. Or let your AI editor install them for you.

<a href="https://aicanvas.me">Browse the live catalog at aicanvas.me</a>

A growing collection of animated React components, plus a token-driven design system and ready-made templates. Every component arrives as real source code in your project, with an AI remix prompt that works in any AI coding tool. Open core: the free library is MIT, and Premium is proprietary.

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

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 a prompt from any 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

Open core, free to start. 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.
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.

AI Canvas is free to start. Premium unlocks design systems, templates, and closed-source components.

Featured components

<table> <tr> <td align="center" width="25%"> <a href="https://aicanvas.me/components/particle-constellation"><img src="https://ik.imagekit.io/aitoolkit/particle-constellation.png" width="200" alt="Spider Web" /></a> <a href="https://aicanvas.me/components/particle-constellation">Spider Web</a> Interactive silk web that reacts to your cursor </td> <td align="center" width="25%"> <a href="https://aicanvas.me/components/cube-carousel"><img src="https://ik.imagekit.io/aitoolkit/cube-carousel.png" width="200" alt="Cube Carousel" /></a> <a href="https://aicanvas.me/components/cube-carousel">Cube Carousel</a> Drag-to-spin 3D photo cube </td> <td align="center" width="25%"> <a href="https://aicanvas.me/components/curious-ai"><img src="https://ik.imagekit.io/aitoolkit/curious-ai.png" width="200" alt="Curious AI" /></a> <a href="https://aicanvas.me/components/curious-ai">Curious AI</a> Morphing 3D AI orb that follows your cursor </td> <td align="center" width="25%"> <a href="https://aicanvas.me/components/ripple-type"><img src="https://ik.imagekit.io/aitoolkit/ripple-type.png" width="200" alt="Ripple Type" /></a> <a href="https://aicanvas.me/components/ripple-type">Ripple Type</a> SVG text that ripples on toggle </td> </tr> <tr> <td align="center" width="25%"> <a href="https://aicanvas.me/components/product-card-deck"><img src="https://ik.imagekit.io/aitoolkit/product-card-deck.png" width="200" alt="Product Card Deck" /></a> <a href="https://aicanvas.me/components/product-card-deck">Product Card Deck</a> Flick-through draggable card deck </td> <td align="center" width="25%"> <a href="https://aicanvas.me/components/glass-music-player"><img src="https://ik.imagekit.io/aitoolkit/glass-music-player.png" width="200" alt="Glass Music Player" /></a> <a href="https://aicanvas.me/components/glass-music-player">Glass Music Player</a> Glass mini player with spinning vinyl </td> <td align="center" width="25%"> <a href="https://aicanvas.me/components/andromeda-button"><img src="https://ik.imagekit.io/aitoolkit/andromeda-button.png" width="200" alt="Andromeda Button" /></a> <a href="https://aicanvas.me/components/andromeda-button">Andromeda Button</a> Sci-fi blueprint button, five variants </td> <td align="center" width="25%"> <a href="https://aicanvas.me/components/glass-dock"><img src="https://ik.imagekit.io/aitoolkit/glass-dock.png" width="200" alt="Glass Dock" /></a> <a href="https://aicanvas.me/components/glass-dock">Glass Dock</a> macOS-style dock with cursor magnification </td> </tr> </table>

Browse all components at aicanvas.me.

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 source and remix prompts.

Design systems and templates

Beyond standalone components, AI Canvas ships Andromeda, a token-driven sci-fi and blueprint design system, with ready-made templates like Mission Control, Service Order, Resource Planning, and Signal Room. Installing an Andromeda component brings its source code plus the shared token bundle it depends on.

See it at aicanvas.me/design-systems/andromeda.

Repository layout

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

Path	What's there
`components-workspace/<slug>/`	Each free component: `index.tsx` source, `prompts.ts` remix prompt, `spec.md`
`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.

Project status

AI Canvas is an actively maintained project. New components, design systems, and templates ship regularly. If AI Canvas saves you time, a star helps more builders find it.

Contributing

AI Canvas is open source under MIT. Issues, ideas, and pull requests are welcome. Open an issue to suggest a component or report a bug.

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.