Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/CopilotKit/CopilotKit

A framework for building custom AI Copilots 🤖 in-app AI chatbots, in-app AI Agents, & AI-powered Textareas.
https://github.com/CopilotKit/CopilotKit

ai langchain llm nextjs open-source react reactjs ts typescript

Last synced: 13 days ago
JSON representation

A framework for building custom AI Copilots 🤖 in-app AI chatbots, in-app AI Agents, & AI-powered Textareas.

Lists

README 

        


  

    

    CopilotKit Logo

  

  






  

      Discord

  

  

      GitHub CI

  



  

    NPM

  MIT

  






The Open-Source Copilot Framework






Build, deploy, and operate fully custom AI Copilots.






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






  

    Join our Discord

  

   · 

  

    Read the Docs

  

   · 

  

    Try Copilot Cloud

  




---





  

  

  

  









  




## "Hello World" Templates



  

    

      PowerPoint + Copilot + Voice 


      https://github.com/CopilotKit/presentation-voice 



      

        Presentation-Voice

      

    

    

      "Hello World" (A Todo App) 


      https://github.com/CopilotKit/example_app-todo 



      

        Todo App

      

    

    

      PowerPoint + Copilot 


      https://github.com/CopilotKit/presentation-demo 



      

        Presentation-Demo

      

    

    

      Spreadsheets + Copilot 


      https://github.com/CopilotKit/spreadsheet-demo 



      

        Presentation-Demo

      

    



  



## Components



🌟 **\:** 


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:



🌟 **\:** 


Drop-in replacement for any `.` 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



```bash

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

```



## Getting started



See quickstart in the [docs](https://docs.copilotkit.ai)



## Demo



**3-min showcase + 3-min implementation tutorial:**



[CopilotKit_Demo_Jan_zjgjk0.webm](https://github.com/CopilotKit/CopilotKit/assets/746397/b1749282-a3e4-4ef4-a780-7d03f30edf5b)



## Building blocks



A more comprehensive and up-to-date overview is available in the [docs](https://docs.copilotkit.ai). 


But roughly:



### 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



- ✅ ``: Built in, hackable Copilot UI (optional - you can bring your own UI).

- ✅ ``: Built in popup UI.

- ✅ ``: Standalone chat UI

- ✅ ``: drop-in `` replacement with Copilot autocompletions.

- ✅ `useCopilotChat()` for fully-custom UI component

- 🚧 use custom UX elements inside the chat (coming soon)



## Examples



### ``



```typescript

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 ;

}



export default function App() {

  return (

    

      {" "}

      {/* Global state & copilot logic. Put this around the entire app */}

      

        {" "}

        {/* A built-in Copilot UI (or bring your own UI). Put around individual pages, or the entire app. */}

        

      

    

  );

}

```



### ``



A drop-in  replacement with autocompletions, AI insertions/edits, and generate-from-scratch. 


Indexed on data provided to the Copilot.





  




```typescript

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 ):

// See below for more features (parent/child hierarchy, categories, etc.)

useCopilotReadable({

  description: "The description of your data",

  value: relevantInformation,

});

useMakeCopilotDocumentReadable(document);



return (

  

    {" "}

    {/* Global state & copilot logic. Put this around the entire app */}

    

  

);

```



## Near-Term Roadmap



### 📊 Please vote on features via the Issues tab!



### Copilot-App Interaction



- ✅ `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`: 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](https://discord.gg/6dffbvGU3D)

[![Discord](https://dcbadge.vercel.app/api/server/6dffbvGU3D?compact=true&style=flat)](https://discord.gg/6dffbvGU3D)



## Contact



atai `` copilotkit.ai