T

Recursively.ai ab79874011 Merge pull request #37 from RecursivelyAI/changeset-release/main

Version Packages

2023-08-31 06:31:58 -07:00

.github/workflows

add openAI_API_KEY env var

2023-08-27 22:26:09 -07:00

assets

banner and demo change

2023-08-28 10:04:21 -07:00

CopilotKit

Version Packages

2023-08-31 13:24:50 +00: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

resize demo

2023-08-25 10:36:11 -07:00

README.md

CopilotKit🪁

Add a powerful & hackable copilot to any app, in an afternoon.

Overview

✅ NEW: <CopilotTextarea />: a drop-in <textarea /> replacement with Copilot autocompletions.
✅ useMakeCopilotReadable(...): Propagate granular app state to the Copilot & Textareas.
✅ useMakeCopilotActionable(...): Let the Copilot take action on behalf of the user.
🚧 CopilotCloudKit: integrate arbitrary LLM logic / chains / RAG, using plain code.

Demo

CopilotKit in action.

Installation

pnpm install @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea

Examples

NEW! `<CopilotTextarea />`

A drop-in replacement with context-aware Copilot autocompletions. <img src="./assets/CopilotTextarea.gif" width="400" height="400" style="border-radius: 15px;"> <h4>Features</h4> <ol dir="auto"> <li>Customizable <code>purpose</code> prompt.</li> <li>Provide arbitrary context to inform autocompletions using <code>useMakeCopilotReadable</code></li> <li>Works with any OpenAI-compatible endpoint (<a href="CopilotKit/examples/next-openai/src/app/api/autosuggestions/route.ts">example implementation</a>)</li> <li>Supports all <code><textarea /></code> customizations</li> </ol> <div data-attr-class="_sVgCd_-GW5hXjhK:code-block-container code-overflow-scroll"><pre data-attr-class="_sVgCd_-GW5hXjhK:code-block"><code data-attr-class="_sVgCd_-GW5hXjhK:chroma language-typescript display">import "@copilotkit/react-textarea/styles.css"; // add to the app-global css import { CopilotTextarea } from "@copilotkit/react-textarea"; import { CopilotProvider } from "@copilotkit/react-core"; return ( <CopilotProvider> {/* 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.", externalContextCategories: ["someSpecificContextCategory"], // or leave as `undefined`, for the default global Copilot context apiEndpoint: "/api/autosuggestions" // (Any OpenAI-compatible endpoint. See above) forwardedParams: { max_tokens: 25, stop: ["\n", ".", ","], }, }} /> </CopilotProvider> ); </code></pre></div><h3>Integrate copilot</h3> <div data-attr-class="_sVgCd_-GW5hXjhK:code-block-container code-overflow-scroll"><pre data-attr-class="_sVgCd_-GW5hXjhK:code-block"><code data-attr-class="_sVgCd_-GW5hXjhK:chroma language-typescript display">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> {/* 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> ); } </code></pre></div><h4>Features</h4> <ol dir="auto"> <li>Batteries included. Add 2 React components, and your Copilot is live.</li> <li>Customize the built-in <code>CopilotSidebarUIProvider</code> UI -- or bring your own UI component.</li> <li>Extremely hackable. Should the need arise, you can define 1st-class extensions just as powerful as <code>useMakeCopilotReadable</code>, <code>useMakeCopilotActionable</code>, etc.</li> </ol> <h3>Give the copilot read permissions</h3> <h4>Features</h4> <ol dir="auto"> <li>Propagate useful information & granular app-state to the Copilot</li> <li>Easily maintain the hierarchical structure of information with <code>parentId</code></li> <li>One call to rule them all: <code>useMakeCopilotReadable</code> works both with the sidekick, and with CopilotTextarea. <ul> <li>Use the <code>contextCategories: string[]</code> param to route information to different places.</li> </ul> </li> </ol> <div data-attr-class="_sVgCd_-GW5hXjhK:code-block-container code-overflow-scroll"><pre data-attr-class="_sVgCd_-GW5hXjhK:code-block"><code data-attr-class="_sVgCd_-GW5hXjhK:chroma language-typescript display">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... ); } </code></pre></div><h3>Give the copilot write permissions</h3> <div data-attr-class="_sVgCd_-GW5hXjhK:code-block-container code-overflow-scroll"><pre data-attr-class="_sVgCd_-GW5hXjhK:code-block"><code data-attr-class="_sVgCd_-GW5hXjhK:chroma language-typescript display">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), }, [] ); // ... } </code></pre></div><h4>Features</h4> <ol dir="auto"> <li>Plain typescript actions. Edit a textbox, navigate to a new page, or anythign you can think of.</li> <li>Specify arbitrary input types.</li> </ol> <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 static information to the copilot, in sync with on-screen state</li> <li>✅ <code>useMakeCopilotActionable</code>: Let the copilot take action on behalf of the user</li> <li>🚧 <code>useMakeCopilotAskable</code>: let the copilot ask for additional information when needed (coming soon)</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>🚧 CopilotCloudKit: integrate arbitrary LLM logic / chains / RAG, using plain code.</li> </ul> <h3>UI components</h3> <ul dir="auto"> <li>✅ <code><CopilotSidebarUIProvider></code>: Built in, hackable Copilot UI (optional - you can bring your own UI).</li> <li>✅ <code><CopilotTextarea /></code>: drop-in <code><textarea /></code> replacement with Copilot autocompletions.</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>  </body></html>

Description

CopilotKit：面向智能体和生成式 UI 的前端技术栈，支持 React、Angular、移动端和 Slack 等，AG-UI 协议缔造者。｜GitHub 镜像 ⭐ 37k · 🍴 4.6k

https://github.com/copilotkit/copilotkit

mirror

Readme 804 MiB

Languages

TypeScript 79.4%

MDX 7.5%

Python 6%

Shell 1.4%

C# 1.3%

Other 4.4%

README.md

CopilotKit🪁

Overview

Demo

Installation

Examples

NEW! <CopilotTextarea />

NEW! `<CopilotTextarea />`