Agents Kit: um kit de ferramentas para criar rapidamente interfaces para que as inteligências de IA interajam entre si

O Agents Kit é um kit de ferramentas de código aberto, hospedado no GitHub, projetado para ajudar os desenvolvedores a criar rapidamente interfaces de front-end para interagir com inteligências de IA. Ele fornece um modelo de interface de bate-papo moderno e personalizável com base em pilhas de tecnologia de front-end modernas, como Next.js, Tailwind CSS e TypeScript. Os usuários podem criar rapidamente interfaces de aplicativos de IA que suportam interações em tempo real e são adequadas para interações multimodais com inteligências, como texto e imagens. O Agents Kit enfatiza a simplicidade e a flexibilidade e é adequado para desenvolvedores e empresas integrarem rapidamente inteligências de IA a aplicativos de front-end. Ele é inspirado nas necessidades de desenvolvimento do mundo real e oferece suporte à integração de inteligências de IA em aplicativos de front-end. Agno Playground e outras plataformas de forma integrada, diminuindo o limite de desenvolvimento.

Lista de funções

• Oferece uma interface de bate-papo moderna que suporta a transmissão de conversas em tempo real.
• Oferece suporte à função de invocação de ferramentas para visualizar o processo de invocação de ferramentas e os resultados das inteligências.
• Exibe as etapas de raciocínio da inteligência para ajudar os usuários a entender o processo de tomada de decisão da IA.
• Oferece suporte ao processamento de conteúdo multimodal, incluindo texto, imagens, vídeo e áudio.
• Interface altamente personalizável com base no Tailwind CSS para facilitar a criação de estilos.
• Integração com pilhas de tecnologias modernas, incluindo Next.js, TypeScript e Framer Motion.
• Oferece suporte à conexão padrão com o Agno Playground para simplificar o processo de desenvolvimento.
• Fornecer código-fonte aberto, permitindo que os desenvolvedores o modifiquem e estendam livremente de acordo com suas necessidades.

Usando a Ajuda

Processo de instalação

Para usar o Agents Kit, você precisa clonar o projeto e instalar as dependências primeiro. Abaixo estão as etapas detalhadas da instalação:

1. Clonagem da base de código
   Abra um terminal e digite o seguinte comando para clonar a base de código do Kit de Agentes:

   git clone https://github.com/agents-ui/agents-kit.git
   cd agents-kit
   

2. Instalação de dependências
   O projeto usa o pnpm como uma ferramenta de gerenciamento de pacotes. Execute o seguinte comando para instalar as dependências:

   pnpm install
   

3. Iniciando o servidor de desenvolvimento
   Após a conclusão da instalação, inicie o servidor de desenvolvimento:

   pnpm dev
   

   O servidor de desenvolvimento é executado por padrão no http://localhost:3000Abra seu navegador e acesse esse endereço para visualizar a interface do Agents Kit. Abra seu navegador e visite esse endereço para visualizar a interface do Agents Kit.

4. Conecte-se com a Agno Playground
   O Agents Kit se conecta por padrão ao http://localhost:7777Este é o endereço padrão do Agno Playground. Se você ainda não tiver configurado o Agno Playground, consulte a documentação oficial para concluir a implantação local. O endereço de conexão pode ser alterado por meio da opção Editar na interface, passando o mouse sobre a URL do ponto de extremidade e clicando no botão Editar.
5. Configuração personalizada
   Se precisar ajustar o estilo ou a funcionalidade da interface, você poderá modificar o src/app.tsx O Tailwind CSS oferece configurações de estilo flexíveis que permitem aos desenvolvedores editar classes CSS diretamente para ajustar a aparência da interface.

Funções principais

1. interface de bate-papo ao vivo

No centro do Agents Kit está uma interface de bate-papo moderna que oferece suporte à interação em tempo real com inteligências de IA. O usuário abre o http://localhost:3000Quando você digita um texto, o smartphone responde em tempo real, reduzindo o tempo de espera. Depois de digitar o texto, o corpo inteligente responde em tempo real e a mensagem é exibida em um modo de fluxo contínuo para reduzir o tempo de espera.

• procedimentoDigite uma pergunta ou instrução na caixa de entrada e clique no botão Enviar ou pressione a tecla Enter. A resposta do corpo inteligente será exibida gradualmente na interface, semelhante ao efeito de digitação em fluxo contínuo.
• advertênciaVerifique se você está conectado corretamente ao Agno Playground ou a outro backend de smartbody compatível, caso contrário, a interface poderá não responder adequadamente.

2. visualização de chamadas de ferramentas

O Agents Kit oferece suporte à funcionalidade de invocação de ferramentas para inteligências. Por exemplo, um agente pode chamar uma API externa ou executar uma tarefa específica, e o processo e o resultado da chamada são exibidos como um cartão na interface.

• procedimentoQuando o Intelligent Body executa uma chamada de ferramenta, a interface exibe automaticamente o nome da ferramenta, os parâmetros de entrada e os resultados retornados. Os usuários podem clicar no cartão para visualizar o registro detalhado da chamada.
• Funções em destaqueOs resultados da chamada da ferramenta são apresentados graficamente, o que facilita para o usuário entender rapidamente a lógica de operação do corpo inteligente.

3. demonstração das etapas de raciocínio

Para inteligências que suportam um processo de raciocínio, o Agents Kit exibe as etapas de raciocínio da IA na interface. Isso é útil para cenários de aplicativos que exigem transparência, como educação ou depuração.

• procedimentoA interface exibe automaticamente as etapas de raciocínio na parte inferior da mensagem quando o corpo inteligente retorna uma resposta (se suportada pelo corpo inteligente). O usuário pode expandir ou recolher o conteúdo do raciocínio.
• Dicas e truquesO desenvolvedor pode controlar a granularidade da exibição das etapas de inferência modificando a configuração de back-end.

4. suporte a conteúdo multimodal

O Agents Kit oferece suporte ao processamento de vários tipos de conteúdo, incluindo imagens, vídeo e áudio. Os usuários podem fazer upload de arquivos ou inserir comandos multimodais diretamente na interface.

• procedimento::
  1. Na tela de bate-papo, clique no botão Upload (geralmente o ícone de anexo).
  2. Selecione um arquivo de imagem, vídeo ou áudio para fazer upload.
  3. Com comandos de texto, descreva a necessidade do arquivo (por exemplo, "analisar esta imagem").
  4. A inteligência retornará os resultados de processamento apropriados, como descrições de imagens ou transcrições de áudio.
• advertênciaAntes de fazer upload de um arquivo, certifique-se de que o smartbody de back-end seja compatível com o processamento multimodal; caso contrário, ele poderá retornar um erro.

5. personalização da interface

O Agents Kit usa o Tailwind CSS para permitir que os desenvolvedores estilizem facilmente suas interfaces.

• procedimento::
  1. show (um ingresso) src/styles.css modifique a classe CSS do Tailwind.
  2. Por exemplo, para alterar a cor do botão de azul para verde, basta alterar o parâmetro bg-blue-500 Substituir por bg-green-500.
  3. Após salvar, o servidor de desenvolvimento é atualizado automaticamente para mostrar o novo estilo.
• Dicas e truquesConsulte a documentação oficial do Tailwind CSS para encontrar rapidamente os nomes das classes disponíveis e reduzir os custos de aprendizado.

6. código de contribuição

O Agents Kit é um projeto de código aberto e os desenvolvedores podem contribuir com o código.

• procedimento::
  1. ler CONTRIBUTING.md para obter um guia de contribuição.
  2. Bifurque o repositório, crie uma nova ramificação e confirme suas alterações.
  3. Envie a Pull Request e aguarde a revisão.
• advertênciaGarantir que o código esteja em conformidade com as especificações do projeto e evitar a introdução de dependências desnecessárias.

Perguntas frequentes

• O servidor de desenvolvimento não pode ser iniciadoVerifique se o Node.js e o pnpm estão instalados corretamente. Executar node -v responder cantando pnpm -v Confirme a versão.
• Não é possível conectar-se ao Agno Playground.Verifique se o Agno Playground está sendo executado em http://localhost:7777ou verifique a conexão de rede.
• Estilo de interface não atualizadoLimpar o cache do navegador ou reiniciar o servidor de desenvolvimento.

cenário do aplicativo

1. Desenvolvimento rápido de aplicativos de bate-papo com IA
   Os desenvolvedores podem usar o Agents Kit para criar rapidamente um aplicativo de IA que ofereça suporte a bate-papo em tempo real para atendimento ao cliente, educação ou cenários de assistente pessoal. Sua interface moderna e o suporte multimodal atendem a uma ampla gama de necessidades de interação.
2. Ferramenta de depuração de corpo inteligente
   A exibição passo a passo da inferência e a visualização da invocação de ferramentas do Agents Kit são ideais para desenvolvedores que depuram inteligências de IA. Os usuários podem visualizar o processo de tomada de decisão das inteligências por meio da interface e otimizar o desempenho do modelo.
3. Educação e treinamento
   Em cenários educacionais, o Agents Kit pode ser usado para criar ferramentas de aprendizagem interativas. Os alunos podem interagir com a IA por meio de uma interface de bate-papo para visualizar as etapas de raciocínio e aprender soluções para problemas complexos.
4. Integração de front-end empresarial
   As organizações podem integrar o Agents Kit aos aplicativos existentes para adicionar rapidamente a funcionalidade de corpo inteligente de IA. Por exemplo, adicione assistentes inteligentes a um sistema de gerenciamento interno para aumentar a eficiência dos funcionários.

QA

1. Quais pilhas de tecnologia são compatíveis com o Agents Kit?
   Criado com base em Next.js, TypeScript e Tailwind CSS, o Agents Kit também integra shadcn/ui e Framer Motion para dar suporte às necessidades modernas de desenvolvimento de front-end.
2. É necessário suporte de back-end?
   Sim, o Agents Kit é um kit de front-end que precisa ser conectado a um back-end de inteligência compatível, como o Agno Playground, para funcionar corretamente.
3. Como você lida com o conteúdo multimodal?
   Os usuários podem fazer upload de imagens, vídeos ou arquivos de áudio por meio da interface, juntamente com comandos de texto, que são processados pelas inteligências de back-end e retornam resultados.
4. Ele é adequado para iniciantes?
   Sim, o Agents Kit fornece documentação detalhada e um processo de instalação simples que permite que os iniciantes comecem a trabalhar apenas com conhecimentos básicos de front-end.
5. Como faço para contribuir com o código?
   com base em CONTRIBUTING.md Você pode participar do desenvolvimento do projeto enviando um Pull Request, bifurcando a base de código e enviando um Pull Request.