skills/copilotkit__copilotkit

Fork 0

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

T

Markus Ecker 2f3296e468 Beta release beta-automation

2024-02-13 18:56:09 +01: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

Beta release beta-automation

2024-02-13 18:56:09 +01:00

docs

Add documentation for CopilotTask

2024-01-30 14:07:48 +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-02-02 20:45:35 -08:00

README.md

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 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="K-vU1M-VZs8pQDHm:code-block-container code-overflow-scroll"><pre data-attr-class="K-vU1M-VZs8pQDHm:code-block"><code data-attr-class="K-vU1M-VZs8pQDHm: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

The Open-Source Copilot Platform

in-app chatbots, and AI-enabled Textareas.

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

How does it work

Installation

Getting started

Demo

Building blocks

Copilot entrypoints

Built-in UI components

Examples

<CopilotSidebar />

<CopilotTextarea />

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

`<CopilotSidebar />`

`<CopilotTextarea />`