AI Canvas

AI Canvas

Componentes Prontos, Não Primitivos Headless

Uma coleção crescente de componentes React animados e blocos de página compostos, instalados como código-fonte real no seu projeto, em vez de uma dependência.

         

_{Instalar · Componentes · Blocos · MCP · Estrutura do repositório · FAQ · Licença}

Instalação

Adicione qualquer componente ao seu projeto com um único comando:

npx shadcn@latest add @aicanvas/task-cards

Começando um novo projeto? Inicialize primeiro e depois adicione:

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

As instalações estão vinculadas a uma conta gratuita do AI Canvas. Sem estar conectado, a CLI grava um pequeno arquivo de espaço reservado em vez do componente, então autentique-se uma vez primeiro:

1. Cadastre-se gratuitamente e copie seu token em configurações da conta.
2. Coloque-o em .env.local como AICANVAS_TOKEN.
3. Adicione o registro ao components.json do seu projeto, uma vez:

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

Cada npx shadcn@latest add @aicanvas/<slug> é autenticado depois disso. Cada página de componente também mostra um comando tokenizado pronto quando você está conectado.

Nenhuma conta é necessária para ler o código: cada página de componente mostra seu código-fonte completo, livre para ler e copiar.

Requisitos

Tailwind CSS v4, React 19 e Framer Motion. Os componentes são escritos com tokens do Tailwind v4 e não serão renderizados corretamente na v3. O Next.js App Router é o alvo padrão, não um requisito.

Três maneiras de usar

Caminho	Comando ou ação	Melhor para
CLI shadcn	npx shadcn@latest add @aicanvas/<slug>	Inserir código pronto e de código aberto diretamente no seu repositório
AI Canvas MCP	npx -y @aicanvas/mcp	Deixar seu editor de IA pesquisar e instalar componentes para você
Remix com IA	Copie o prompt completo de qualquer página de componente gratuito	Reconstruir um componente do seu jeito em qualquer ferramenta de codificação com IA

Navegue pelo catálogo completo e copie o comando exato para qualquer componente em aicanvas.me. pnpm dlx, yarn dlx e bunx também funcionam.

Por que AI Canvas

• Licença MIT. A biblioteca gratuita é MIT, então você pode usá-la em projetos pessoais e comerciais, modificá-la livremente e distribuí-la sem atribuição. Componentes premium, sistemas de design e templates são proprietários.
• Código-fonte completo, seu para guardar. Cada componente chega como código React e TypeScript real no seu codebase, não uma dependência de caixa-preta. Reestilize, estenda ou distribua como está. É seu.
• Feito para fluxos de trabalho com IA. Instale com a CLI shadcn, conecte o MCP para que seu agente instale por você, ou entregue um prompt de remix que funciona em qualquer ferramenta de codificação com IA.
• Animado por padrão. Construído com Framer Motion e Tailwind CSS, pronto para o Next.js App Router ou qualquer configuração React moderna. Peças 3D usam Three.js.

Componentes

_{Navegue por todos os componentes em aicanvas.me}

Blocos

Seções de página compostas e com múltiplos componentes: decks de cartões, quadros de tarefas, galerias. Mesma instalação, mesma licença MIT, apenas uma unidade de trabalho maior que um único componente.

_{Navegue por todos os blocos em aicanvas.me}

Use com seu editor de IA (MCP)

Conecte o AI Canvas ao seu editor de IA e deixe seu agente pesquisar, inspecionar e instalar componentes para você. Economize tokens. Não comece do zero.

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

Ou adicione à sua configuração MCP:

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

Funciona com Claude Code, Codex, Cursor e outros editores compatíveis com MCP. O servidor é somente leitura e busca o registro ao vivo em tempo de execução, então novos componentes chegam ao seu agente logo após serem lançados. Ele retorna metadados e código-fonte publicados dos componentes.

Estrutura do repositório

Este repositório contém o código-fonte do AI Canvas: o site e a biblioteca gratuita de componentes. O código-fonte dos componentes vive aqui, não apenas o site.

Caminho	O que contém
components-workspace/<slug>/	Cada componente gratuito: código-fonte index.tsx e seu prompt de remix prompts.ts, além de um spec.md em muitos
design-systems/andromeda/	O código-fonte do sistema de design gratuito Andromeda: tokens, componentes, utilitários
app/	O site aicanvas.me (Next.js App Router)
scripts/generate-registry.mjs	Gera o JSON do registro shadcn a partir das fontes acima

Os arquivos de registro @aicanvas servidos em /r/*.json são gerados no momento da compilação a partir de components-workspace/ e design-systems/, então não há pasta registry/ versionada. Execute node scripts/generate-registry.mjs para produzi-los localmente.

Pilha tecnológica

React e TypeScript, Tailwind CSS e Framer Motion. Construído para o Next.js App Router e funciona em qualquer configuração React moderna. Componentes 3D usam Three.js.

Perguntas Frequentes

Preciso de uma conta? Não para ler o código. Cada página de componente mostra seu código-fonte completo, livre para ler e copiar. A maior parte da biblioteca gratuita também vive aqui neste repositório. Uma conta gratuita é necessária apenas para a instalação de um comando npx shadcn add, que grava um arquivo de espaço reservado quando você está desconectado.

Funciona fora do Next.js? Sim. Os componentes são React e TypeScript puros com Tailwind e Framer Motion. O App Router é o alvo padrão, não um requisito. Alguns componentes carregam sua fonte de exibição via next/font/google; fora do Next.js, troque esse import pelo seu próprio carregador de fontes.

Recebo uma dependência ou código real? Código real. A instalação copia o código-fonte para o seu projeto, então você o possui e pode alterar qualquer coisa. Não há pacote AI Canvas para manter em sincronia.

Posso usar comercialmente? Sim, a biblioteca gratuita é MIT. Use em projetos comerciais, modifique e distribua sem atribuição. O Premium é licenciado separadamente, veja Licença.

O que é o prompt de remix? Cada componente vem com um prompt abrangente e independente de plataforma. Cole-o em qualquer ferramenta de codificação com IA para reconstruir esse componente do seu jeito, em vez de copiá-lo como está.

Como mantenho os componentes atualizados? Você não precisa. Uma vez instalado, o código é seu e nunca muda sob você. Execute novamente o comando de instalação se quiser a versão mais recente de um componente.

Contribuindo

O AI Canvas é mantido ativamente e novos componentes são lançados regularmente. Issues, ideias e pull requests são bem-vindos: abra uma issue para sugerir um componente ou relatar um bug.

Se o AI Canvas economiza seu tempo, uma estrela ajuda mais construtores a encontrá-lo.

Licença

A biblioteca gratuita é licenciada sob MIT. Use em projetos pessoais e comerciais, modifique livremente e distribua sem atribuição. Veja LICENÇA. Componentes premium, sistemas de design e templates são proprietários sob a Licença Premium do AI Canvas.