feat: readme redesign (#531)

* wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * wip * WIP * wip * WIP * wip * wip - add license * wip * wip * wip * wip * wip * wip * wip * wip * wip
2026-09-14 16:26:20 +08:00 · 2024-08-13 16:05:33 +02:00
parent 522fe28055
commit dabba78553
6 changed files with 112 additions and 272 deletions
@@ -1,321 +1,161 @@
+> Copilot Cloud v1 has been released! 🎉 [Read more about it here](https://ai88.substack.com/p/copilotkit-v1-launch).
+
 <div align="center">
-  <a href="https://ai88.substack.com/p/copilotkit-v1-launch">
-    CopilotKit v1.0 release! Read about it here.
+  <a href="https://copilotkit.ai" target="_blank">
+    <img src="./assets/banner.png" alt="CopilotKit Logo">
  </a>
+
+  <br/>
+
+  <strong>
+    CopilotKit is the open-source framework for integrating powerful AI Copilots into any application. Easily implement custom AI Chatbots, AI Agents, AI Textareas, and more.
+  </strong>
 </div>

 <br/>

 <div align="center">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" srcset="https://github.com/CopilotKit/CopilotKit/assets/746397/5890217b-524e-49c5-a89e-b8743d2acd51">
-    <img alt="CopilotKit Logo" src="https://github.com/CopilotKit/CopilotKit/assets/746397/bd5c9079-929b-4d55-bdc9-16d1c8181b71" width="450px" max-width="100%"/>
-  </picture>
+  <a href="https://www.npmjs.com/package/@copilotkit/react-core" target="_blank">
+    <img src="https://img.shields.io/npm/v/%40copilotkit%2Freact-core?logo=npm&logoColor=%23FFFFFF&label=Version&color=%236963ff" alt="NPM">
  </a>
-</div>
-
-<p align="center">
-  <a href="https://discord.gg/6dffbvGU3D">
-      <img src="https://dcbadge.vercel.app/api/server/6dffbvGU3D?compact=true&style=flat" alt="Discord">
+  <img src="https://img.shields.io/github/license/copilotkit/copilotkit?color=%236963ff&label=License" alt="MIT">
+  <a href="https://discord.gg/6dffbvGU3D" target="_blank">
+    <img src="https://img.shields.io/discord/1122926057641742418?logo=discord&logoColor=%23FFFFFF&label=Discord&color=%236963ff" alt="Discord">
  </a>
-  <a href="https://github.com/CopilotKit/CopilotKit/actions/workflows/ci.yml">
-      <img src="https://github.com/CopilotKit/CopilotKit/actions/workflows/ci.yml/badge.svg" alt="GitHub CI">
-  </a>
-
-  <a href="https://www.npmjs.com/package/@copilotkit/react-core">
-    <img src="https://img.shields.io/npm/v/@copilotkit/react-core" alt="NPM">
-  <img src="https://img.shields.io/github/license/CopilotKit/CopilotKit" alt="MIT">
-  
-</p>
-
-<h1 align="center">
-The Open-Source Copilot Framework
-</h1>
-
-<h2 align="center">
-Build, deploy, and operate fully custom AI Copilots.
-</h2>
-
-<h3 align="center">
-in-app AI chatbots, AI agents, and AI Textareas.
-</h3>
-
-<p align="center">
-  <a href="https://discord.com/invite/6dffbvGU3D">
-    <img src="https://github.com/CopilotKit/CopilotKit/assets/131273140/bf8d96ea-3aeb-4c9a-9043-96a868b7ad0f" alt="Join our Discord" height="30">
-  </a>
-  &nbsp;&middot;&nbsp;
-  <a href="https://docs.copilotkit.ai/getting-started/quickstart-chatbot">
-    <img src="https://github.com/CopilotKit/CopilotKit/assets/131273140/a4a0fd04-6aee-4e02-9c3e-3f11d60b4e8b" alt="Read the Docs" height="30">
-  </a>
-  &nbsp;&middot;&nbsp;
-  <a href="https://cloud.copilotkit.ai">
-    <img src="https://github.com/CopilotKit/CopilotKit/assets/131273140/28ca62a8-cf93-4d3f-96b0-dc11bf89b734" alt="Try Copilot Cloud" height="30">
-  </a>
-</p>
-
---
-
-<div align="center">
-  <img src="https://github.com/CopilotKit/CopilotKit/assets/746397/ea8edde4-dbde-40b4-bb60-e55bd1023094" width="700px" max-width="100%" style="border-radius: 35px;">
-  <img src="https://github.com/CopilotKit/CopilotKit/assets/746397/731a57bf-ece4-48aa-8792-7bf288fdc3fd" width="700px" max-width="100%" style="border-radius: 35px;">
-  <img src="https://github.com/CopilotKit/CopilotKit/assets/746397/2e47721d-01a1-4719-9871-1dbdbea638ac" width="700px" max-width="100%" style="border-radius: 35px;">
-  <img src="https://github.com/CopilotKit/CopilotKit/assets/746397/1d0373f6-5932-4c4e-84e9-bfdbad53f38f" width="700px" max-width="100%" style="border-radius: 35px;">
 </div>
 <br/>

 <div align="center">
-  <img src="https://github.com/CopilotKit/CopilotKit/assets/746397/1a420e0a-3731-4105-b95c-01e07652723b" width="700px" max-width="100%" style="border-radius: 35px;">
+  <a href="https://discord.gg/6dffbvGU3D?ref=github_readme" target="_blank">
+    <img src="./assets/btn_discord.png" alt="CopilotKit Discord" height="40px">
+  </a>
+  <a href="https://docs.copilotkit.ai?ref=github_readme" target="_blank">
+    <img src="./assets/btn_docs.png" alt="CopilotKit GitHub" height="40px">
+  </a>
+  <a href="https://cloud.copilotkit.ai?ref=github_readme" target="_blank">
+    <img src="./assets/btn_cloud.png" alt="CopilotKit GitHub" height="40px">
+  </a>
 </div>

-## "Hello World" Templates
+<br/>
+<div align="center">
+  <a href="https://www.producthunt.com/posts/copilotkit" target="_blank">
+    <img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=428778&theme=light&period=daily">
+  </a>
+</div>
+
+<br />
+
+<div align="center">
+  <img src="./assets/screenshot.png" alt="CopilotKit Screenshot" style="border-radius: 15px;" />
+</div>
+
+<br />
+
+<div>
+<p>
+  👉 Check out the docs at <a href="https://docs.copilotkit.ai?ref=github_readme" target="_blank">https://docs.copilotkit.ai</a>
+</p>
+</div>
+
+**Table of Contents**
+
+- [Getting Started](#getting-started)
+  - [Quickstart & Tutorials](#quickstart--tutorials)
+  - [Examples & Starter Templates](#examples--starter-templates)
+- [Building Blocks](#building-blocks)
+  - [Components](#-components)
+  - [Hooks](#-hooks)
+- [Contributing](#contributing)
+- [Get in touch](#get-in-touch)
+- [License](#license)
+
+## Getting Started
+
+### Quickstart & Tutorials
+
+There are several easy ways to get started with CopilotKit:
+
+- [**Quickstart: Chatbot:**](https://docs.copilotkit.ai/quickstart-chatbot?ref=github_readme) In just two minutes, add an AI Chatbot to your app with the ability to read application state and take actions.
+- [**Tutorial: Todo List Copilot:**](https://docs.copilotkit.ai/tutorial-ai-todo-list-copilot/overview?ref=github_readme) For a better deep dive into CopilotKit, take a simple todo list app and supercharge it with an AI chat popup.
+- [**Tutorial: Textarea Autocomplete:**](https://docs.copilotkit.ai/tutorial-textarea/overview?ref=github_readme) For a better deep dive into CopilotKit, we'll take a simple email client app and add an AI-powered textarea to it with autocompeltions and AI insertions/edits.
+
+### Examples & Starter Templates

 <table align="center">
  <tr>
    <td align="center" valign="top">
-      PowerPoint + Copilot <br/>
-      <a href="https://github.com/CopilotKit/demo-presentation">https://github.com/CopilotKit/demo-presentation</a> <br/><br>
-      <a href="https://github.com/CopilotKit/demo-presentation">
-        <img alt="Presentation" src="https://github.com/CopilotKit/CopilotKit/assets/131273140/6e1a448b-d153-431f-8132-46a668d8a0d1" width="200px" style="max-width:100%; border-radius: 10px;"/>
+      🕹️ PowerPoint Clone + Copilot <br/>
+      <a href="https://go.copilotkit.ai/GitHubPresentation">https://github.com/CopilotKit/demo-presentation</a> <br/><br>
+      <a href="https://go.copilotkit.ai/GitHubPresentation">
+        <img alt="Presentation" src="https://github.com/CopilotKit/CopilotKit/assets/131273140/6e1a448b-d153-431f-8132-46a668d8a0d1" width="240px" style="max-width:100%; border-radius: 10px;"/>
      </a>
    </td>
    <td align="center" valign="top">
-      "Hello World" (A Todo App) <br/>
-      <a href="https://github.com/CopilotKit/demo-todo">https://github.com/CopilotKit/demo-todo</a> <br/><br>
-      <a href="https://github.com/CopilotKit/demo-todo">
-        <img alt="Todo App" src="https://github.com/CopilotKit/CopilotKit/assets/131273140/63798c02-1892-4d2d-bc9f-2994b7c88694" width="200px" style="max-width:100%; border-radius: 10px;"/>
+      🕹️ Simple Todo App + Copilot <br/>
+      <a href="https://go.copilotkit.ai/GitHubToDo">https://github.com/CopilotKit/demo-todo</a> <br/><br>
+      <a href="https://go.copilotkit.ai/GitHubToDo">
+        <img alt="Todo App" src="https://github.com/CopilotKit/CopilotKit/assets/131273140/63798c02-1892-4d2d-bc9f-2994b7c88694" width="240px" style="max-width:100%; border-radius: 10px;"/>
      </a>
-    </td>    
+    </td>
+  </tr>
+  <tr>
    <td align="center" valign="top">
-      Spreadsheets + Copilot <br/>
-      <a href="https://github.com/CopilotKit/demo-spreadsheet">https://github.com/CopilotKit/demo-spreadsheet</a> <br/><br>
-      <a href="https://github.com/CopilotKit/demo-spreadsheet">
-        <img alt="Presentation-Demo" src="https://github.com/CopilotKit/CopilotKit/assets/131273140/871e4c9c-0ced-490b-9e3f-8594de7c5c89" width="200px" style="max-width:100%; border-radius: 10px;"/>
+      🕹️ Spreadsheets + Copilot <br/>
+      <a href="https://go.copilotkit.ai/GitHubSpreadsheet">https://github.com/CopilotKit/demo-spreadsheet</a> <br/><br>
+      <a href="https://go.copilotkit.ai/GitHubSpreadsheet">
+        <img alt="Presentation-Demo" src="https://github.com/CopilotKit/CopilotKit/assets/131273140/871e4c9c-0ced-490b-9e3f-8594de7c5c89" width="240px" style="max-width:100%; border-radius: 10px;"/>
      </a>
    </td>
    <td align="center" valign="top">
-      PowerPoint + Copilot + Voice <br/>
-      <a href="https://github.com/CopilotKit/demo-presentation-voice">https://github.com/CopilotKit/demo-presentation-voice</a> <br/><br>
-      <a href="https://github.com/CopilotKit/demo-presentation-voice">
-        <img alt="Presentation-Voice" src="https://github.com/CopilotKit/CopilotKit/assets/131273140/6e1a448b-d153-431f-8132-46a668d8a0d1" width="200px" style="max-width:100%; border-radius: 10px;"/>
+      🕹️ PowerPoint Clone + Copilot + Voice Control <br/>
+      <a href="https://go.copilotkit.ai/GitHubPresentationVoice">https://github.com/CopilotKit/demo-presentation-voice</a> <br/><br>
+      <a href="https://go.copilotkit.ai/GitHubPresentationVoice">
+        <img alt="Presentation-Voice" src="https://github.com/CopilotKit/CopilotKit/assets/131273140/6e1a448b-d153-431f-8132-46a668d8a0d1" width="240px" style="max-width:100%; border-radius: 10px;"/>
      </a>
    </td>
-<!--     <td align="center" valign="top">
-      Enterprise Onboarding <br/>
-      <a href="https://github.com/CopilotKit/campaign-manager-demo">https://github.com/CopilotKit/campaign-manager-demo</a> <br/><br>
-      <a href="https://github.com/CopilotKit/campaign-manager-demo">
-        <img alt="Presentation-Demo" src="https://github.com/CopilotKit/CopilotKit/assets/746397/3cea8976-55bd-4687-aa53-1ce3b3a41643" width="200px" style="max-width:100%; border-radius: 10px;"/>
-      </a>
-    </td> -->
  </tr>
 </table>

-## Components
+## Building Blocks

-🌟 **\<CopilotChat />:** <br />
-Build **app-aware AI chatbots** that can "see" the current app state + take action inside your app. <br />
-The AI chatbot can talk to your app frontend & backend, and to 3rd party services (Salesforce, Dropbox, etc.) via plugins. <br />
-Supports generative UI. Start in seconds:
+> 💡 Want to learn more? Check out the [CopilotKit Documentation](https://docs.copilotkit.ai?ref=github_readme).

-🌟 **\<CopilotTextarea />:** <br />
-Drop-in replacement for any `<textarea />.` AI-assisted text generation. <br />
-Autocompletions + AI editing + generate from scratch. Grounded on your users' data and Copilot application context.<br/>
-Simply change `textarea` to `CopilotTextarea`.
+### 🧩 Components

-🌟 **In-App Agents (powered by LangChain):** <br />
-Give agents access to realtime application context, and let agents take action inside applications.
+- [**`<CopilotTextarea />`**](https://docs.copilotkit.ai/reference/components/CopilotTextarea?ref=github_readme): An AI-powered textarea with autocompletions and AI-powered insertions/edits.
+- [**`<CopilotPopup />`**](https://docs.copilotkit.ai/reference/components/CopilotPopup?ref=github_readme): AI-powered chat floating chat popup component.
+- [**`<CopilotSidebar />`**](https://docs.copilotkit.ai/reference/components/CopilotSidebar?ref=github_readme): AI-powered chat sidebar component.
+- [**`<CopilotChat />`**](https://docs.copilotkit.ai/reference/components/CopilotChat?ref=github_readme): AI-powered plain chat component.

-🌟 **Co-Agents (powered by LangChain. Coming soon.):** <br />
-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**.
+### ⚡️ Hooks

-## How does it work
+- [**`useCopilotReadable`**](https://docs.copilotkit.ai/reference/hooks/useCopilotReadable?ref=github_readme): Provide in-app state and any other information to your Copilot.
+- [**`useCopilotAction`**](https://docs.copilotkit.ai/reference/hooks/useCopilotAction?ref=github_readme): Enable your Copilot to perform actions and render custom-generated UI in the chat.
+- [**`useCopilotChat`**](https://docs.copilotkit.ai/reference/hooks/useCopilotChat?ref=github_readme): Directly interact with the Copilot chat instance to add messages and manipulate the chat history.
+- [**`useCopilotChatSuggestions`**](https://docs.copilotkit.ai/reference/hooks/useCopilotChatSuggestions?ref=github_readme): Integrate AI-powered chat follow-up suggestions that are aware of your app's state and chat history.

-**Define the following simple entry-points** into your application, and the CopilotKit🪁 execution engine takes care of the rest!
+## Contributing

- **Application state** (frontend + backend + 3rd party)
- **Application interaction** (via plain typescript code, frontend + backend)
- **Purpose-specific LLM chains**
- and more.
+Thanks for your interest in contributing to CopilotKit! 💜

-## Installation
+We value all contributions, whether it's through code, documentation, creating demo apps, or just spreading the word.

-```bash
-npm i @copilotkit/react-core @copilotkit/react-ui @copilotkit/react-textarea
-```
+Here are a few useful resources to help you get started:

-## Getting started
+- For code contributions, [check out the contribution guide](https://docs.copilotkit.ai/code-contributions/how-to-contribute?ref=github_readme).
+- For documentation-related contributions, [check out the documentation Contributions guide](https://docs.copilotkit.ai/code-contributions/how-to-contribute?ref=github_readme).
+- Want to contribute but not sure how? [Join our Discord](https://discord.gg/6dffbvGU3D) and we'll help you out!

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

-## Demo
+> 💡 **NOTE:** All contributions must be submitted via a pull request and be reviewed by our team. This is to ensure that all contributions are of high quality and align with the project's goals.

-**3-min showcase + 3-min implementation tutorial:**
+## Get in touch

-[CopilotKit_Demo_Jan_zjgjk0.webm](https://github.com/CopilotKit/CopilotKit/assets/746397/b1749282-a3e4-4ef4-a780-7d03f30edf5b)
+You are welcome to join our [Discord](https://discord.gg/6dffbvGU3D) and chat with our team and other community members.

-## Building blocks
+Additionally, you can reach out to us at [hello@copilotkit.ai](mailto:hello@copilotkit.ai).

-A more comprehensive and up-to-date overview is available in the [docs](https://docs.copilotkit.ai). <br/>
-But roughly:
+## License

-### 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
-
- ✅ `<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 />`
-
-```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 <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 <textarea /> replacement with autocompletions, AI insertions/edits, and generate-from-scratch. <br/>
-Indexed on data provided to the Copilot.
-
-<p align="center">
-  <img src="./assets/CopilotTextarea.gif" width="648" style="border-radius: 15px; max-width="100%"">
-</p>
-
-```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 <CopilotKit >):
-// See below for more features (parent/child hierarchy, categories, etc.)
-useCopilotReadable({
-  description: "The description of your data",
-  value: 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>
-);
-```
-
-## 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! 🎉
-
-We have a dedicated [Contributing](https://docs.copilotkit.ai/contributing/how-to-contribute) section in our documentation with detailed guides on how to get started contributing to CopilotKit.
-
-[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 `<at>` copilotkit.ai
+This repository's source code is available under the [MIT License].