ContextQMD
Back to Copilotkit

README

examples/showcases/spreadsheet/README.md

1.57.02.1 KB
Original Source

🧮 CopilotKit Spreadsheet Demo

This is a demo that showcases using CopilotKit to build an Excel like web app.

🧑‍💻 Run the live demo

Want to see CopilotKit in action? Click the button below to try the live demo.

<a href="https://x.com/copilotkit](https://spreadsheet-demo-tau.vercel.app/" target="_blank"> Run Demo → </a> </br>

🛠️ How to Build: A spreadsheet app with an AI-copilot

Learn how to create a powerful spreadsheet app using CopilotKit. This tutorial will guide you through the process step-by-step.

Tutorial: How to Build: A spreadsheet app with an AI-copilot

🚀 Getting Started

1. install the needed package:

bash
npm i

2. Set the required environment variables:

copy .env.local.example to .env.local and populate the required environment variables.

3. Run the app

bash
npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

4. Use the Copilot

Ask it to build a budget spreadsheet.

🔍 Zoom in on the CopilotKit code

  1. Look for /api/copilotkit/route.ts and /api/copilotkit/tavily.ts - for the research agent integrated into the spreadsheet

  2. Look for useCopilotReadable to see where frontend application context is being made accessible to the Copilot engine

  3. Search for updateSpreadsheet, appendToSpreadsheet, and createSpreadsheet to see application interaction hooks made available to agents.

📚 Learn More

To learn more about CopilotKit, take a look at the following resources: