MCP.so
Sign In

Ai Canvas Mcp (@aicanvas/mcp)

@uiNerd16

RepositoryHomepage

About Ai Canvas Mcp (@aicanvas/mcp)

Browse and install 75+ free animated, shadcn-compatible React components from AI Canvas, each with AI reproduction prompts. Read-only MCP server over the live aicanvas.me registry; eight tools.

#react#components#shadcn#ui#tailwind#animation#design-system#frontend

Config

Add this server to your MCP-compatible client using the configuration below.

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

Tools

No tools detected

Fetch the live tool list by running this server in a temporary sandbox using the button above.

Overview

What is AI Canvas MCP?

AI Canvas MCP is a read-only Model Context Protocol server that lets AI editors (Claude Code, Codex, Cursor, etc.) search, inspect, and install animated React components, design systems, and templates from the AI Canvas catalog directly into a project. It serves developers who want to drop finished, open‑source UI code into their codebase or let their AI agent handle installation.

How to use AI Canvas MCP?

Connect the server to your AI editor with claude mcp add aicanvas -- npx -y @aicanvas/mcp or add it to your MCP configuration file. The server fetches the live registry at runtime and returns component source code and reproduction prompts. No additional setup is required; the server works out of the box with any MCP‑compatible editor.

Key features of AI Canvas MCP

  • Read‑only server that fetches the live AI Canvas registry
  • Lets AI agents search, inspect, and install components automatically
  • Returns full React/TypeScript source code, not black‑box dependencies
  • Supports reproduction prompts for Claude Code, Lovable, and V0
  • Works with shadcn CLI, MCP, and direct prompt copying
  • Open‑core: free components are MIT licensed; Premium is proprietary

Use cases of AI Canvas MCP

  • Letting an AI agent install animated React components during a coding session
  • Quickly adding a design system (e.g., Andromeda) or template to a new project
  • Remixing a component by handing its reproduction prompt to a different AI editor

FAQ from AI Canvas MCP

What is the difference between AI Canvas MCP and the shadcn CLI?

The shadcn CLI installs components manually with npx shadcn@latest add @aicanvas/<slug>. AI Canvas MCP automates this by letting your AI editor search, inspect, and install components for you in the same way.

What runtime dependencies are required?

AI Canvas components are built with React, TypeScript, Tailwind CSS, and Framer Motion. 3D pieces use Three.js. They are designed for the Next.js App Router but work in any modern React setup.

Is AI Canvas MCP free?

Yes, the MCP server is free to use, and the free library of components is MIT licensed. Premium components, design systems, and templates are proprietary under the AI Canvas Premium License.

Where does the server fetch data from?

It fetches the live AI Canvas registry at runtime, so new components become available to your agent shortly after they are published. The server is read‑only and does not store any data locally.

What editors does AI Canvas MCP work with?

It works with any MCP‑compatible AI editor, including Claude Code, Codex, Cursor, and others.

Frequently asked questions

What is the difference between AI Canvas MCP and the shadcn CLI?

The shadcn CLI installs components manually with `npx shadcn@latest add @aicanvas/<slug>`. AI Canvas MCP automates this by letting your AI editor search, inspect, and install components for you in the same way.

What runtime dependencies are required?

AI Canvas components are built with React, TypeScript, Tailwind CSS, and Framer Motion. 3D pieces use Three.js. They are designed for the Next.js App Router but work in any modern React setup.

Is AI Canvas MCP free?

Yes, the MCP server is free to use, and the free library of components is MIT licensed. Premium components, design systems, and templates are proprietary under the AI Canvas Premium License.

Where does the server fetch data from?

It fetches the live AI Canvas registry at runtime, so new components become available to your agent shortly after they are published. The server is read‑only and does not store any data locally.

What editors does AI Canvas MCP work with?

It works with any MCP‑compatible AI editor, including Claude Code, Codex, Cursor, and others.

Comments

Basic information

License

MIT

Transports

stdio

Author

uiNerd16

Submitted by

myHERO

More MCP servers

PLUR

plur-ai

AI agents start every session with amnesia — you re-explain the project, repeat your preferences, and correct the same mistakes over and over. PLUR gives them a memory that persists. Your agent's corrections, preference

226

ctxfile

ctxfile

Local-first MCP server that snapshots your project's working state into one context object. Open-core, privacy-first.

2

InvestSights Indian Stock Research MCP

InvestSights

Research-grade Indian stock data (NSE/BSE) — fundamentals, forensic accounting scores, DCF valuation, screening, prices & news for 4,800+ stocks.

Local YDB MCP

astandrik

Safety-first stdio MCP server with 38 tools for operating Docker-based local-ydb environments locally or over SSH.

4

OrangePro

Aamir Siddiqui

OrangePro local-first CLI + MCP server for behavior mapping, grounded test generation, and dynamic proof.

12