MCP.so
ログイン

Ai Canvas MCP (@aicanvas/MCP)

@uiNerd16

基本情報

ライセンス

MIT

トランスポート

stdio

作者

uiNerd16

投稿者

myHERO

Ai Canvas 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.

Ai Canvas MCP の設定

以下の設定を使って、このサーバーを MCP 対応クライアントに追加してください。

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

Ai Canvas MCP のツール

13

Return every category in the AI Canvas standalone component library, with the number of components in each. Use to orient before listing or searching, e.g. "what kinds of components are available?"

Return AI Canvas components, optionally filtered by category. Use after `list_categories` to drill into one, or pass no filter to browse everything. Each result includes slug, name, description, categories, screenshot URL, install command, and homepage URL, enough to evaluate without a separate `get_component` call. Pagination via `limit` and `offset`.

Fuzzy keyword search across standalone components, design-system components, AND ready-made templates (whole example screens). Matches on slug, name, description, categories, and tags; returns best matches ranked by relevance. Use when the user describes what they want in their own words, e.g. "an animated card stack", "background with waves", "a mission control dashboard". Results include screenshot URLs and install commands for immediate evaluation. A result tagged `"kind": "template"` is a full screen. Fetch it with `get_template`, not `get_component`.

Return the complete record for a single component: metadata + the entire .tsx source code as a string. Use after the user picks one from a search/list result and wants to see the implementation, or before installing if they want to inspect first. The source is the exact file the CLI install would write into a project.

Return the shadcn CLI command to install a single component into the user's project. After calling this, suggest the user run the command (or run it yourself if you have shell access). Requires shadcn-aware setup (Tailwind v4, components.json). For projects without that, fall back to `get_component` and write the file manually.

Return every design system available on AI Canvas. A design system is a coordinated set of components plus shared tokens and utilities, installable in one CLI command. Use when the user asks about "themes", "design systems", or wants more than a single component.

Return all files for a design system in a single response (every component, plus shared tokens and utilities), ready to write into the user's project. Use when the user wants to adopt a whole system rather than pick individual components.

Return every ready-made template on AI Canvas. A template is a complete example screen built from one design system (a dashboard, a console, a control room), installable in one CLI command. Use to discover what full screens exist before fetching one with `get_template`, or when the user asks for "a dashboard" / "an admin screen" rather than a single component.

Return all files for a single template: the example composition plus every component it uses plus shared tokens. Use for "I want exactly this dashboard" / "give me the entire mission-control screen". One CLI command installs all files.

Return the prop table of one component: every prop with its type, whether it is required, its default and what it does. Free, needs no account, and far smaller than the full source. Call it before writing JSX for a component you have not read, or to answer "what can I configure on X". A component with no table takes no props: it is self-contained and adapted by editing its source.

Check a file's JSX against the documented props of the AI Canvas components it imports. Reports props that do not exist on the component, required props that are missing, and string values outside a prop's allowed options, each with a line number. Run it on every file that uses AI Canvas components before you finish. Components are matched by import path (components/aicanvas/<slug> for standalones, components/aicanvas/<system>/... for design-system components); pass `tags` to map a tag to a slug by hand.

Turn a one-line brief ("a CRM dashboard with a pipeline board and an activity feed") into a build plan: the closest ready-made template if one fits, one AI Canvas component per part of the brief with two alternatives, the install commands in order (shared tokens first), which picks have a documented API to read, and the parts nothing in the catalog covers so you build only those. It plans; it generates no code. Follow it with get_component_props, then validate_usage on the result.

Return the checklist to run on a finished page or component built with AI Canvas parts: install completeness, prop correctness (via validate_usage), both themes, layout at 320px, motion cleanup and reduced motion, keyboard and contrast, and composition rules. Use it as the last step of compose_page, or whenever the user asks "is this done right".

概要

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

よくある質問

1

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.

2

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.

3

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.

4

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.

5

What editors does AI Canvas MCP work with?

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

コメント

マーケットプレイスの他のコンテンツ