React Component Export

This guide explains how to export CrewAI AMP crews as React components and integrate them into your own applications.

Exporting a React Component

Export the Component

Click on the ellipsis (three dots on the right of your deployed crew) and select the export option and save the file locally. We will be using CrewLead.jsx for our example.

Setting Up Your React Environment

To run this React component locally, you’ll need to set up a React development environment and integrate this component into a React project.

Install Node.js

Download and install Node.js from the official website: https://nodejs.org/
Choose the LTS (Long Term Support) version for stability.

Create a new React project

Open Command Prompt or PowerShell
Navigate to the directory where you want to create your project
Run the following command to create a new React project:
npx create-react-app my-crew-app
Change into the project directory:
cd my-crew-app

Install necessary dependencies

npm install react-dom

Create the CrewLead component

Move the downloaded file CrewLead.jsx into the src folder of your project,

Modify your App.js to use the CrewLead component

Open src/App.js
Replace its contents with something like this:

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;

Replace YOUR_API_BASE_URL and YOUR_BEARER_TOKEN with the actual values for your API.

Start the development server

In your project directory, run:
npm start
This will start the development server, and your default web browser should open automatically to http://localhost:3000, where you’ll see your React app running.