brianjking / CopilotKit

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

The Open-Source Copilot Platform

in-app chatbots, and AI-enabled Textareas.

Explore the docs »

Join our Discord · Website · Report Bug · Request Feature

Questions? Book a call with us »

Copilot support: We're happy to support your Copilot integration efforts.
You can receive support on our discord or by booking a call with us.

---

Building blocks for AI Copilots,
and AI-native Applications.

Code-first & fully customizable.
Bring your own LLM.

---

🌟 <CopilotChat />:
Build 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.

How does it work

Define the following simple entry-points into your application, and the CopilotKit🪁 execution engine takes care of the rest!

• Application state (frontend + backend + 3rd party)
• Application interaction (via plain typescript code, frontend + backend)
• Purpose-specific LLM chains
• Application interaction (via plain typescript code, frontend + backend)
• and more.

CopilotKit also provides builit-in (fully-customizable) Copilot-native UX components, including:
CopilotChat, CopilotSidebar, CopilotPopup, and CopilotTextarea.

Installation

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

Getting started

See quickstart in the docs

Demo

3-min showcase + 3-min implementation tutorial:

CopilotKit_Demo_Jan_zjgjk0.webm

Building blocks

A more comprehensive and up-to-date overview is available in the docs.
But roughtly:

Copilot entrypoints

• ✅ useMakeCopilotReadable: give frontend state to the copilot
• ✅ useMakeCopilotDocumentReadable: give document state to the copilot, especially useful with 3rd party state (e.g. Gong call transcript).
• ✅ useMakeCopilotActionable: frontend application interaction
• ✅ CopilotBackend: backend application interaction
• 🚧 useCopilotChain: provide usecase-specific LLM chains

Built-in UI components

• ✅ <CopilotSidebar>: Built in, hackable Copilot UI (optional - you can bring your own UI).
• ✅ <CopilotPopup>: Built in popup UI.
• ✅ <CopilotChat>: Standalone chat UI
• ✅ <CopilotTextarea />: drop-in <textarea /> replacement with Copilot autocompletions.
• ✅ useCopilotChat() for fully-custom UI component
• 🚧 use custom UX elements inside the chat (coming soon)

Examples

<CopilotSidebar />

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

function MyAmazingContent() {
    const importantInfo = useImportantInfo()
    useMakeCopilotReadable("very importnat information: " + importantInfo)

    useMakeCopilotActionable(
      {
        name: `selectDestinations_${toCamelCase(heading)}`,
        description: `Set the given destinations as 'selected', on the ${heading} table`,
        argumentAnnotations: [
          {
            name: "destinationNames",
            type: "array",
            items: {
              type: "string",
            },
            description: "The names of the destinations to select",
            required: true,
          },
        ],
        implementation: async (destinationNames: string[]) => {
          setCheckedRows((prevState) => {
            const newState = { ...prevState };
            destinationNames.forEach((destinationName) => {
              newState[destinationName] = true;
            });
            return newState;
          });
        },
      },
      [],
    );


    return (
       <YourContent />
    )
}

export default function App() {
  return (
    <CopilotKit url="/api/copilotkit/chat"> {/* Global state & copilot logic. Put this around the entire app */}
      <CopilotSidebar> {/* A built-in Copilot UI (or bring your own UI). Put around individual pages, or the entire app. */}
        <MyAmazingContent />
      </CopilotSidebar>
    </CopilotKit>
  );
}

<CopilotTextarea />

A drop-in <textarea /> replacement with autocompletions, AI insertions/edits, and generate-from-scratch.
Indexed on data provided to the Copilot.

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

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

return (
  <CopilotKit url="/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", ".", ","],
        },
      }}
    />
  </CopilotKit>
);

Near-Term Roadmap

📊 Please vote on features via the Issues tab!

Copilot-App Interaction

• ✅ useMakeCopilotReadable: give frontend state to the copilot
• ✅ useMakeCopilotDocumentReadable: give document state to the copilot, especially useful with 3rd party state (e.g. Gong call transcript)
• ✅ useMakeCopilotActionable: Let the copilot interact with the application
• 🚧 useMakeCopilotAskable: let the copilot ask for additional information when needed (coming soon)
• 🚧 useCopilotChain: provide usecase-specific chain
• 🚧 useEditCopilotMessage: edit the (unsent) typed user message to the copilot (coming soon)
• 🚧 copilot-assisted navigation: go to the best page to achieve some objective.
• 🚧 Copilot Cloud: From hosting, chat history, analytics, and evals, to automatic Copilot personalization and self-improvement.

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