Building a Recipe Modifier Tool with Next.js, React, and CopilotKit

Title: Building a Recipe Modifier Tool with Next.js, React, and CopilotKit

Ever wondered how you could modify a recipe in just a few clicks? This project lets you generate instant recipe modifications based on different categories—whether you want to make it vegetarian, healthier, or simply add a twist. Here’s how it’s built with Next.js, React, and the AI power of CopilotKit!

Project Overview

The Recipe Modifier Tool allows users to:

• Enter a recipe and request different modifications.
• Choose from options like "Modify Recipe," "Veg," "Non-Veg," or "Healthy Diet."
• View generated suggestions in a styled markdown format.

Tech Stack

• Next.js for server-side handling and API routes.
• React for building a dynamic UI.
• CopilotKit for integrating AI-driven actions.
• React Markdown to render suggestions in markdown format.

Code Breakdown

RecipeModifier Component

The RecipeModifier component uses useCopilotReadable to make the recipe readable by CopilotKit and useCopilotAction to trigger the modification process. When a user enters a recipe and selects a modifier, the app fetches an AI-generated response via the /api/getSuggestions endpoint.

API Route (pages/api/getSuggestions.ts)

The API route accepts the recipe and modifierType, sends a prompt to CopilotKit’s AI, and returns a suggestion based on the selected modification type.

Key Takeaways

1. CopilotKit Integration makes it easy to add AI-driven actions to your app.
2. React Markdown enables real-time formatted output, enhancing readability.
3. Next.js API Routes are a great way to handle AI requests within your frontend.

Feel free to experiment with additional modifiers or try different models in CopilotKit. Let me know in the comments if you try it out or have suggestions!