This is a demo that showcases using CopilotKit to build an Excel like web app.
Want to see CopilotKit in action? Click the button below to try the live demo.


To deploy with Vercel, click the button below:
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
npm i
copy .env.local.example
to .env.local
and populate the required environment variables.
⚠️ Important: Not all users have access to the GPT-4 model yet. If you don't have access, you can use GPT-3 by settingOPENAI_MODEL
togpt-3.5-turbo
in the.env.local
file.
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.
TODO add details what to do as a user
-
Look for
/api/copilotkit/route.ts
and/api/copilotkit/tavily.ts
- for the research agent integrated into the spreadsheet -
Look for
useCopilotReadable
to see where frontend application context is being made accessible to the Copilot engine -
Search for
updateSpreadsheet
,appendToSpreadsheet
, andcreateSpreadsheet
to see application interaction hooks made available to agents.
To learn more about CopilotKit, take a look at the following resources:
- CopilotKit Documentation - learn about CopilotKit features and API.
- GitHub - Check out the CopilotKit GitHub repository.
- Discord - Join the CopilotKit Discord community.