Ai Canvas Mcp (@aicanvas/mcp)

AI Canvas

完整组件，而非无头基础组件

不断扩充的动画 React 组件和组合式页面区块集合，作为实际源代码安装到你的项目中，而非作为依赖项安装。

         

_{安装 · 组件 · 区块 · MCP · 仓库结构 · 常见问题 · 许可证}

安装

只需一条命令，即可将任意组件添加到项目中：

npx shadcn@latest add @aicanvas/task-cards

要开始新项目？先初始化，再添加：

npx shadcn@latest init        # new projects only
npx shadcn@latest add @aicanvas/task-cards

安装需要关联免费的 AI Canvas 账户。未登录时，CLI 会写入一个小型占位文件，而不是组件，因此请先完成一次身份验证：

1. 免费注册，并从账户设置复制你的令牌。
2. 将其放入 .env.local，变量名为 AICANVAS_TOKEN。
3. 在项目的 components.json 中添加注册表，只需添加一次：

{ "registries": { "@aicanvas": { "url": "https://aicanvas.me/r/{name}.json", "params": { "token": "${AICANVAS_TOKEN}" } } } }

此后，每次运行 npx shadcn@latest add @aicanvas/<slug> 都会通过身份验证。登录后，每个组件页面也会显示一条已附带令牌、可直接使用的命令。

阅读代码不需要账户：每个组件页面都会显示完整源代码，可免费阅读和复制。

要求

Tailwind CSS v4、React 19 和 Framer Motion。组件基于 Tailwind v4 令牌编写，在 v3 中无法正确呈现。Next.js App Router 是默认目标，但并非必需。

三种使用方式

方式	命令或操作	适用场景
shadcn CLI	npx shadcn@latest add @aicanvas/<slug>	将完整的开源代码直接添加到你的仓库
AI Canvas MCP	npx -y @aicanvas/mcp	让 AI 编辑器为你搜索并安装组件
借助 AI 重新创建	复制任意免费组件页面上的完整提示词	在任意 AI 编码工具中按自己的方式重建组件

在 aicanvas.me 浏览完整目录，并复制任意组件的准确命令。pnpm dlx、yarn dlx 和 bunx 也可使用。

为什么选择 AI Canvas

• 采用 MIT 许可证。 免费库采用 MIT 许可证，因此你可以将其用于个人和商业项目、自由修改，并直接发布，无需注明出处。高级组件、设计系统和模板为专有内容。
• 完整源码，由你掌控。 每个组件都会以真实的 React 和 TypeScript 代码形式加入你的代码库，而不是黑盒依赖。你可以重新设置样式、扩展它，也可以直接发布。它完全属于你。
• 专为 AI 工作流打造。 使用 shadcn CLI 安装、连接 MCP 让你的 Agent 代为安装，或者把适用于任何 AI 编码工具的 remix 提示词交给它。
• 默认带动画。 基于 Framer Motion 和 Tailwind CSS 构建，可用于 Next.js App Router 或任何现代 React 配置。3D 元素使用 Three.js。

组件

_{在 aicanvas.me 浏览所有组件}

区块

由多个组件组合而成的页面区段：卡片组、任务看板、图库。安装方式相同，MIT 许可证相同，只是工作单元比单个组件更大。

_{在 aicanvas.me 浏览所有区块}

## 在 AI 编辑器中使用它（MCP）

将 AI Canvas 连接到 AI 编辑器，让 Agent 为你搜索、检查和安装组件。节省 Token。无需从头开始。

claude mcp add aicanvas -- npx -y @aicanvas/mcp

或者将它添加到 MCP 配置中：

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

适用于 Claude Code、Codex、Cursor 和其他兼容 MCP 的编辑器。该服务为只读服务，会在运行时获取实时注册表，因此新组件发布后不久就能提供给你的 Agent。它会返回已发布的组件元数据和源代码。

仓库布局

此仓库包含 AI Canvas 的源代码：网站和免费组件库。组件源代码就在这里，而不只是网站。

路径	内容
components-workspace/<slug>/	每个免费组件：index.tsx 源代码和用于改编的 prompts.ts 提示词，许多组件还包含 spec.md
design-systems/andromeda/	免费的 Andromeda 设计系统源代码：设计令牌、组件、工具函数
app/	aicanvas.me 网站（Next.js App Router）
scripts/generate-registry.mjs	根据上述源代码构建 shadcn 注册表 JSON

通过 /r/*.json 提供的 @aicanvas 注册表文件会在构建时根据 components-workspace/ 和 design-systems/ 生成，因此仓库中没有 registry/ 文件夹。运行 node scripts/generate-registry.mjs 可在本地生成这些文件。

技术栈

React 和 TypeScript、Tailwind CSS 以及 Framer Motion。专为 Next.js App Router 构建，也适用于任何现代 React 项目。3D 组件使用 Three.js。

常见问题

我需要账号吗？ 阅读代码不需要。每个组件页面都会展示完整源代码，可免费阅读和复制。大多数免费组件也都在此仓库中。只有使用单命令 npx shadcn add 安装时才需要免费账号；退出登录时，该命令会写入一个占位文件。

它能在 Next.js 以外的环境中运行吗？ 可以。组件使用原生 React 和 TypeScript，并搭配 Tailwind 和 Framer Motion。App Router 是默认目标，但并非必需。少数组件通过 next/font/google 加载显示字体；在 Next.js 以外的环境中，请将该导入替换为你自己的字体加载器。

我获得的是依赖包还是真正的代码？ 是真正的代码。安装时会将源代码复制到你的项目中，因此代码归你所有，你可以随意修改。无需同步 AI Canvas 软件包。

可以用于商业项目吗？ 可以，免费组件库采用 MIT 许可证。你可以将其用于商业项目、进行修改并发布，无需注明出处。高级版采用单独许可证，详见许可证。

什么是改编提示词？ 每个组件都附带一条全面且与平台无关的提示词。将它粘贴到任何 AI 编码工具中，就能按自己的方式重建该组件，而不是直接复制原样使用。

如何让组件保持最新？ 无需特别操作。安装后，代码就归你所有，不会自行更改。如果想获取组件的最新版本，请重新运行安装命令。

参与贡献

AI Canvas 正在积极维护，并定期发布新组件。欢迎提交问题、想法和拉取请求：可以提出组件建议或报告错误。

如果 AI Canvas 为你节省了时间，点个星标可以帮助更多开发者发现它。

许可证

免费组件库采用 MIT 许可证。你可以将其用于个人和商业项目、自由修改并发布，无需注明出处。详见 LICENSE。高级组件、设计系统和模板为专有内容，受 AI Canvas Premium License 约束。