About The Project
Inspiration
The inspiration for this project came from the common frustration of sifting through dense technical documentation to find specific answers. We wanted to create a tool that not only automates this process but also makes the retrieved information actionable and easy to share. The idea was to build a "fact-finder" that leverages the power of modern AI Agents to provide instant, accurate answers and then log them for future reference, turning a tedious task into a seamless experience.
What I Learned
Building this project was a deep dive into the world of full-stack AI development. Key learnings include:
- Full-Stack Integration: Gained hands-on experience in building a monorepo and integrating a Next.js frontend with a Mastra backend.
- AI Agent Development: Learned how to create and configure a sophisticated AI agent using Mastra, including how to define its instructions, tools, and memory.
- Tool and API Integration: Mastered the integration of external APIs and tools into an AI agent's workflow. Connecting to Google Sheets and a documentation search service provided valuable insight into the practical application of AI tools.
- Frontend for AI: Explored how to build an intuitive user interface for an AI application using CopilotKit, focusing on displaying the agent's status and results effectively.
How It's Built
The project is architected as a monorepo to manage the frontend and backend codebases in a single repository.
- Backend: The core of the application is the
mastra-server, which uses the Mastra framework to create and manage the AI agent. The agent is powered by OpenAI'sgpt-4o-miniand is equipped with tools to search the Inkeep documentation and write data to Google Sheets. - Frontend: The user interface is built with Next.js and React. We used CopilotKit to quickly implement a feature-rich chat interface that communicates with the Mastra backend. Tailwind CSS was used for styling.
- Communication: The frontend and backend communicate via an API route. The Mastra server exposes an endpoint that the CopilotKit component on the frontend consumes.
Challenges Faced
- Backend Complexity: Setting up the Mastra agent to correctly use multiple tools in a specific sequence was a challenge. It required careful prompt engineering to ensure the agent first searched for information and then saved it to a Google Sheet.
- Asynchronous UI: Reflecting the status of the backend agent (e.g., "Searching docs...", "Creating sheet...") in the frontend required careful handling of asynchronous events and state management.
Built With
- mastra
- next
- typescript
Log in or sign up for Devpost to join the conversation.