wehub-resource-sync
58 lines
1.6 KiB
Markdown
58 lines
1.6 KiB
Markdown
This is a demo that showcases using CopilotKit to build a simple Todo app.
|
|
|
|
## Run the live demo
|
|
|
|
Want to see CopilotKit in action? Click the button below to try the live demo.
|
|
|
|
<a href="https://todo-demo-phi.vercel.app">
|
|
<img src="./public/screenshot.png" alt="Todo Demo Screenshot" width="600px">
|
|
</a>
|
|
|
|
<a href="https://todo-demo-phi.vercel.app">
|
|
<img src="./public/run-demo-cta.png" alt="Run the live demo" width="250px">
|
|
</a>
|
|
|
|
## Deploy with Vercel
|
|
|
|
To deploy with Vercel, click the button below:
|
|
|
|
[](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FCopilotKit%2Fdemo-todo&env=NEXT_PUBLIC_COPILOT_CLOUD_API_KEY&project-name=copilotkit-demo-todo&repository-name=copilotkit-demo-todo)
|
|
|
|
## How to Build: a To-Do list app with an embedded AI copilot
|
|
|
|
Learn how to create a To-Do list app with an embedded AI copilot. This tutorial will guide you through the process step-by-step.
|
|
|
|
Tutorial: [How to Build: a To-Do list app with an embedded AI copilot](https://dev.to/copilotkit/how-to-build-an-ai-powered-to-do-list-nextjs-gpt4-copilotkit-20i4)
|
|
|
|
## Add your OpenAI API key
|
|
|
|
Add your environment variables to `.env.local` in the root of the project.
|
|
|
|
```
|
|
OPENAI_API_KEY=your-api-key
|
|
```
|
|
|
|
## Install dependencies
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
## Run the development server
|
|
|
|
```bash
|
|
npm run dev
|
|
```
|
|
|
|
## Open the demo
|
|
|
|
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
|
|
|
## The Copilot-Specific parts of the code:
|
|
|
|
1. Notice `<CopilotKit />` and `<CopilotPopup />` in `page.tsx`
|
|
|
|
2. Notice `useCopilotReadable` in `page.tsx`
|
|
|
|
3. Notice the 2 `useCopilotAction` in `page.tsx`
|