Exportação de Componentes React

Este guia explica como exportar crews do CrewAI AMP como componentes React e integrá-los às suas próprias aplicações.

Exportando um Componente React

1. Exporte o Componente

   Clique no menu de opções (três pontos à direita do seu crew implantado), selecione a opção de exportação e salve o arquivo localmente. Usaremos o arquivo CrewLead.jsx como exemplo.

   

Configurando seu Ambiente React

Para executar este componente React localmente, você precisará configurar um ambiente de desenvolvimento React e integrar este componente em um projeto React.

1. Instale o Node.js
   • Baixe e instale o Node.js no site oficial: https://nodejs.org/
   • Escolha a versão LTS (Long Term Support) para maior estabilidade.
2. Crie um novo projeto React

   • Abra o Prompt de Comando ou PowerShell

   • Navegue até o diretório onde deseja criar seu projeto

   • Execute o seguinte comando para criar um novo projeto React:

     npx create-react-app my-crew-app

   • Entre no diretório do projeto:

     cd my-crew-app

3. Instale as dependências necessárias

   npm install react-dom

4. Crie o componente CrewLead
   • Mova o arquivo baixado CrewLead.jsx para a pasta src do seu projeto.
5. Modifique seu App.js para usar o componente CrewLead
   • Abra o arquivo src/App.js
   • Substitua o conteúdo por algo semelhante a isso:

   import React from 'react';
   import CrewLead from './CrewLead';
   
   function App() {
       return (
           <div className="App">
               <CrewLead baseUrl="YOUR_API_BASE_URL" bearerToken="YOUR_BEARER_TOKEN" />
           </div>
       );
   }
   
   export default App;

   • Substitua YOUR_API_BASE_URL e YOUR_BEARER_TOKEN pelos valores reais da sua API.
6. Inicie o servidor de desenvolvimento

   • No diretório do seu projeto, execute:

     npm start

   • Isso iniciará o servidor de desenvolvimento, e seu navegador padrão será aberto automaticamente em http://localhost:3000, onde você verá sua aplicação React rodando.

Personalização

Você pode então personalizar o CrewLead.jsx para adicionar cor, título etc.

Próximos Passos

• Personalize o estilo do componente para combinar com o design da sua aplicação
• Adicione props adicionais para configuração
• Integre com o gerenciamento de estado da sua aplicação
• Adicione tratamento de erros e estados de carregamento