CoPilotKit Project

Introduction

Welcome to the integration guide for CopilotKit in our existing React project of Dev-Deakin! CopilotKit offers an open-source AI copilot platform designed to provide context-aware assistance, enhance user interaction, and streamline development processes. In this guide, we'll explain how to add the Copilot API key to your project and explore how CopilotKit can benefit our existing application, which allows users to post new questions, articles, and search for existing posts through a Copilot chat interface

Getting Started with CopilotKit

To integrate CopilotKit into our React application, follow these steps:

1. Sign Up for CopilotKit: Visit the CopilotKit website and sign up for an account. Upon registration, you'll receive an API key.

2. Add Copilot API Key to Your Project: Open the root directory of our React project and create a new file named .env if it doesn't exist already. Add your Copilot API key to the .env file using the following format:

   REACT_APP_COPILOT_API_KEY=your_api_key_here
   

   Replace your_api_key_here with the API key you received from CopilotKit.

3. Access Copilot Services in Your Application: With the API key added, we can now access Copilot services in our application. We can make HTTP requests to the Copilot server to fetch responses from copilots and integrate them into our app's functionality.

Image 1:

Click on the "chat" to access the chatbox

Chatbox Image:

Image 2:

Image 3:

How CopilotKit Can Help in Our Project

Integrating CopilotKit into our existing React project offers several advantages:

• Context-Aware Assistance: With CopilotKit, we can implement context-aware in-app chatbots that execute actions within the app. These copilots can provide users with assistance based on the current context, such as guiding them through form submissions, suggesting relevant actions, or providing help documentation.

• AI-Enhanced Text Fields: CopilotKit enables us to create AI-enhanced text fields offering context-sensitive autocomplete and insertions. This feature can enhance user experience by predicting user input, suggesting relevant options, and reducing manual effort in data entry tasks.

• Seamless Interaction: CopilotKit facilitates the integration of in-app AI agents that interact seamlessly with both our application and its users. These agents can offer personalized recommendations, answer user queries, and provide real-time assistance, thereby improving user engagement and satisfaction.

• Efficient Search Functionality:CopilotKit enables advanced search functionality within the chat interface, allowing users to search for specific articles or questions submitted by themselves or others. The chatbot can process search queries, retrieve relevant content from the database, and present the results in a user-friendly manner.

By integrating CopilotKit into our existing React application, we can enhance user experience, streamline development processes, and introduce innovative features that elevate the functionality of our project.

Installation

1. Clone this repository to your local machine:

   git clone https://github.com/Chelseasingla1/copilotproject

2. Navigate into the project directory:

   cd copilotbackend

3. Install dependencies using npm:

   npm install

Adding CoPilot in project

Install dependencies:

    npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend

Add Copilot Api to project:

    const copilotKit = new CopilotBackend({});
    const openaiModel = process.env["REACT_APP_COPILOT_API_KEY"];
    return copilotKit.response(req, new OpenAIAdapter({ model: openaiModel }));

Usage

1. After installing the dependencies, you can run the development server using:

   npm run dev

2. Open your browser and navigate to http://localhost:5173/ to view the app.

Obtaining API Key for Chatbox

To use the Open API in the app, you need to obtain an API key from the OpenAPI platform. Follow these steps to get your API key:

1. Sign in to your account or create a new one if you don't have an account yet.
2. Once logged in, navigate to the API section in your account settings.
3. Generate a new API key with the necessary permissions for the functionalities you intend to use in the app (e.g., trading, accessing market data).
4. Copy the generated API key and store it securely. Avoid sharing your API key with unauthorized parties.
5. Then add this OpenAPI key into .env.local file https://platform.openai.com/account/api-keys

React Packages

React Codemirror 2

• Installation: React Codemirror 2 can be installed via npm:

  npm install react-codemirror2

• Usage: To use React Codemirror 2 in your components, import it as follows:

  import { Controlled as CodeMirror } from "react-codemirror2";

  Then, you can use <CodeMirror /> components in your JSX.
• Documentation: Refer to the official documentation for detailed usage instructions and examples.

React Markdown

• Installation: React Markdown can be installed via npm:

  npm install react-markdown

• Usage: After installation, you can import and use React Markdown in your components:

  import ReactMarkdown from "react-markdown";

  Then, you can use the <ReactMarkdown /> component to render Markdown content.
• Documentation: Refer to the official documentation for detailed usage instructions and examples.

remark-gfm

• Installation: remark-gfm can be installed via npm:

  npm install remark-gfm

• Usage: After installation, you can use remark-gfm as a plugin with React Markdown to support GitHub Flavored Markdown:

  import remarkGfm from "remark-gfm";
  import ReactMarkdown from "react-markdown";
  
  // Use remarkGfm as a plugin with ReactMarkdown
  <ReactMarkdown remarkPlugins={[remarkGfm]} />

• Documentation: Refer to the official documentation for detailed usage instructions and examples.

Troubleshooting

• If you encounter any errors related to missing dependencies, make sure you have installed all required packages by running npm install.
• If the development server fails to start or the app doesn't load in the browser, check the terminal/console for any error messages and try to resolve them accordingly.
• Ensure that your system meets the minimum requirements for running the app.

Additional Information

• For more information on how to use Vite, refer to the official documentation.
• For more information on React, refer to the official documentation.