Claudable - Construtor de Aplicações Web de Código Aberto Baseado em Agente de IA

Visão Geral do Projeto

Claudable é um poderoso construtor de aplicações web baseado em Next.js que combina as capacidades avançadas de agente de IA do Claude Code (também suporta Cursor CLI) com a experiência de construção de aplicações simples e intuitiva do Lovable. Basta descrever a sua ideia de aplicação - "Quero uma aplicação de gestão de tarefas com modo escuro" - e veja o Claudable gerar código instantaneamente e exibir uma pré-visualização em tempo real da aplicação em funcionamento.

Este projeto de código aberto permite-lhe construir e implementar aplicações web profissionais de forma fácil e gratuita.

Principais Funcionalidades

🤖 Suporte Poderoso a Agentes de IA

• Claude Code: Agente de codificação de IA avançado da Anthropic, com alta capacidade de raciocínio, execução local e múltiplos modos de operação (interativo, edição automática, totalmente automático)
• Cursor CLI: Agente de codificação inteligente, adequado para tarefas de codificação complexas
• Suporte Nativo a MCP: Aproveita totalmente as capacidades dos agentes Claude Code e Cursor CLI

💻 Experiência de Desenvolvimento

• Linguagem Natural para Código: Basta descrever o que pretende construir e o Claudable gerará código Next.js pronto para produção
• Pré-visualização em Tempo Real: Veja as alterações instantaneamente através de hot-reloading, observando as modificações em tempo real enquanto a IA constrói a aplicação
• Início Sem Configuração: Sem sandboxes complexas, chaves de API ou configurações de base de dados - comece a construir imediatamente
• Geração de UI Estética: Gere interfaces de utilizador bonitas usando Tailwind CSS e shadcn/ui

🚀 Implementação e Integração

• Implementação com Um Clique: Envie a sua aplicação para a Vercel com apenas um clique, sem necessidade de configuração
• Integração com GitHub: Controlo de versão automático e configuração de implementação contínua
• Base de Dados Supabase: Conecte diretamente uma base de dados PostgreSQL pronta para produção ao seu projeto
• Deteção Automática de Erros: Deteta erros na aplicação e os corrige automaticamente

💰 Vantagens de Custo

• Totalmente Gratuito: Sem taxas de subscrição adicionais além do construtor de aplicações
• Código Aberto: Licença MIT, pode ser usado para fins comerciais
• Sem Bloqueio de Fornecedor: Você possui o código gerado e pode modificá-lo ou hospedá-lo em qualquer lugar

Arquitetura Técnica

Stack Tecnológico Frontend

• Next.js: Framework React moderno
• Tailwind CSS: Framework CSS utilitário-primeiro
• shadcn/ui: Biblioteca de componentes UI moderna
• TypeScript: JavaScript com tipagem segura

Stack Tecnológico Backend

• Python: Servidor API backend
• SQLite: Base de dados para desenvolvimento local
• PostgreSQL: Base de dados para ambiente de produção (opcional)

Integração de Agentes de IA

• Claude Code: Agente de codificação de IA principal recomendado
• Cursor CLI: Ferramenta de codificação inteligente alternativa
• Suporte MCP: Integração nativa do Model Context Protocol

Instalação e Configuração

Requisitos do Sistema

# Componentes necessários
- Node.js 18+
- Python 3.10+
- Claude Code ou Cursor CLI (com sessão iniciada)
- Git

Instalação Rápida

# Clonar o repositório
git clone https://github.com/opactorai/Claudable.git
cd Claudable

# Instalar todas as dependências (Node.js e Python)
npm install

# Iniciar o servidor de desenvolvimento
npm run dev

Endereços de Acesso à Aplicação

• Frontend: http://localhost:3000
• Servidor API: http://localhost:8080
• Documentação da API: http://localhost:8080/docs

Nota: As portas são detetadas automaticamente; se a porta predefinida estiver em uso, a próxima porta disponível será atribuída.

Configuração Manual (Opcional)

# Configuração Frontend
cd apps/web
npm install

# Configuração Backend
cd ../api
python3 -m venv .venv
source .venv/bin/activate  # Windows: .venv\Scripts\activate
pip install -r requirements.txt

Fluxo de Utilização

1. Conectar o Agente de IA

Primeiro, certifique-se de que iniciou sessão no Claude Code ou Cursor CLI:

# Iniciar sessão no Claude Code
claude
> /login

# Iniciar sessão no Cursor CLI
cursor-agent login

2. Iniciar o Claudable

npm run dev

3. Descrever os Requisitos do Projeto

Descreva a aplicação que pretende construir em linguagem natural, por exemplo:

• "Criar uma aplicação de gestão de tarefas com autenticação de utilizador"
• "Fazer um blog pessoal com suporte para modo escuro"
• "Construir um website de e-commerce simples"

4. Observar a IA Gerar Código

A IA gerará automaticamente a estrutura do projeto e o código, e você poderá ver a pré-visualização em tempo real.

5. Implementar em Ambiente de Produção

Publique a sua aplicação com um clique usando a funcionalidade de implementação integrada da Vercel.

Gestão de Base de Dados

Desenvolvimento Local

• Usa a base de dados SQLite, localizada em data/cc.db
• Inicializada automaticamente na primeira execução

Comandos Utilitários

# Fazer backup da base de dados
npm run db:backup

# Reiniciar a base de dados
npm run db:reset

# Limpar todas as dependências
npm run clean

Integrações de Serviço

Integração com GitHub

1. Obter Token: GitHub Personal Access Tokens → Generate new token (classic) → Select repo scope
2. Conectar: Settings → Service Integrations → GitHub → Enter token → Create or connect repository

Implementação Vercel

1. Obter Token: Vercel Account Settings → Create Token
2. Conectar: Settings → Service Integrations → Vercel → Enter token → Create new project for deployment

Base de Dados Supabase

1. Obter Credenciais: Supabase Dashboard → Your Project → Settings → API
   • Project URL: https://xxxxx.supabase.co
   • Anon Key: Chave pública do cliente
   • Service Role Key: Chave de função de serviço (chave secreta do servidor)

Resolução de Problemas Comuns

Erros de Permissão

# Verificar o utilizador atual
whoami

# Alterar a propriedade do diretório do projeto
sudo chown -R $(whoami):$(whoami) ~/Claudable

Problemas de Dependência

# Limpar todas as dependências e tentar novamente
npm run clean
npm install

Notas para Utilizadores WSL

Certifique-se de executar o Claude Code na sua conta de utilizador, e não na conta root.

Cenários de Uso

1. Prototipagem Rápida

• Empreendedores validam ideias de produtos
• Gestores de produto criam protótipos de demonstração
• Designers criam maquetes interativas

2. Aprendizagem de Desenvolvimento Web

• Iniciantes em programação observam como a IA transforma requisitos em código
• Compreendem a arquitetura e o fluxo de desenvolvimento de aplicações web modernas

3. Automação do Desenvolvimento Frontend

• Desenvolvedores frontend automatizam tarefas de desenvolvimento repetitivas
• Montam rapidamente frameworks de projeto e componentes UI

4. Desenvolvimento No-code/Low-code

• Designers ou profissionais de marketing completam aplicações web simples de forma independente
• Reduzem a dependência de desenvolvedores profissionais

Vantagens do Projeto

Custo-Benefício

• Totalmente Gratuito: Sem taxas de subscrição ou limites de uso
• Sem Taxas de API Adicionais: Usa diretamente as subscrições existentes do Claude ou Cursor

Velocidade de Desenvolvimento

• Desenvolvimento em Minutos: Transforma ideias em aplicações funcionais em apenas alguns minutos
• Pronto para Produção: Gera código limpo e manutenível que segue as melhores práticas da indústria
• Feedback Instantâneo: A funcionalidade de pré-visualização em tempo real encurta o ciclo de feedback do desenvolvimento

Flexibilidade

• Suporte a Múltiplos Agentes de IA: Suporta Claude Code e Cursor CLI
• Sem Bloqueio de Fornecedor: Possui a propriedade total do código
• Personalizável: O código gerado pode ser modificado e estendido

Planos de Desenvolvimento Futuro

De acordo com o roadmap do projeto, as funcionalidades futuras incluem:

• Novos Agentes CLI: Suporte para mais ferramentas de codificação de IA
• Checkpoints de Conversa: Salvar e restaurar o estado da conversa/base de código
• Integração MCP Aprimorada: Integração nativa e profunda do MCP
• Sistema de Sub-agentes: Arquitetura de sistema de agentes aprimorada

Informações de Código Aberto

• GitHub: https://github.com/opactorai/Claudable
• Desenvolvedor: OPACTOR (https://opactor.ai)
• Suporte da Comunidade: Comunidade de código aberto ativa, com atualizações e melhorias contínuas

Resumo

Claudable representa um novo paradigma no desenvolvimento web, transformando descrições em linguagem natural diretamente em aplicações web implementáveis através de agentes de IA. Não só reduz a barreira de entrada para o desenvolvimento web, como também melhora significativamente a eficiência do desenvolvimento, tornando-o uma ferramenta indispensável no kit de ferramentas do desenvolvedor moderno.