AI Canvas

Permite que un agente de IA busque en un registro de código abierto de componentes React animados, bloques de UI y sistemas de diseño, y devuelva sus comandos de instalación de la CLI de shadcn.

GitHub

Documentación

AI Canvas

Componentes Terminados, No Primitivas Headless

Una colección creciente de componentes React animados y bloques de página compuestos, instalados como código fuente real en tu proyecto en lugar de como una dependencia.

_{Instalar · Componentes · Bloques · MCP · Estructura del repositorio · Preguntas frecuentes · Licencia}

Instalar

Añade cualquier componente a tu proyecto con un solo comando:

npx shadcn@latest add @aicanvas/task-cards

¿Empezando un proyecto nuevo? Inicializa primero y luego añade:

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

Las instalaciones están vinculadas a una cuenta gratuita de AI Canvas. Si no has iniciado sesión, la CLI escribe un pequeño archivo de marcador de posición en lugar del componente, así que autentícate una vez primero:

Regístrate gratis y copia tu token desde configuración de la cuenta.
Colócalo en .env.local como AICANVAS_TOKEN.
Añade el registro al components.json de tu proyecto, una vez:

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

Cada npx shadcn@latest add @aicanvas/<slug> se autentica después de eso. Cada página de componente también muestra un comando tokenizado listo cuando has iniciado sesión.

No se necesita cuenta para leer el código: cada página de componente muestra su código fuente completo, libre de leer y copiar.

Requisitos

Tailwind CSS v4, React 19 y Framer Motion. Los componentes están escritos con tokens de Tailwind v4 y no se renderizarán correctamente en v3. El App Router de Next.js es el objetivo predeterminado, no un requisito.

Tres formas de usarlo

Ruta	Comando o acción	Mejor para
CLI de shadcn	`npx shadcn@latest add @aicanvas/<slug>`	Insertar código terminado y de código abierto directamente en tu repositorio
AI Canvas MCP	`npx -y @aicanvas/mcp`	Dejar que tu editor de IA busque e instale componentes por ti
Remix con IA	Copia el prompt completo desde cualquier página de componente gratuito	Reconstruir un componente a tu manera en cualquier herramienta de codificación con IA

Explora el catálogo completo y copia el comando exacto para cualquier componente en aicanvas.me. pnpm dlx, yarn dlx y bunx también funcionan.

Por qué AI Canvas

Licencia MIT. La biblioteca gratuita es MIT, así que puedes usarla en proyectos personales y comerciales, modificarla libremente y distribuirla sin atribución. Los componentes premium, sistemas de diseño y plantillas son propietarios.
Código fuente completo, tuyo para conservar. Cada componente llega como código real de React y TypeScript en tu base de código, no como una dependencia de caja negra. Rediseñalo, extiéndelo o distribúyelo tal cual. Es tuyo.
Diseñado para flujos de trabajo con IA. Instala con la CLI de shadcn, conecta el MCP para que tu agente instale por ti, o entrégale un prompt de remix que funcione en cualquier herramienta de codificación con IA.
Animado por defecto. Construido con Framer Motion y Tailwind CSS, listo para el App Router de Next.js o cualquier configuración moderna de React. Las piezas 3D usan Three.js.

Componentes

_{Explora todos los componentes en aicanvas.me}

Bloques

Secciones de página compuestas por múltiples componentes: mazos de tarjetas, tableros de tareas, galerías. Misma instalación, misma licencia MIT, solo una unidad de trabajo más grande que un componente individual.

_{Explora todos los bloques en aicanvas.me}

Úsalo con tu editor de IA (MCP)

Conecta AI Canvas a tu editor de IA y deja que tu agente busque, inspeccione e instale componentes por ti. Ahorra tokens. No empieces desde cero.

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

O añádelo a tu configuración de MCP:

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

Funciona con Claude Code, Codex, Cursor y otros editores compatibles con MCP. El servidor es de solo lectura y obtiene el registro en vivo en tiempo de ejecución, así que los componentes nuevos llegan a tu agente poco después de publicarse. Devuelve metadatos y código fuente de componentes publicados.

Estructura del repositorio

Este repositorio contiene el código fuente de AI Canvas: el sitio web y la biblioteca de componentes gratuita. El código fuente de los componentes vive aquí, no solo el sitio.

Ruta	Qué contiene
`components-workspace/<slug>/`	Cada componente gratuito: código fuente `index.tsx` y su prompt de remix `prompts.ts`, además de un `spec.md` en muchos
`design-systems/andromeda/`	El código fuente del sistema de diseño gratuito Andromeda: tokens, componentes, utilidades
`app/`	El sitio web aicanvas.me (Next.js App Router)
`scripts/generate-registry.mjs`	Construye el JSON del registro de shadcn a partir de las fuentes anteriores

Los archivos de registro @aicanvas servidos en /r/*.json se generan en tiempo de compilación a partir de components-workspace/ y design-systems/, por lo que no hay una carpeta registry/ verificada. Ejecuta node scripts/generate-registry.mjs para producirlos localmente.

Pila tecnológica

React y TypeScript, Tailwind CSS y Framer Motion. Construido para el App Router de Next.js y funciona en cualquier configuración moderna de React. Los componentes 3D usan Three.js.

Preguntas frecuentes

¿Necesito una cuenta? No para leer el código. Cada página de componente muestra su código fuente completo, libre de leer y copiar. La mayor parte de la biblioteca gratuita también vive aquí en este repositorio. Una cuenta gratuita solo se necesita para la instalación de un solo comando npx shadcn add, que escribe un archivo de marcador de posición cuando no has iniciado sesión.

¿Funciona fuera de Next.js? Sí. Los componentes son React y TypeScript puros con Tailwind y Framer Motion. El App Router es el objetivo predeterminado, no un requisito. Algunos componentes cargan su fuente de visualización a través de next/font/google; fuera de Next.js, cambia esa importación por tu propio cargador de fuentes.

¿Obtengo una dependencia o código real? Código real. La instalación copia el código fuente en tu proyecto, así que lo posees y puedes cambiar cualquier cosa. No hay un paquete de AI Canvas que mantener sincronizado.

¿Puedo usarlo comercialmente? Sí, la biblioteca gratuita es MIT. Úsala en proyectos comerciales, modifícala y distribúyela sin atribución. Premium se licencia por separado, consulta Licencia.

¿Qué es el prompt de remix? Cada componente incluye un prompt integral e independiente de la plataforma. Pégalo en cualquier herramienta de codificación con IA para reconstruir ese componente a tu manera en lugar de copiarlo tal cual.

¿Cómo mantengo los componentes actualizados? No tienes que hacerlo. Una vez instalado, el código es tuyo y nunca cambia bajo tus pies. Vuelve a ejecutar el comando de instalación si quieres la versión más reciente de un componente.

Contribuciones

AI Canvas se mantiene activamente y los componentes nuevos se publican regularmente. Los problemas, ideas y solicitudes de extracción son bienvenidos: abre un problema para sugerir un componente o reportar un error.

Si AI Canvas te ahorra tiempo, una estrella ayuda a que más desarrolladores lo encuentren.

Licencia

La biblioteca gratuita tiene licencia MIT. Úsala en proyectos personales y comerciales, modifícala libremente y distribúyela sin atribución. Consulta LICENCIA. Los componentes premium, sistemas de diseño y plantillas son propietarios bajo la Licencia Premium de AI Canvas.