Creating AI CoAgents and Applications Utilizing Copilot Technology
CoAgent provides an essential toolkit for integrating LanGraph agents into React applications, facilitating the development of Agent-Native applications. In this article, we’ll explore this powerful tool and guide you on how to create AI CoAgents or applications enhanced by Copilot.
What is CoAgent?
As previously mentioned, CoAgent serves as a toolkit that enables the integration of AI agents into applications, leading to the creation of Agent-Native apps. Let’s delve into its features.
- CoAgent includes a feature known as Shared State, which allows your application to retrieve insights from the agent with just a single line of code. This synchronization enables real-time interaction between the application and the agent.
- The toolkit also offers Real-Time Frontend agents capable of executing both frontend and backend tasks based on user context and application status. This generative UI allows tool calls to be automatically distributed according to need.
- Additionally, there is an option for Stream Intermediate Agent State, which visualizes the agent’s thought processes in real-time, ensuring transparency and enhancing user engagement—an essential aspect of agent performance aligned with user expectations.
- CoAgent’s Agentic Generative UI formulates dynamic, AI-driven interfaces that adjust to user requirements and agent responses, fostering transparency regarding the agent’s state and bolstering user trust.
If these features resonate with you, it may be worthwhile to consider implementing CoAgents in your business setup. Let’s review how to go about it.
Creating AI CoAgents or Applications Powered by Copilot
Follow these steps to create AI CoAgents or applications powered by Copilot:
- Install CopilotKit
- Set up Remote Backend Endpoint
- Integrate LangGraph agent
Now, let’s discuss each step in further detail.
1] Install CopilotKit
Before diving into CoAgents, the first task is to install CopilotKit on your system. It’s assumed you have Node.js and npm already set up, along with a folder for your React applications; though, the last part is optional for this initial step. This tutorial will utilize OpenAI’s API key as CopilotKit relies on an open-source LLM model. Let’s proceed.
- Launch Windows Terminal and navigate to the directory where your React app is located using the cd (change directory) command.
cd C:\React\myapplication
- Next, execute the following command.
npm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/runtime
- After that, run this command to install OpenAI support.
npm install openai
- Navigate to your project’s .env file located in the root directory, and include the following line.
OPENAI_API_KEY=your_api_key_here
Once you’ve made these edits, it’s advisable to visit docs.copilot.ai/quickstart to learn how to configure the endpoint and set up the CopilotKit provider in your application.
2] Set Up Remote Backend Endpoint
To connect your Copilot application with Python-based services (or any compatible Node.js alternatives), we must establish a connection with a Remote Backend endpoint. To begin, let’s install the necessary Copilot dependencies using Windows Terminal.
pip install copilotkit fastapi uvicorn --extra-index-url https://copilotkit.gateway.scarf.sh/simple/
Next, we will set up a FastAPI server. To achieve this, run the commands below.
mkdir my_copilotkit_remote_endpoint cd my_copilotkit_remote_endpoint echo. > server.py
If the echo command fails, you can open the folder in Visual Studio Code and manually create the server.py file.
Open the server.py file in VSCode and input the following code:
from fastapi import FastAPI
app = FastAPI()
@app.get("/")
def read_root():
return {"Hello": "World"}
Next, return to Windows Terminal and run the following to install FastAPI and Uvicorn.
pip install fastapi uvicorn
When you’re finished, refer to docs.copilot.ai for additional details.
3] Integrate LangGraph Agent
The final step is to include the LangGraph agent in your server.py file. Begin by locating the CopilotKitSDK instance within your Python Remote Endpoint, typically found in server.py. Next, modify the CopilotKitSDK instance to accommodate LangGraph agents by adding the following lines of code.
agents=[
LangGraphAgent(
name="basic_agent",
description="An agent that provides weather information",
graph=the_langraph_graph,
# copilotkit_config={ # Uncomment this line if using Google Gemini (don't forget to import `copilotkit_messages_to_langchain`)
# "convert_messages": copilotkit_messages_to_langchain(use_function_call=True)
# }
)
],
This code should be included under the CopilotKitSDK definition.
For further information, please consult the guide available at docs.copilotkit.ai/coagents.
How to Create Your Own Copilot?
To establish a new copilot, visit the Copilot Studio homepage (at /copilotstudio.microsoft.com) and select Create from the left navigation menu, then proceed to the Copilots page. Alternatively, you can click + New copilot on the Copilots page. Use the chat to describe your copilot, following the guidance provided in the questions, or choose Skip to manually fill out the form. Finally, click “Create” to finalize the process.
Can Copilot Generate Code?
Absolutely, Copilot is capable of generating code. However, it’s not infallible; users may encounter glitches and bugs. Consequently, it’s important to not directly integrate any code supplied by an AI chatbot without comprehensive manual verification. You can utilize Microsoft’s Copilot in Edge, the integrated application, or use GitHub Copilot in Visual Studio via an extension.
Leave a Reply