🌟 Copilot Textarea: AI-assisted text generation + editing + autocompletions.

🌟 Copilot Chatbot: in-app-chatbot with support for injecting app state (frontend + backend), funneling executions to frontend functions (in-app actions) and backend functions (auth-enabled), executing arbitrary chains, Cursor-style @document-fetching, and 3rd-party context via plugins (e.g. Dropbox, Salesforce, Shopify, etc).
Use OpenAI's assistants api or bring your own model.

Explore the docs »

Join our Discord · Website · Report Bug · Request Feature

Overview

CopilotTextarea: AI-assisted text generation + editing.

• ✅ A drop-in <textarea /> replacement. Supports all textarea customizations.
• ✅ AI editing ✨ - "list the client's top 3 pain points from the last call @GongTranscript"
• ✅ autocompletions ✨ - Context-aware autocompletions (like in GitHub Copilot / Gmail)
• ✅ App context & 3rd party context with useMakeCopilotReadable and useMakeCopilotDocumentReadable
• 🚧 First draft ✨ - automatically populate the initial content.
• 🚧 Bold + italics support.

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

• ✅ propagate application state into the chatbot with useMakeCopilotReadable and useMakeCopilotDocumentReadable
• ✅ frontend actions: useMakeCopilotActionable
• ✅ User-referenced context using @someContext (including 3rd party)
• ✅ Bring your own model
• 🚧 propagate backend state
• 🚧 backend actions (auth enabled)
• 🚧 OpenAI assistants api

Demo

CopilotKit in action.

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

Backend

You can easily use any backend/LLM - just provide the URL of any OpenAI-comaptible endpoint. E.g. see this example implementation for a NextJS app.

Then reference this URL in your CopilotProvider instantiation:

  <CopilotProvider chatApiEndpoint="/api/copilotkit/chat"> {/* Global state & copilot logic. Put this around the entire app */}
    {/* ... */}
  </CopilotProvider>

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