A Mastra showcase demonstrating how to integrate Mastra with popular AI UI frameworks. Compare implementations side-by-side and choose the best approach for your project.

This project provides working examples of Mastra integrated with three major AI UI frameworks, plus demonstrations of advanced patterns like generative UIs, workflows, and agent networks. Use this as a reference to understand how Mastra works with different UI approaches and pick the one that fits your needs.

• Framework Comparisons: See Mastra working with AI SDK, Assistant UI, and CopilotKit
• Generative UIs: Build custom UI components for tool responses
• Workflows: Implement multi-step AI workflows with streaming
• Agent Networks: Coordinate multiple AI agents for complex tasks
• Client SDK Integration: Use Mastra's Client SDK with different frameworks

• Node.js 20 or higher
• OpenAI API key

1. Clone and install dependencies:

   git clone [email protected]:mastra-ai/ui-dojo.git
   cd ui-dojo
   pnpm install

2. Set up environment variables:

   cp .env.example .env
   # Edit .env and add your API key

3. Start the development server:

   pnpm run dev

   This runs both the Mastra server and Vite dev server concurrently.

Compare three different approaches to building chat interfaces with Mastra:

• AI SDK (src/demos/ai-sdk.tsx) - Built with Vercel's AI SDK and @mastra/ai-sdk
• Assistant UI (src/demos/assistant-ui.tsx) - Built with Assistant UI's Thread components
• CopilotKit (src/demos/copilot-kit.tsx) - Built with CopilotKit's Chat component

Explore advanced Mastra capabilities:

• Generative UIs (src/demos/ai-sdk/generative-user-interfaces.tsx) - Custom UI components for tool responses
• Workflows (src/demos/ai-sdk/workflow.tsx) - Multi-step workflows with the activities workflow
• Agent Networks (src/demos/ai-sdk/network.tsx) - Multiple agents coordinating through a routing agent

See how to use Mastra's Client SDK with each framework:

• AI SDK + Client SDK (src/demos/client-sdk/ai-sdk.tsx)
• Assistant UI + Client SDK (src/demos/client-sdk/assistant-ui.tsx)
• CopilotKit + Client SDK (src/demos/client-sdk/copilot-kit.tsx)

Example agents demonstrating different capabilities:

• Weather Agent - Provides weather information using external tools
• Ghibli Agent - Studio Ghibli themed responses with image generation
• Routing Agent - Coordinates between multiple specialized agents
• Background Color Agent - Demonstrates UI manipulation through tools

• Weather Tool - Fetches weather data for locations
• Ghibli Tool - Generates Studio Ghibli style images
• Color Change Tool - Updates UI background colors

• Activities Workflow - Multi-step workflow for planning activities based on weather

• Make sure you've created a .env file from .env.example
• Verify your API key is valid and properly formatted
• Restart the dev server after setting environment variables

• Check if another Mastra or Vite process is running
• Kill the process or change the port in vite.config.ts

• Check the browser console and terminal for errors
• Verify your OpenAI API key has sufficient credits
• Ensure the Mastra server is running (check http://localhost:4111)

• pnpm run dev - Start both Mastra and Vite servers
• pnpm run mastra:dev - Start only Mastra server
• pnpm run vite:dev - Start only Vite dev server
• pnpm run vite:build - Build for production
• pnpm run lint - Lint code
• pnpm run format - Format code with Prettier

Modify the agents, tools, and workflows in src/mastra/ to experiment with different capabilities. Each demo can be found in src/demos/ and uses components from src/components/.

• Mastra Documentation
• AI SDK Documentation
• Assistant UI Documentation
• CopilotKit Documentation