copilotkit__copilotkit/community/demos_2025/meal-planner-direct-to-llm.md

🚀 Meal Planner with CopilotKit Direct-to-LLM Integration

📝 Intelligent Recipe Planning and Management

This project showcases how to use CopilotKit direct-to-LLM integration to connect a React frontend with any external agent that supports AGUI (Pydantic AI in this case) through a middleware layer.

This example includes a mini meal planner agent configured as a demonstration of the integration.

---

🛠️ Technologies Being Used

Frontend:

• Framework: React 19 - Vite
• UI Components: CopilotKit React UI (@copilotkit/react-ui)
• Styling: Custom CSS

Backend Middleware:

• Runtime: Node/Express.js
• Packages: @copilotkit/runtime, @ag-ui/client

AI Agent:

• Framework: Pydantic AI with FastAPI
• LLM Provider: Google Gemini via Pydantic AI

---

How It Works

• The React frontend uses CopilotKit UI components to provide a chat interface
• User messages are sent to the middleware that exposes a graphql server
• The middleware forwards requests to the Pydantic AI agent using the AG-UI protocol
• The agent processes requests
• Responses flow back through the middleware to the frontend

🌐 App Link

-- NOT HOSTED --

---

🎯 Twitter Post

Link to your Twitter/X post.

---

📸 Screenshot

---

🙋♂️ List your repo here

CopilotKit Direct-to-LLM Pydantic Agent Example