https://github.com/CopilotKit/CopilotKit

Skip to content
Toggle navigation
 
Sign up

  * Product
      +  
        Actions
        Automate any workflow
      +  
        Packages
        Host and manage packages
      +  
        Security
        Find and fix vulnerabilities
      +  
        Codespaces
        Instant dev environments
      +  
        Copilot
        Write better code with AI
      +  
        Code review
        Manage code changes
      +  
        Issues
        Plan and track work
      +  
        Discussions
        Collaborate outside of code
    Explore
      + All features
      + Documentation
      + GitHub Skills
      + Blog
  * Solutions
    For
      + Enterprise
      + Teams
      + Startups
      + Education
    By Solution
      + CI/CD & Automation
      + DevOps
      + DevSecOps
    Resources
      + Learning Pathways
      + White papers, Ebooks, Webinars
      + Customer Stories
      + Partners
  * Open Source
      +  
        GitHub Sponsors
        Fund open source developers
      +  
        The ReadME Project
        GitHub community articles
    Repositories
      + Topics
      + Trending
      + Collections
  * Pricing

Search or jump to...

Search code, repositories, users, issues, pull requests...

Search
[                    ]
Clear

Search syntax tips

Provide feedback

We read every piece of feedback, and take your input very seriously.

[                    ] [ ] Include my email address so I can be
contacted
Cancel Submit feedback

Saved searches

Use saved searches to filter your results more quickly

Name [                    ] 
Query [                    ]

To see all available qualifiers, see our documentation.

Cancel Create saved search
Sign in
Sign up
You signed in with another tab or window. Reload to refresh your
session. You signed out in another tab or window. Reload to refresh
your session. You switched accounts on another tab or window. Reload
to refresh your session. Dismiss alert
{{ message }}
CopilotKit / CopilotKit Public

  * Notifications
  * Fork 37
  * Star 806

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

copilotkit.ai

License

MIT license
806 stars 37 forks Activity
Star
Notifications

  * Code
  * Issues 12
  * Pull requests 1
  * Actions
  * Projects 0
  * Security
  * Insights

Additional navigation options

  * Code
  * Issues
  * Pull requests
  * Actions
  * Projects
  * Security
  * Insights

CopilotKit/CopilotKit

This commit does not belong to any branch on this repository, and may
belong to a fork outside of the repository.
main
Switch branches/tags
[                    ]
Branches Tags
Could not load branches
Nothing to show
{{ refName }} default View all branches
Could not load tags
Nothing to show
{{ refName }} default
View all tags

Name already in use

A tag already exists with the provided branch name. Many Git commands
accept both tag and branch names, so creating this branch may cause
unexpected behavior. Are you sure you want to create this branch?
Cancel Create
5 branches 35 tags
Code

  * Local
  * Codespaces

  *  
    Clone
    HTTPS GitHub CLI
    [https://github.com/C]

    Use Git or checkout with SVN using the web URL.

    [gh repo clone Copilo]

    Work fast with our official CLI. Learn more about the CLI.

  * Open with GitHub Desktop
  * Download ZIP

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

@ataibarkai
ataibarkai Merge pull request #114 from CopilotKit/ataibarkai-patch-3
...
7370a44 Dec 6, 2023
Merge pull request #114 from CopilotKit/ataibarkai-patch-3

Update README.md

7370a44

Git stats

  * 526 commits

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
.github
Create documentation.md
November 22, 2023 06:24
CopilotKit
changeset
December 1, 2023 13:23
assets
banner and demo change
August 28, 2023 10:04
docs
quickstart-contribute
November 22, 2023 16:07
.gitignore
move to CopilotKit subdirectory
August 22, 2023 23:09
.kodiak.toml
initial commit - web skeleton in place
June 19, 2023 09:59
LICENSE
Update LICENSE
June 30, 2023 16:46
README.md
Update README.md
December 6, 2023 10:17
View code
[                    ]
The Open-Source Copilot Platform In-app chatbots, and AI-enabled
TextArea.  Features Overview CopilotTextarea: AI-assisted text
generation + editing. Copilot Chatbot: (frontend + backend) runtimes
for in-app copilots. Demo Installation Getting started Examples
<CopilotTextarea /> Features Integrate copilot Features Give the
copilot read permissions Features Give the copilot write permissions
Features Near-Term Roadmap  Please vote on features via the Issues
tab! Copilot-App Interaction UI components Integrations Frameworks
Contribute Contact

README.md

                           CopilotKit Logo

                      Discord GitHub CI NPM MIT

                   The Open-Source Copilot Platform

              In-app chatbots, and AI-enabled TextArea.


                         Explore the docs >>

      Join our Discord * Website * Report Bug * Request Feature

                  Questions? Book a call with us >>

                            [288405135-]


 <CopilotPortal />:
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.
Starting with React. Use any LLM.

Combines frontend SDKs, backend SDKs, and (optional) cloud
infrastructure. Open-source 

  Features Overview

 CopilotTextarea: AI-assisted text generation + editing.

  *  A a drop-in <textarea /> replacement. Supports all <textarea />
    customizations.
  *  Context-aware autocompletions  (like in GitHub Copilot)
  *  AI editing  - "list the client's top 3 pain points from the
    last call using @SalesforceData"
  *  Generate from scratch  - automatically populate the initial
    content based on given context
  *  App context & 3rd party context with useMakeCopilotReadable and
    useMakeCopilotDocumentReadable
  *  Fully custsomizable prompt engineering
  *  Arbitrary LLM chains.
  *  Bold + italics.

 Copilot Chatbot: (frontend + backend) runtimes for in-app copilots.

  *  Index on frontend app state (via useMakeCopilotReadable and
    useMakeCopilotDocumentReadable)
  *  Index on backend state
  *  frontend function calling runtime (in-app actions) (via
    useMakeCopilotActionable)
  *  backend function calling runtime (auth enabled)
  *  Autorun vs. "sensitive" functions (require user approval before
    execution).
  *  Cursor-style @document-referecing.
  *  Bring your own model
  *  3rd party plugins
  *  execute arbitrary LLM chains
  *  OpenAI assistants api
  *  Fully customize UI

 Demo

2-min showcase + 2-min implementation tutorial:

copilot_full_demo_nxxpbr.3.mp4

 Installation

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

 Getting started

See quickstart in the docs

 Examples

 <CopilotTextarea />

A drop-in <textarea /> replacement with context-aware Copilot
autocompletions.

                          [CopilotTextarea]

 Features

 1. Customizable purpose prompt.
 2. Provide arbitrary context to inform autocompletions using
    useMakeCopilotReadable
 3. Works with any backend/LLM, using ChatlikeApiEndpoint
 4. Supports all <textarea /> customizations

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

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

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

 Integrate copilot

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

export default function App(): JSX.Element {
  return (
  <CopilotProvider chatApiEndpoint="/api/copilotkit/chat"> {/* Global state & copilot logic. Put this around the entire app */}
      <CopilotSidebarUIProvider> {/* A built-in Copilot UI (or bring your own UI). Put around individual pages, or the entire app. */}

        <YourContent />

      </CopilotSidebarUIProvider>
    </CopilotProvider>
  );
}

 Features

 1. Batteries included. Add 2 React components, and your Copilot is
    live.
 2. Customize the built-in CopilotSidebarUIProvider UI -- or bring
    your own UI component.
 3. Extremely hackable. Should the need arise, you can define
    1st-class extensions just as powerful as useMakeCopilotReadable,
    useMakeCopilotActionable, etc.

 Give the copilot read permissions

 Features

 1. Propagate useful information & granular app-state to the Copilot
 2. Easily maintain the hierarchical structure of information with
    parentId
 3. One call to rule them all: useMakeCopilotReadable works both with
    the sidekick, and with CopilotTextarea.
      + Use the contextCategories: string[] param to route
        information to different places.

import { useMakeCopilotReadable } from "@copilotkit/react-core";


function Employee(props: EmployeeProps): JSX.Element {
  const { employeeName, workProfile, metadata } = props;

  // propagate any information copilot
  const employeeContextId = useMakeCopilotReadable(employeeName);

  // Pass a parentID to maintain a hiearchical structure.
  // Especially useful with child React components, list elements, etc.
  useMakeCopilotReadable(workProfile.description(), employeeContextId);
  useMakeCopilotReadable(metadata.description(), employeeContextId);

  return (
    // Render as usual...
  );
}

 Give the copilot write permissions

import { useMakeCopilotActionable } from "@copilotkit/react-core";

function Department(props: DepartmentProps): JSX.Element {
  // ...

  // Let the copilot take action on behalf of the user.
  useMakeCopilotActionable(
    {
      name: "setEmployeesAsSelected",
      description: "Set the given employees as 'selected'",
      argumentAnnotations: [
        {
          name: "employeeIds",
          type: "array", items: { type: "string" }
          description: "The IDs of employees to set as selected",
          required: true
        }
      ],
      implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds),
    },
    []
  );

  // ...
}

 Features

 1. Plain typescript actions. Edit a textbox, navigate to a new page,
    or anythign you can think of.
 2. Specify arbitrary input types.

 Near-Term Roadmap

  Please vote on features via the Issues tab!

 Copilot-App Interaction

  *  useMakeCopilotReadable: give static information to the copilot,
    in sync with on-screen state
  *  useMakeCopilotActionable: Let the copilot take action on behalf
    of the user
  *  useMakeCopilotAskable: let the copilot ask for additional
    information when needed (coming soon)
  *  useEditCopilotMessage: edit the (unsent) typed user message to
    the copilot (coming soon)
  *  copilot-assisted navigation: go to the best page to achieve
    some objective.
  *  CopilotCloudKit: integrate arbitrary LLM logic / chains / RAG,
    using plain code.

 UI components

  *  <CopilotSidebarUIProvider>: Built in, hackable Copilot UI
    (optional - you can bring your own UI).
  *  <CopilotTextarea />: drop-in <textarea /> replacement with
    Copilot autocompletions.

 Integrations

  *  Vercel AI SDK
  *  OpenAI APIs
  *  Langchain
  *  Additional LLM providers

 Frameworks

  *  React
  *  Vue
  *  Svelte
  *  Swift (Mac + iOS)

 Contribute

Contributions are welcome! 

Join the Discord Discord

 Contact

atai <at> copilotkit.ai

About

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

copilotkit.ai

Topics

react open-source typescript ai reactjs nextjs ts llm langchain

Resources

Readme

License

MIT license
Activity

Stars

806 stars

Watchers

12 watching

Forks

37 forks
Report repository

Releases 35

 
@copilotkit/react-textarea@0.25.0 Latest
Dec 1, 2023
+ 34 releases

Contributors 4

  * @ataibarkai ataibarkai Atai Barkai
  * @CopilotKit CopilotKit CopilotKit
  * @github-actions[bot] github-actions[bot]
  * @tarunrajput tarunrajput Tarun Chauhan

Languages

  * TypeScript 98.8%
  * Other 1.2%

Footer

 (c) 2023 GitHub, Inc.

Footer navigation

  * Terms
  * Privacy
  * Security
  * Status
  * Docs
  * Contact

You can't perform that action at this time.