# aicanvas

Finds animated, shadcn-compatible React components and brings them into your codebase. Helps assemble UI directly from the AI chat.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed, Gemini CLI · ★ 68
- Author: aicanvas-me
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/aicanvas-me/aicanvas/tree/HEAD/mcp
- Updated: 2026-10-23
- HTML: https://affpapa.org/en/nevibecode/mcp/aicanvas

## What it does

This server connects your editor to the AI Canvas registry. Your agent gets access to catalog queries, property documentation, JSX validation, and layout planning. The registry covers standalone interface parts and the Andromeda design system.

Adding components relies on the standard shadcn CLI. The server returns the exact shell command, saving you from manual file downloads. Browsing the component metadata works right away.

Without `AICANVAS_TOKEN`, requests for raw component code return an account prompt. You need a free account token to pull source files directly into the repository.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add aicanvas -- npx -y @aicanvas/mcp
```

### Codex

**Platform CLI**
```bash
codex mcp add mcp -- npx -y @aicanvas/mcp
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "mcp": {
            "command": "npx",
            "args": [
                "-y",
                "@aicanvas/mcp"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@aicanvas/mcp"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add mcp npx -y @aicanvas/mcp
```

## When to use it
- search animated shadcn-compatible components from your coding assistant
- inspect component props and types before generating interface code
- validate JSX files against declared component properties
- generate layout composition plans using existing design templates

## Example prompts
- Search AI Canvas for an animated card stack and add it to my project
- Validate prop usage in `src/components/Hero.tsx` against AI Canvas docs
- Create an interface layout plan using Andromeda templates

## Similar
- [Front-End Checklist](https://affpapa.org/en/nevibecode/mcp/front-end-checklist.md) — MCP server · ★ 74559
- [tldraw](https://affpapa.org/en/nevibecode/mcp/tldraw.md) — MCP server · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/en/nevibecode/mcp/figma-context-mcp.md) — MCP server · ★ 16062
- [mcp-server-chart](https://affpapa.org/en/nevibecode/mcp/mcp-server-chart.md) — MCP server · ★ 4402
- [Dembrandt](https://affpapa.org/en/nevibecode/mcp/dembrandt.md) — MCP server · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/en/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP server · ★ 3450

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md