Ai Canvas Mcp (@aicanvas/mcp)
About
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.
Details
- Author
- uiNerd16
- Downloads
- 331
- Categories
- Frontend
Jump to
- 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
Setting up with Highlight
This MCP is not yet compatible with Highlight’s one-click setup. However, you can still use it with Highlight by following these steps:
- Download and install Highlight from highlightai.com/download
- Navigate to the plugins tab and select "Add Custom Plugin"
-
Configure the plugin with the settings below
Plugin Name
Ai Canvas Mcp (@aicanvas/mcp)Command (node, npx, python, etc.)Please refer to the README for specific instructions on how to obtain API keys or other required environment variables.
- Enable "Start Automatically" if you want the plugin to start when Highlight launches
From the repository
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.
list_categories
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?"
list_components
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`.
search_components
Fuzzy keyword search across component 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", "typography that reveals on scroll". Results include screenshot URLs and install commands for immediate evaluation.
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.
get_install_command
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.
list_systems
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.
get_system
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.
list_templates
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.
get_template
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.
Claude Desktop / Cursor
Paste into your MCP client config file to install this server.
{
"mcpServers": {
"ai canvas mcp (@aicanvas/mcp)": {
"aicanvas": {
"command": "npx",
"args": [
"-y",
"@aicanvas/mcp"
]
}
}
}
}McpServers
{
"aicanvas": {
"command": "npx",
"args": [
"-y",
"@aicanvas/mcp"
]
}
}AI Canvas MCP connects your AI editor to AI Canvas, an open-source, shadcn-compatible registry of 75+ free animated React components (MIT), each with AI reproduction prompts.
Install: npx -y @aicanvas/mcp
Eight read-only tools: list_categories, list_components, search_components, get_component, get_install_command, list_systems, get_system, get_template. Reads the live registry so new components appear automatically.
Sign in to leave a review
Use Google, GitHub, or an email account so ratings stay tied to real people.
No reviews posted yet.
