Este guia explica como exportar crews do CrewAI Enterprise 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