Claude Code UI: ferramenta de código aberto para gerenciar projetos de código em dispositivos móveis e na Web

O Claude Code UI é uma ferramenta gratuita e de código aberto baseada na CLI do Claude Code fornecida pela Anthropic. Ela permite que os desenvolvedores gerenciem projetos de código pela Web ou por dispositivos móveis, fornecendo uma interface intuitiva para manipular arquivos, executar comandos e rastrear sessões. Os usuários podem acessar projetos, editar códigos e interagir com o Claude Code a qualquer momento e em qualquer lugar, simplificando o processo de desenvolvimento. A ferramenta oferece suporte à sincronização entre dispositivos e se adapta a vários tamanhos de tela, o que a torna adequada para desenvolvedores individuais ou colaboração em equipe. Seu principal ponto forte é a integração do Terminal, do Navegador de arquivos e do Git, tornando a programação mais eficiente. Todos os recursos são desativados por padrão e precisam ser ativados manualmente por segurança.

Lista de funções

• Interface de bate-papo integrada para interação em tempo real com o Claude Code.
• Integre o terminal e execute diretamente os comandos CLI do Claude Code.
• Navegação na árvore de arquivos com suporte para expansão/colapso de diretórios para visualizar a estrutura do projeto.
• Edição de arquivos em tempo real com realce de sintaxe incorporado e suporte a várias linguagens de programação.
• Integração do Git, visualização, preparação, confirmação de alterações, troca de ramificações.
• Gerenciamento de sessões para salvar, restaurar e organizar sessões de vários projetos.
• Sincronize entre dispositivos e acesse projetos em diferentes dispositivos a qualquer momento.
• Design responsivo para telas de desktop, tablet e celular.

Usando a Ajuda

Processo de instalação

Para usar o Claude Code UI, primeiro você precisa instalar e configurar o ambiente. Veja a seguir as etapas detalhadas:

1. projeto de clonagem
   Abra um terminal e execute o seguinte comando para clonar o projeto localmente:

   git clone https://github.com/siteboon/claudecodeui.git
   

   Em seguida, vá para o diretório do projeto:

   cd claudecodeui
   

2. Instalação de dependências
   Use o npm para instalar as dependências necessárias:

   npm install
   

   A versão LTS mais recente do Node.js é recomendada para garantir o desempenho ideal.

3. Ambiente de configuração
   Copie o arquivo de ambiente de exemplo e edite-o:

   cp .env.example .env
   

   Abrir com um editor de texto .env defina o número da porta conforme necessário (por exemplo 3001) e outras configurações. Por padrão, a UI do Claude Code é configurada na seção http://localhost:3001 Em execução.

4. iniciar um aplicativo
   Inicie o projeto no modo de desenvolvimento:

   npm run dev
   

   Após o lançamento, abra seu navegador e acesse http://localhost:3001(ou .env (a porta especificada no)

5. Ferramentas de ativação
   Por motivos de segurança, todas as ferramentas do Claude Code são desativadas por padrão. Os usuários precisam ativá-las manualmente:
   • Clique no ícone de engrenagem na barra lateral para acessar a interface "Tool Settings" (Configurações da ferramenta).
   • Selecione as ferramentas que deseja ativar (por exemplo, manipulação de arquivos, recursos do Git, etc.).
   • Salve as configurações e a configuração será armazenada localmente.

Funções principais

1. interface de bate-papo

A interface de usuário do Claude Code oferece uma interface de bate-papo integrada para interagir com o Claude Code. Os usuários podem inserir comandos em linguagem natural, como "gerar um script Python" ou "interpretar este código". Passo a passo:

• Clique na janela de bate-papo na tela principal.
• Digite um comando ou uma pergunta e o Claude Code retornará o resultado em tempo real via WebSocket.
• Os registros de bate-papo são salvos automaticamente, com suporte para visualização de mensagens históricas, incluindo registros de data e hora e metadados.
• Suporta saída em vários formatos, como texto, blocos de código ou referências a arquivos.

2. terminais integrados

O recurso Terminal permite que o usuário execute comandos CLI do Claude Code diretamente, sem alternar para um terminal externo. Modo de operação:

• Abra o painel Terminal na parte inferior da interface.
• Digite o comando da CLI, como claude --help Exibir ajuda.
• O terminal suporta feedback em tempo real e é adequado para realizar tarefas de geração de código, depuração ou gerenciamento de projetos.

3. árvore de documentação e edição em tempo real

O recurso de árvore de arquivos ajuda os usuários a navegar e editar arquivos de projeto:

• Visualize a árvore de arquivos na barra de navegação à esquerda e clique em um diretório para expandi-lo/colapsá-lo.
• Clicar em um arquivo abre o editor. O CodeMirror oferece realce de sintaxe e suporta Python, JavaScript e muitas outras linguagens.
• Salve diretamente após a edição e as alterações serão sincronizadas com o projeto local em tempo real.
• Suporte para criação, exclusão ou renomeação de arquivos e diretórios.

4. integração com o Git

Os recursos do Git simplificam as operações de controle de versão:

• Visualize o status das alterações de arquivos no painel Git.
• Selecione um arquivo para preparação (git add) ou enviado (git commit).
• Suporte à troca de ramificação, clique na lista de ramificações para selecionar a ramificação de destino.
• Todas as operações são feitas por meio da interface, sem necessidade de linha de comando.

5. gerenciamento de sessões

O recurso de gerenciamento de sessões é adequado para o desenvolvimento de vários projetos:

• Cada sessão de projeto é salva automaticamente com registros de bate-papo e histórico de operações de arquivos.
• Visualize todas as sessões no painel Sessions (Sessões), agrupadas por projeto e registro de data e hora.
• Suporte para renomear, excluir ou exportar registros de sessão.
• O recurso de sincronização entre dispositivos permite que o trabalho continue em um telefone celular ou em outro computador.

6. uso entre dispositivos

O design responsivo do Claude Code UI é compatível com vários dispositivos:

• Quando acessada em telefones celulares, a interface se ajusta automaticamente a um layout de coluna única para facilitar a operação por toque.
• O lado do desktop oferece um layout mais flexível para telas maiores.
• As sessões e os dados do projeto são sincronizados por meio da nuvem, e é necessário garantir uma conexão com a Internet.

advertência

• Na primeira utilização, verifique .env no arquivo para garantir que a porta não esteja ocupada.
• Ao ativar as ferramentas, selecione apenas os recursos necessários para reduzir os riscos de segurança.
• Atualize regularmente o código do projeto para obter os recursos mais recentes:

  git pull origin main
  

cenário do aplicativo

1. Desenvolvimento remoto
   Quando os desenvolvedores estão longe de seus computadores, eles podem acessar a interface do usuário do Claude Code em seus telefones celulares para editar códigos, executar comandos ou confirmar alterações no Git para manter o fluxo de trabalho.
2. Trabalho em equipe
   Os membros da equipe podem gerenciar vários projetos com sessões compartilhadas, visualizar alterações de código e registros de bate-papo em tempo real para equipes distribuídas.
3. Aprendizado e depuração
   Os alunos ou iniciantes podem fazer perguntas ao Claude Code por meio da interface de bate-papo, entender rapidamente códigos complexos e praticar a programação com os recursos de edição de arquivos.
4. Prototipagem rápida
   Os desenvolvedores podem criar rapidamente protótipos de código, testar ideias e fazer o commit em repositórios Git usando o terminal e os recursos de edição de arquivos.

QA

1. O Claude Code UI requer uma conexão com a Internet?
   Sim, a interface do usuário do Claude Code requer uma conexão com a Internet para acessar os modelos de IA do Claude Code. No entanto, alguns recursos (por exemplo, edição de arquivos) suportam o armazenamento em cache local e estão disponíveis off-line.
2. Quais linguagens de programação são compatíveis?
   O editor CodeMirror integrado suporta realce de sintaxe e edição em Python, JavaScript, Java, C++ e muitas outras linguagens.
3. Como faço para proteger minhas ferramentas?
   Todas as ferramentas são desativadas por padrão e os usuários precisam ativá-las manualmente. Recomenda-se ativar apenas os recursos necessários e verificá-los regularmente .env Configuração.
4. Você pode sincronizar entre dispositivos?
   Sim, as sessões e os dados do projeto são sincronizados por meio da nuvem, e o trabalho pode continuar após o login em qualquer dispositivo.