mirror of https://github.com/CopilotKit/CopilotKit.git synced 2026-09-14 16:26:20 +08:00

T

Atai Barkai 66d8fc73e4 Merge pull request #279 from CopilotKit/atai/0320/release_ActionsAndUi

Release branch: new action: types and generated ui

2024-03-20 10:08:54 -07:00

.github

Create documentation.md

2023-11-22 06:24:38 -08:00

assets

new textarea gif

2024-01-21 19:05:53 -08:00

CopilotKit

pnpm changeset: new release: action: types and generated ui

2024-03-20 10:06:55 -07:00

docs

Merge branch 'main' into mme/assistant-api

2024-02-29 19:42:07 +01:00

.gitignore

move to CopilotKit subdirectory

2023-08-22 23:09:55 -07:00

.kodiak.toml

initial commit - web skeleton in place

2023-06-19 09:59:21 -07:00

LICENSE

Update LICENSE

2023-06-30 16:46:26 -07:00

README.md

Update README.md

2024-03-18 22:47:54 -07:00

README.md

The Open-Source Copilot Framework

Build, deploy, and operate fully custom AI Copilots.

in-app AI chatbots, AI agents, and AI 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.

"Hello World" Templates

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

Presentation Demo:
https://github.com/CopilotKit/presentation-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.

🌟 Copilot Skills (powered by LangChain):
Bring specialized LLM Chains and Graphs into in-app AI Copilot, with a few lines of code (native LangChain / LangGraph, or via LangServe). CopilotKit wraps your app, and routes relevant state as input to standalone skill chains (state can come from the frontend, backend, 3rd party integrations, or from the user). When the chain returns, the Copilot Engine funnels its output to in-app interaction as needed.

🌟 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

✅ 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 replacement with autocompletions, AI insertions/edits, and generate-from-scratch. Indexed on data provided to the Copilot. <img src="./assets/CopilotTextarea.gif" width="648" style="border-radius: 15px; max-width="100%""> <div data-attr-class="xORYkjtfxLEffSzq:code-block-container code-overflow-scroll"><pre data-attr-class="xORYkjtfxLEffSzq:code-block"><code data-attr-class="xORYkjtfxLEffSzq:chroma language-typescript display">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> ); </code></pre></div><h2>Near-Term Roadmap</h2> <h3>📊 Please vote on features via the Issues tab!</h3> <h3>Copilot-App Interaction</h3> <ul dir="auto"> <li>✅ <code>useMakeCopilotReadable</code>: give frontend state to the copilot</li> <li>✅ <code>useMakeCopilotDocumentReadable</code>: give document state to the copilot, especially useful with 3rd party state (e.g. Gong call transcript)</li> <li>✅ <code>useMakeCopilotActionable</code>: Let the copilot interact with the application</li> <li>🚧 <code>useMakeCopilotAskable</code>: let the copilot ask for additional information when needed (coming soon)</li> <li>🚧 <code>useCopilotChain</code>: provide usecase-specific chain</li> <li>🚧 <code>useEditCopilotMessage</code>: edit the (unsent) typed user message to the copilot (coming soon)</li> <li>🚧 copilot-assisted navigation: go to the best page to achieve some objective.</li> <li>🚧 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>✅ Vercel AI SDK</li> <li>✅ OpenAI APIs</li> <li>🚧 Langchain</li> <li>🚧 Additional LLM providers</li> </ul> <h3>Frameworks</h3> <ul dir="auto"> <li>✅ React</li> <li>🚧 Vue</li> <li>🚧 Svelte</li> <li>🚧 Swift (Mac + iOS)</li> </ul> <h2>Contribute</h2> Contributions are welcome! 🎉 <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>  <h2>Contact</h2> atai <code><at></code> copilotkit.ai </body></html>

Description

copilotkit-debug: Use when diagnosing CopilotKit issues -- runtime connectivity failures, agent not responding, streaming errors, tool execution problems, transcription…; copilotkit-develop: Use when building AI-powered features with CopilotKit v2 -- adding chat interfaces, registering frontend tools, sharing application context with agents,…; copilotkit-agui: Use when building custom agent backends, implementing the AG-UI protocol, debugging streaming issues, or understanding how agents commun…

agent agent-native agentic-ai agents ai ai-agent ai-assistant assistant assistant-chat-bots copilot copilot-chat generative-ui js llm nextjs open-source react reactjs ts typescript

Readme MIT 924 MiB

Languages

TypeScript 78.7%

MDX 6.6%

Python 6.4%

C# 1.7%

CSS 1.3%

Other 5.3%

README.md Unescape Escape

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

Components

How does it work

Installation

Getting started

Demo

Building blocks

Copilot entrypoints

Built-in UI components

Examples

<CopilotSidebar />

<CopilotTextarea />

README.md

`<CopilotSidebar />`

`<CopilotTextarea />`