aicanvas

AI Canvas 是一个开源核心（open-core）的注册表，收录动画 React 组件、页面区块（blocks）、设计系统和模板。其核心特点是提供真实、可编辑的代码：组件以源代码形式安装到你的项目中，而不是作为黑盒依赖。

主要能力

• 提供动画 React 组件和组合式页面区块（如卡片组、任务板、图库等）。
• 组件基于 Tailwind CSS v4、React 19 和 Framer Motion 构建；3D 组件使用 Three.js。
• 默认面向 Next.js App Router，但也可用于任何现代 React 环境。
• 每个组件页面展示完整源代码，可免费阅读和复制，无需账户。
• 每个组件附带一个平台无关的 remix 提示词，可粘贴到任意 AI 编程工具中按自己的方式重建组件。

使用方式

1. 浏览完整目录并复制任意组件的安装命令，访问 aicanvas.me。
2. 使用一条命令安装组件：npx shadcn@latest add @aicanvas/<slug>。pnpm dlx、yarn dlx 和 bunx 同样可用。
3. 新项目需先初始化，再添加组件。
4. 安装与免费的 AI Canvas 账户绑定。未登录时，CLI 会写入一个占位文件而非组件，因此需先认证：
   • 免费注册并从账户设置中复制 token。
   • 将其放入 .env.local 作为 AICANVAS_TOKEN。
   • 在项目的 components.json 中添加注册表（只需一次）。
   • 之后每次 npx shadcn@latest add @aicanvas/<slug> 都会通过认证。登录后每个组件页面也会显示带 token 的现成命令。
5. 通过 MCP 与 AI 编辑器集成：连接 AI Canvas 到 AI 编辑器，让智能体搜索、检查并安装组件。支持 Claude Code、Codex、Cursor 及其他兼容 MCP 的编辑器。MCP 服务器为只读，运行时获取实时注册表，因此新组件发布后不久即可被智能体获取。它返回已发布组件的元数据和源代码。

适用场景

• 需要在 React 项目中快速添加动画组件或页面区块的开发者。
• 希望将组件源代码纳入自有代码库、自由修改和扩展的团队。
• 使用 AI 编程工具（如 Claude Code、Codex、Cursor）并希望通过 MCP 自动安装组件的用户。
• 需要商用且无需署名的免费组件库的个人或商业项目。

限制与说明

• 组件基于 Tailwind CSS v4 编写，在 v3 上无法正确渲染。
• 少数组件通过 next/font/google 加载显示字体；在 Next.js 之外使用时需替换为自己的字体加载器。
• 免费库采用 MIT 许可，可用于个人和商业项目，可自由修改且无需署名。高级组件、设计系统和模板为专有许可，需单独授权。
• 安装后代码归你所有，不会自动更新；如需最新版本需重新运行安装命令。
• 仓库中不包含已检入的 registry 文件夹；/r/*.json 注册表文件在构建时从 components-workspace/ 和 design-systems/ 生成，可运行 node scripts/generate-registry.mjs 在本地生成。
• 关于价格、具体高级组件内容、平台支持细节等，资料中暂未提供更多信息。