Alem Tuzlak
79ce60c580
Replace eslint and prettier with oxlint and oxfmt for faster linting and formatting across the monorepo. Remove all eslint and prettier configs, dependencies, and related packages. Add .oxlintrc.json and .oxfmtrc.json for the new tooling. Update CI workflows and lefthook hooks accordingly. Reformat codebase with oxfmt. https://claude.ai/code/session_01GMkSf29p78HuMR1mbXn8He
🧮 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.
Run Demo →🛠️ 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:
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
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
-
Look for
/api/copilotkit/route.tsand/api/copilotkit/tavily.ts- for the research agent integrated into the spreadsheet -
Look for
useCopilotReadableto see where frontend application context is being made accessible to the Copilot engine -
Search for
updateSpreadsheet,appendToSpreadsheet, andcreateSpreadsheetto see application interaction hooks made available to agents.
📚 Learn More
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.