O Claudable é um construtor de sites de código aberto. Ele conecta inteligências de codificação de IA, como o Claude Code ou o Cursor Agent, para permitir que os usuários criem, desenvolvam e implantem aplicativos da Web emitindo comandos simples. Os usuários simplesmente descrevem o que desejam em linguagem natural, como "Quero um aplicativo de gerenciamento de tarefas com um modo escuro", e o Claudable usa as inteligências de IA para gerar o código apropriado e fornecer uma visualização ao vivo. A ferramenta é baseada na estrutura Next.js e integra o Vercel para implantação com um clique, o Supabase para gerenciamento de banco de dados e o GitHub para controle de versão. O projeto foi concebido com o objetivo de simplificar o processo de desenvolvimento, permitindo que os usuários criem e publiquem aplicativos profissionais da Web gratuitamente, sem precisar lidar com configurações complexas de ambiente ou problemas de chave de API.
Lista de funções
- Desenvolvimento de motorista com carroceria inteligente AISuporte para conectar o Claude Code e o Cursor CLI como inteligências de codificação de IA para gerar código Next.js disponível para ambientes de produção com base nas instruções de linguagem natural dos usuários.
- Visualização instantâneaComo a IA cria aplicativos, os usuários podem ver imediatamente os efeitos em tempo real das alterações de código com o recurso Hot Reload.
- Implementação em um cliqueO Vercel é integrado ao Vercel, permitindo que os usuários publiquem seus aplicativos desenvolvidos on-line com um clique, sem a necessidade de configurações complexas de implantação.
- Integração de banco de dadosSuporte para conexão com o Supabase para configurar rapidamente bancos de dados PostgreSQL de nível de produção e recursos de autenticação de usuários para aplicativos.
- Controle de versão automatizadoIntegração com o GitHub para configurar automaticamente o controle de versão e a implantação contínua de projetos.
- Inicialização com configuração zeroSimplifica o processo de configuração inicial, eliminando a necessidade de configurar manualmente ambientes sandbox, chaves de API ou bancos de dados, permitindo que os usuários se concentrem no desenvolvimento de aplicativos.
- Correções automáticas de bugsO sistema detecta automaticamente erros no aplicativo e tenta corrigi-los usando inteligências de IA.
- Geração de IU modernaUse bibliotecas de front-end populares, como Tailwind CSS e shadcn/ui, para gerar belas interfaces de usuário.
Usando a Ajuda
O Claudable combina o poder das inteligências de programação de IA com uma experiência intuitiva de criação de aplicativos que facilita o início tanto para desenvolvedores quanto para usuários casuais. Abaixo, você encontrará detalhes sobre como instalar e usar o Claudable.
preparação preliminar
Antes de iniciar a instalação do Claudable, certifique-se de ter os seguintes softwares e ferramentas instalados em seu computador:
- Node.jsVersão: precisa ter 18 anos ou mais.
- PythonVersão: A versão precisa ser 3.10 ou superior.
- GitUsado para clonar o repositório de código do projeto.
- Inteligências codificadas por IAÉ necessário instalar e fazer login no Claude Code ou na CLI do Cursor, o que é altamente recomendado.
Claude Code
para obter a melhor experiência.
Instalação de inteligências codificadas por IA
Você pode optar por instalar um deles de acordo com sua preferência:
1. código Claude
Instale globalmente via npm, o gerenciador de pacotes do Node.js:
npm install -g @anthropic-ai/claude-code
Quando a instalação estiver concluída, faça login em sua conta do Claude no terminal:
claude
Em seguida, siga as instruções e digite o comando /login
Conclua o login.
2. CLI do cursor
Ele é um pouco mais lento que o Claude Code, mas é mais avançado quando se trata de tarefas de codificação complexas.
Use o comando curl para instalar:
curl https://cursor.com/install -fsS | bash
Após a instalação, o mesmo login é necessário: "`shell
login do cursor-agent
### **快速启动**
按照以下步骤,你可以在几分钟内在你本地电脑上运行Claudable。
**第一步:克隆代码仓库**
打开终端,使用`git`命令将Claudable的源代码克隆到本地:
```shell
git clone https://github.com/opactorai/Claudable.git
Etapa 2: Insira o catálogo do projeto
cd Claudable
Etapa 3: Instalar dependências
Execute-o no diretório raiz do projetonpm install
comando. Esse comando automatizará todas as configurações necessárias, inclusive:
- Instale os pacotes de dependência de front-end e back-end do Node.js.
- No diretório da API de backend
apps/api/
Crie um ambiente virtual Python em.venv
. - fazer uso de
uv
talvezpip
Instale todas as dependências do Python. - Detecta automaticamente as portas disponíveis e cria
.env
Perfis ambientais. - Na primeira corrida, no
data/
Criação automática de arquivos de banco de dados SQLite no diretóriocc.db
.
npm install
Etapa 4: iniciar o servidor de desenvolvimento
Após a conclusão da instalação, executedev
para iniciar os servidores front-end e back-end:
npm run dev
Após uma inicialização bem-sucedida, você verá a seguinte mensagem no terminal, indicando que o aplicativo está em execução:
- aplicativo front-end:
http://localhost:3000
- Servidor de API de back-end:
http://localhost:8080
- Documentação da API:
http://localhost:8080/docs
Observação: se as portas padrão (3000 e 8080) já estiverem ocupadas, o sistema detectará e atribuirá automaticamente a próxima porta disponível.
Como usar
Com o Claudable instalado e funcionando, você está pronto para começar a criar seu aplicativo.
- Conectando a inteligência de IAVerifique se você instalou e fez login no Claude Code ou no Cursor CLI conforme as etapas anteriores.
- Descreva seu projetoNa interface de usuário do Claudable, use a linguagem natural para descrever claramente o aplicativo que deseja criar. Por exemplo, "Crie uma plataforma de blog em que os usuários possam publicar e comentar artigos".
- Veja a IA gerar códigoApós enviar a descrição, a inteligência artificial começará a analisar seus requisitos e gerará automaticamente a estrutura e o código do projeto.
- Visualização e iteração em tempo real: Enquanto a IA estiver funcionando, você poderá abrir o navegador por meio do botão
http://localhost:3000
Veja o progresso da criação do aplicativo em tempo real. Se não estiver satisfeito com os resultados, você sempre poderá propor novas instruções para modificar e iterar. - A implantação entra em operaçãoQuando estiver satisfeito com o aplicativo, você poderá implantá-lo on-line com um clique por meio do recurso Vercel integrado.
integração de serviços
Para a funcionalidade de implantação e banco de dados, você precisa se conectar ao GitHub, ao Vercel e ao Supabase.
- Integração com o GitHub::
- Vá para a página Configurações pessoais do GitHub para gerar um novo Acesso pessoal Token (clássico).
- carrapato
repo
Escopo da autoridade. - Na seção
设置 -> 服务集成 -> GitHub
Insira o token que você gerou e crie ou conecte um repositório de código.
- Integração da Vercel::
- Acesse a página de configurações da conta da Vercel para criar um token.
- Na seção
设置 -> 服务集成 -> Vercel
Insira o token e crie um novo projeto para implantação.
- Integração com o Supabase::
- Acesse o painel do Supabase e localize as credenciais da API nas configurações do projeto.
- Você precisará fornecer
项目URL
eAnon Key
(a chave pública do cliente) eService Role Key
(para chaves privadas do lado do servidor). - Preencha essas informações nas configurações de integração do Supabase do Claudable.
cenário do aplicativo
- Prototipagem rápida
Para empreendedores ou gerentes de produto que desejam validar rapidamente uma ideia de produto, o Claudable pode ser usado para gerar um protótipo de aplicativo interativo em minutos com uma descrição de texto simples para demonstração e coleta de feedback inicial do usuário. - Desenvolvimento automatizado de front-end
Os desenvolvedores de front-end podem usar o Claudable para automatizar tarefas de desenvolvimento repetitivas, como a criação de estruturas de projeto, a geração de componentes de interface do usuário ou a criação de páginas básicas. Isso permite que mais esforços sejam dedicados à lógica comercial complexa e à otimização da experiência do usuário. - Aprenda desenvolvimento web
Para iniciantes em programação, o Claudable é uma ótima ferramenta de aprendizado. Ao observar como a IA traduz os requisitos da linguagem natural em código real, os iniciantes podem obter uma compreensão mais intuitiva da arquitetura e do processo de desenvolvimento dos aplicativos modernos da Web. - Desenvolvimento sem código/baixo código
Os usuários que não têm um profundo conhecimento de programação, como designers ou profissionais de marketing, também podem usar o Claudable para concluir de forma independente a construção de alguns sites ou aplicativos simples, como sites de portfólio pessoal, páginas de destino de eventos e assim por diante.
QA
- O Claudable é gratuito?
Sim, o projeto Claudable em si é de código aberto e gratuito. No entanto, ele depende de serviços de terceiros que podem incorrer em custos, como as inteligências de IA que você usa (Claude Code ou Cursor), os serviços de implantação da Vercel ou os serviços de banco de dados do Supabase, dependendo do seu uso e do pacote que você escolher. - É necessário ter experiência em programação para usar o Claudable?
A filosofia de design central do Claudable é permitir que os usuários criem aplicativos por meio de linguagem natural. No entanto, alguns conhecimentos básicos de desenvolvimento da Web (por exemplo, HTML, CSS, JavaScript) o ajudarão a descrever com mais precisão os requisitos e a ajustar o código gerado pela IA. - Qual é a qualidade do código gerado por IA?
A Claudable utiliza inteligência avançada de codificação de IA para gerar código que normalmente é de alta qualidade e está pronto para ser usado "fora da caixa" em ambientes de produção. O código que ele gera é baseado em estruturas padrão do setor, como Next.js, e segue as práticas recomendadas. No entanto, para aplicativos complexos, a revisão e a otimização do código por desenvolvedores profissionais ainda são recomendadas. - O que devo fazer se receber um erro de permissão?
Em um ambiente WSL no macOS, Linux ou Windows, podem ser encontrados problemas de permissão de arquivos. A solução é não usar o comandosudo
ou privilégios de usuário root para executar o Claude Code. É necessário garantir que a propriedade da pasta do projeto pertença ao usuário atual. Você pode consultar o projetoREADME.md
A seção "Solução de problemas" do documento contém soluções detalhadas para diferentes sistemas operacionais.