babucarr32/CopilotKit

Build in-app AI chatbots 🤖, and AI-powered Textareas ✨, into react web apps.

Explore the docs »

Join our Discord · Website · Report Bug · Request Feature

Questions? Book a call with us »

The Open-Source Copilot Platform

In-app chatbots, and AI-enabled TextArea.

🌟 Copilot Chatbot:
Build powerful in-app AI chatbots that can "see" the current app state + take action inside your app.
The AI chatbot can talk to your app frontend & backend, and to 3rd party services (Salesforce, Dropbox, etc.) via plugins.
AI "second brain" for your users, on tap.

🌟 <CopilotTextarea />:
AI-assisted text generation. Drop-in replacement for any <textarea />.
Autocompletions + AI editing + generate from scratch. Indexed on your users' content.
Starting with React. Use any LLM.

Combines frontend SDKs, backend SDKs, and (optional) cloud infrastructure. Open-source 🪁

🎯 Features Overview

CopilotTextarea: AI-assisted text generation + editing.

• ✅ A a drop-in <textarea /> replacement. Supports all <textarea /> customizations.
• ✅ Context-aware autocompletions ✨ (like in GitHub Copilot)
• ✅ AI editing ✨ - "list the client's top 3 pain points from the last call using @SalesforceData"
• 🟩 Generate from scratch ✨ - automatically populate the initial content based on given context
• ✅ App context & 3rd party context with useMakeCopilotReadable and useMakeCopilotDocumentReadable
• ✅ Fully custsomizable prompt engineering
• 🟩 Arbitrary LLM chains.
• 🟩 Bold + italics.

Copilot Chatbot: (frontend + backend) runtimes for in-app copilots.

• ✅ Index on frontend app state (via useMakeCopilotReadable and useMakeCopilotDocumentReadable)
• 🟩 Index on backend state
• ✅ frontend function calling runtime (in-app actions) (via useMakeCopilotActionable)
• 🟩 backend function calling runtime (auth enabled)
• 🟩 Autorun vs. "sensitive" functions (require user approval before execution).
• ✅ Cursor-style @document-referecing.
• ✅ Bring your own model
• 🟩 3rd party plugins
• 🟩 execute arbitrary LLM chains
• 🟩 OpenAI assistants api
• ✅ Fully customize UI

Demo

2-min showcase + 2-min implementation tutorial:

copilot_full_demo_nxxpbr.3.mp4

Installation

npm i @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea

Getting started

See quickstart in the docs

Examples

<CopilotTextarea />

A drop-in <textarea /> replacement with context-aware Copilot autocompletions.

Features

1. Customizable purpose prompt.
2. Provide arbitrary context to inform autocompletions using useMakeCopilotReadable
3. Works with any backend/LLM, using ChatlikeApiEndpoint
4. Supports all <textarea /> customizations

import "@copilotkit/react-textarea/styles.css"; // add to the app-global css
import { CopilotTextarea } from "@copilotkit/react-textarea";
import { CopilotProvider } from "@copilotkit/react-core";

// call ANYWHERE in your app to provide external context (make sure you wrap the app with a <CopilotProvider >):
// See below for more features (parent/child hierarchy, categories, etc.)
useMakeCopilotReadable(relevantInformation)
useMakeCopilotDocumentReadable(document)

return (
  <CopilotProvider chatApiEndpoint="/api/copilotkit/chat"> {/* Global state & copilot logic. Put this around the entire app */}
    <CopilotTextarea
      className="p-4 w-1/2 aspect-square font-bold text-3xl bg-slate-800 text-white rounded-lg resize-none"
      placeholder="A CopilotTextarea!"
      autosuggestionsConfig={{
        purposePrompt: "A COOL & SMOOTH announcement post about CopilotTextarea. Be brief. Be clear. Be cool.",
        forwardedParams: { // additional arguments to customize autocompletions
          max_tokens: 25,
          stop: ["\n", ".", ","],
        },
      }}
    />
  </CopilotProvider>
);

Integrate copilot

import "@copilotkit/react-ui/styles.css"; // add to the app-global css
import { CopilotProvider } from "@copilotkit/react-core";
import { CopilotSidebarUIProvider } from "@copilotkit/react-ui";

export default function App(): JSX.Element {
  return (
  <CopilotProvider chatApiEndpoint="/api/copilotkit/chat"> {/* Global state & copilot logic. Put this around the entire app */}
      <CopilotSidebarUIProvider> {/* A built-in Copilot UI (or bring your own UI). Put around individual pages, or the entire app. */}

        <YourContent />

      </CopilotSidebarUIProvider>
    </CopilotProvider>
  );
}

Features

1. Batteries included. Add 2 React components, and your Copilot is live.
2. Customize the built-in CopilotSidebarUIProvider UI -- or bring your own UI component.
3. Extremely hackable. Should the need arise, you can define 1st-class extensions just as powerful as useMakeCopilotReadable, useMakeCopilotActionable, etc.

Give the copilot read permissions

Features

1. Propagate useful information & granular app-state to the Copilot
2. Easily maintain the hierarchical structure of information with parentId
3. One call to rule them all: useMakeCopilotReadable works both with the sidekick, and with CopilotTextarea.
   • Use the contextCategories: string[] param to route information to different places.

import { useMakeCopilotReadable } from "@copilotkit/react-core";


function Employee(props: EmployeeProps): JSX.Element {
  const { employeeName, workProfile, metadata } = props;

  // propagate any information copilot
  const employeeContextId = useMakeCopilotReadable(employeeName);

  // Pass a parentID to maintain a hiearchical structure.
  // Especially useful with child React components, list elements, etc.
  useMakeCopilotReadable(workProfile.description(), employeeContextId);
  useMakeCopilotReadable(metadata.description(), employeeContextId);
  
  return (
    // Render as usual...
  );
}

Give the copilot write permissions

import { useMakeCopilotActionable } from "@copilotkit/react-core";

function Department(props: DepartmentProps): JSX.Element {
  // ...

  // Let the copilot take action on behalf of the user.
  useMakeCopilotActionable(
    {
      name: "setEmployeesAsSelected",
      description: "Set the given employees as 'selected'",
      argumentAnnotations: [
        {
          name: "employeeIds",
          type: "array", items: { type: "string" }
          description: "The IDs of employees to set as selected",
          required: true
        }
      ],
      implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds),
    },
    []
  );

  // ...
}

Features

1. Plain typescript actions. Edit a textbox, navigate to a new page, or anythign you can think of.
2. Specify arbitrary input types.

Near-Term Roadmap

📊 Please vote on features via the Issues tab!

Copilot-App Interaction

• ✅ useMakeCopilotReadable: give static information to the copilot, in sync with on-screen state
• ✅ useMakeCopilotActionable: Let the copilot take action on behalf of the user
• 🚧 useMakeCopilotAskable: let the copilot ask for additional information when needed (coming soon)
• 🚧 useEditCopilotMessage: edit the (unsent) typed user message to the copilot (coming soon)
• 🚧 copilot-assisted navigation: go to the best page to achieve some objective.
• 🚧 CopilotCloudKit: integrate arbitrary LLM logic / chains / RAG, using plain code.

UI components

• ✅ <CopilotSidebarUIProvider>: Built in, hackable Copilot UI (optional - you can bring your own UI).
• ✅ <CopilotTextarea />: drop-in <textarea /> replacement with Copilot autocompletions.

Integrations

• ✅ Vercel AI SDK
• ✅ OpenAI APIs
• 🚧 Langchain
• 🚧 Additional LLM providers

Frameworks

• ✅ React
• 🚧 Vue
• 🚧 Svelte
• 🚧 Swift (Mac + iOS)

Contribute

Contributions are welcome! 🎉

Join the Discord

Contact

atai <at> copilotkit.ai