Developing AI CoAgents and Applications with Copilot Technology

Step 1: Install CopilotKit

The first prerequisite is installing CopilotKit, leveraging Node.js and npm. Ensure you have a designated folder for your React applications, although it’s optional at this point. Additionally, you’ll need an OpenAI API key, as CopilotKit depends on an open-source LLM model. Here’s how:

• Open Windows Terminal and change directory to your React app folder:

cd C:\React\myapplication

• Run this command to install core tools:

npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime

• Install the OpenAI support package:

npm install openai

• Lastly, add your API key to the .env file in the root directory:

OPENAI_API_KEY=your_api_key_here

Pro Tip: Make sure you double-check the API key for accuracy to avoid connectivity issues!

Step 2: Set Up Remote Backend Endpoint

To link your Copilot application with Python-based services (or compatible Node.js alternatives), you will need to establish a Remote Backend endpoint:

pip install copilotkit fastapi uvicorn --extra-index-url https://copilotkit.gateway.scarf.sh/simple/

Now, let’s set up the FastAPI server:

mkdir my_copilotkit_remote_endpoint cd my_copilotkit_remote_endpoint echo.> server.py

If you encounter issues with the echo command, you can manually create the server.py file using Visual Studio Code.

Then, open server.py and insert the following code:

from fastapi import FastAPIapp = FastAPI()@app.get("/")def read_root(): return {"Hello": "World"}

Next, return to Windows Terminal and run

pip install fastapi uvicorn

When finished, visit docs.copilot.ai for further information.

Step 3: Integrate LangGraph Agent

The final step involves adding the LangGraph agent to your server.py file. Begin by locating the CopilotKitSDK instance within your Python Remote Endpoint, typically in the server.py script. Modify it to accommodate LangGraph agents with the following code:

agents=[LangGraphAgent(name="basic_agent", description="An agent that provides weather information", graph=the_langraph_graph, # Uncomment this line if using Google Gemini# "convert_messages": copilotkit_messages_to_langchain(use_function_call=True))],

This modification should be placed under the CopilotKitSDK’s definition. For additional guidance, refer to docs.copilotkit.ai/coagents.

What are the prerequisites for using CoAgent?

Can I use CoAgent with frameworks other than React?