copilotkit__copilotkit/README.md

The Open-Source Copilot Framework

Build, deploy, and operate fully custom AI Copilots.

in-app AI chatbots, AI agents, and AI Textareas.

 ·   · 

---

"Hello World" Templates

"Hello World" (A Todo App) https://github.com/CopilotKit/example_app-todo

PowerPoint + Copilot https://github.com/CopilotKit/presentation-demo

Spreadsheets + Copilot https://github.com/CopilotKit/spreadsheet-demo

Components

🌟 <CopilotChat />:
Build app-aware 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.
Supports generative UI. Start in seconds:

🌟 <CopilotTextarea />:
Drop-in replacement for any <textarea />. AI-assisted text generation.
Autocompletions + AI editing + generate from scratch. Grounded on your users' data and Copilot application context.
Simply change textarea to CopilotTextarea.

🌟 In-App Agents (powered by LangChain):
Give agents access to realtime application context, and let agents take action inside applications.

🌟 Co-Agents (powered by LangChain. Coming soon.):
Allow end-users to observe and intervene in an in-app agent’s operations, with native application UX. End users can correct mistakes in intermediate steps if any were made, and restart agent operation from that point onwards.

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
• and more.

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

• ✅ useCopilotReadable: give frontend state to the copilot
• ✅ useMakeCopilotDocumentReadable: give document state to the copilot, especially useful with 3rd party state (e.g. Gong call transcript).
• ✅ useCopilotAction: frontend application interaction
• ✅ CopilotRuntime: server side runtime
• 🚧 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();
  useCopilotReadable({
    description: "Very important information",
    value: importantInfo,
  });

  useCopilotAction(
    {
      name: `selectDestinations_${toCamelCase(heading)}`,
      description: `Set the given destinations as 'selected', on the ${heading} table`,
      parameters: [
        {
          name: "destinationNames",
          type: "string[]",
          description: "The names of the destinations to select",
          required: true,
        },
      ],
      handler: async ({ destinationNames }) => {
        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 replacement with autocompletions, AI insertions/edits, and generate-from-scratch. <br/> Indexed on data provided to the Copilot.</p> <p align="center"> <img src="./assets/CopilotTextarea.gif" width="648" style="border-radius: 15px; max-width="100%""> </p> <div data-attr-class="-cmYaUA_jRoC38FN:code-block-container code-overflow-scroll"><pre data-attr-class="-cmYaUA_jRoC38FN:code-block"><code data-attr-class="-cmYaUA_jRoC38FN:chroma language-typescript display"><span class="kr">import</span> <span class="s2">"@copilotkit/react-textarea/styles.css"</span><span class="p">;</span> <span class="c1">// add to the app-global css </span><span class="kr">import</span> <span class="p">{</span> <span class="nx">CopilotTextarea</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@copilotkit/react-textarea"</span><span class="p">;</span> <span class="kr">import</span> <span class="p">{</span> <span class="nx">CopilotKit</span> <span class="p">}</span> <span class="kr">from</span> <span class="s2">"@copilotkit/react-core"</span><span class="p">;</span> <span class="c1">// call ANYWHERE in your app to provide external context (make sure you wrap the app with a <CopilotKit >): </span><span class="c1">// See below for more features (parent/child hierarchy, categories, etc.) </span><span class="nx">useCopilotReadable</span><span class="p">({</span> <span class="nx">description</span><span class="o">:</span> <span class="s2">"The description of your data"</span><span class="p">,</span> <span class="nx">value</span>: <span class="kt">relevantInformation</span><span class="p">,</span> <span class="p">});</span> <span class="nx">useMakeCopilotDocumentReadable</span><span class="p">(</span><span class="nb">document</span><span class="p">);</span> <span class="k">return</span> <span class="p">(</span> <span class="p"><</span><span class="nt">CopilotKit</span> <span class="na">url</span><span class="o">=</span><span class="s">"/api/copilotkit/chat"</span><span class="p">></span> <span class="p">{</span><span class="s2">" "</span><span class="p">}</span> <span class="p">{</span><span class="cm">/* Global state & copilot logic. Put this around the entire app */</span><span class="p">}</span> <span class="p"><</span><span class="nt">CopilotTextarea</span> <span class="na">className</span><span class="o">=</span><span class="s">"p-4 w-1/2 aspect-square font-bold text-3xl bg-slate-800 text-white rounded-lg resize-none"</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">"A CopilotTextarea!"</span> <span class="na">autosuggestionsConfig</span><span class="o">=</span><span class="p">{{</span> <span class="nx">purposePrompt</span><span class="o">:</span> <span class="s2">"A COOL & SMOOTH announcement post about CopilotTextarea. Be brief. Be clear. Be cool."</span><span class="p">,</span> <span class="nx">forwardedParams</span><span class="o">:</span> <span class="p">{</span> <span class="c1">// additional arguments to customize autocompletions </span> <span class="nx">max_tokens</span>: <span class="kt">25</span><span class="p">,</span> <span class="nx">stop</span><span class="o">:</span> <span class="p">[</span><span class="s2">"\n"</span><span class="p">,</span> <span class="s2">"."</span><span class="p">,</span> <span class="s2">","</span><span class="p">],</span> <span class="p">},</span> <span class="p">}}</span> <span class="p">/></span> <span class="p"></</span><span class="nt">CopilotKit</span><span class="p">></span> <span class="p">);</span> </code></pre></div><h2>Near-Term Roadmap</h2> <h3><span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="bar chart">📊</span> Please vote on features via the Issues tab!</h3> <h3>Copilot-App Interaction</h3> <ul dir="auto"> <li><span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="check mark button">✅</span> <code>useCopilotReadable</code>: give frontend state to the copilot</li> <li><span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="check mark button">✅</span> <code>useMakeCopilotDocumentReadable</code>: give document state to the copilot, especially useful with 3rd party state (e.g. Gong call transcript)</li> <li><span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="check mark button">✅</span> <code>useCopilotAction</code>: Let the copilot interact with the application</li> <li><span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="construction">🚧</span> <code>useMakeCopilotAskable</code>: let the copilot ask for additional information when needed (coming soon)</li> <li><span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="construction">🚧</span> <code>useCopilotChain</code>: provide usecase-specific chain</li> <li><span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="construction">🚧</span> <code>useEditCopilotMessage</code>: edit the (unsent) typed user message to the copilot (coming soon)</li> <li><span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="construction">🚧</span> copilot-assisted navigation: go to the best page to achieve some objective.</li> <li><span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="construction">🚧</span> Copilot Cloud: From hosting, chat history, analytics, and evals, to automatic Copilot personalization and self-improvement.</li> </ul> <h3>Integrations</h3> <ul dir="auto"> <li><span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="check mark button">✅</span> Vercel AI SDK</li> <li><span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="check mark button">✅</span> OpenAI APIs</li> <li><span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="construction">🚧</span> Langchain</li> <li><span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="construction">🚧</span> Additional LLM providers</li> </ul> <h3>Frameworks</h3> <ul dir="auto"> <li><span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="check mark button">✅</span> React</li> <li><span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="construction">🚧</span> Vue</li> <li><span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="construction">🚧</span> Svelte</li> <li><span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="construction">🚧</span> Swift (Mac + iOS)</li> </ul> <h2>Contribute</h2> <p dir="auto">Contributions are welcome! <span data-attr-class="-cmYaUA_jRoC38FN:emoji" aria-label="party popper">🎉</span></p> <p dir="auto"><a href="<a href="https://discord.gg/6dffbvGU3D" data-markdown-generated-content="">https://discord.gg/6dffbvGU3D</a>">Join the Discord</a> <a href="<a href="https://discord.gg/6dffbvGU3D" data-markdown-generated-content="">https://discord.gg/6dffbvGU3D</a>"><img src="<a href="https://dcbadge.vercel.app/api/server/6dffbvGU3D?compact=true&style=flat" data-markdown-generated-content="">https://dcbadge.vercel.app/api/server/6dffbvGU3D?compact=true&style=flat</a>" alt="Discord"></a></p> <!-- [![Discord](<a href="https://img.shields.io/discord/1122926057641742418.svg" data-markdown-generated-content="">https://img.shields.io/discord/1122926057641742418.svg</a>)](<a href="https://discord.gg/6dffbvGU3D" data-markdown-generated-content="">https://discord.gg/6dffbvGU3D</a>) --> <h2>Contact</h2> <p dir="auto">atai <code><at></code> copilotkit.ai</p> </body></html>