{"id":30194039,"url":"https://github.com/copilotkit/mastra-pm-canvas","last_synced_at":"2025-08-13T02:08:52.545Z","repository":{"id":306301096,"uuid":"1025143963","full_name":"CopilotKit/mastra-pm-canvas","owner":"CopilotKit","description":null,"archived":false,"fork":false,"pushed_at":"2025-07-24T22:00:48.000Z","size":419,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-24T23:01:21.943Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CopilotKit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-07-23T19:45:15.000Z","updated_at":"2025-07-24T22:00:52.000Z","dependencies_parsed_at":"2025-07-24T23:01:31.635Z","dependency_job_id":"607a935d-4def-455c-a998-8e7ef22faed2","html_url":"https://github.com/CopilotKit/mastra-pm-canvas","commit_stats":null,"previous_names":["copilotkit/mastra-pm-canvas"],"tags_count":null,"template":false,"template_full_name":"CopilotKit/with-mastra","purl":"pkg:github/CopilotKit/mastra-pm-canvas","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CopilotKit%2Fmastra-pm-canvas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CopilotKit%2Fmastra-pm-canvas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CopilotKit%2Fmastra-pm-canvas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CopilotKit%2Fmastra-pm-canvas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CopilotKit","download_url":"https://codeload.github.com/CopilotKit/mastra-pm-canvas/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CopilotKit%2Fmastra-pm-canvas/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270166108,"owners_count":24538445,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-13T02:00:09.904Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-13T02:08:47.280Z","updated_at":"2025-08-13T02:08:52.492Z","avatar_url":"https://github.com/CopilotKit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AG-UI Mastra Workshop\n\n![preview](./assets/preview.png)\n\nA comprehensive workshop demonstrating **AG-UI** (Agent User Interaction) protocol with **Mastra** integration. This workshop shows how to build sophisticated AI applications with shared state, multiple client interfaces, and rich user interactions.\n\n## What is AG-UI?\n\nAG-UI is a protocol for communicating between AI Agents and Users, enabling:\n- **Shared-State**: Real-time synchronization between agents and UI components\n- **Multiple Clients**: Build web apps, CLI tools, mobile apps - all connected to the same agent\n- **Generative UI**: Agents can render dynamic interface components\n- **Tool Integration**: Seamless integration of agent tools with user interfaces\n\nLearn more: [@ag-ui/mastra on npm](https://www.npmjs.com/package/@ag-ui/mastra)\n\n## Workshop Structure\n\nThis workshop is organized into **3 progressive steps**, each building on the previous to demonstrate different aspects of AG-UI:\n\n### 🎯 **Step 1**: Basic AG-UI Integration\n**Branch**: `git checkout step-1`\n\n**Link**: https://github.com/CopilotKit/mastra-pm-canvas/tree/step-1\n\n**Focus**: Core concepts and simple state management\n\n- Simple agent state (proverbs array)\n- Basic CopilotKit integration with Mastra\n- Frontend actions and generative UI\n- CLI and Web clients with same agent\n\n### 🎯 **Step 2**: Complex State \u0026 Agent Behavior  \n**Branch**: `git checkout step-2`\n\n**Link**: https://github.com/CopilotKit/mastra-pm-canvas/tree/step-2\n\n**Focus**: Structured data and agent personas\n\n- Complex state schemas with Zod validation\n- Product manager agent with specific instructions\n- Working memory with structured data types\n- Enhanced CLI debugging with state snapshots\n\n### 🎯 **Step 3**: Production-Ready Application\n**Branch**: `git checkout step-3`\n\n**Link**: https://github.com/CopilotKit/mastra-pm-canvas/tree/step-3\n\n**Focus**: Full-featured project management interface\n\n- Complete kanban board and team management UI\n- Rich React component architecture\n- Professional project management interface\n- Multiple interaction patterns (modals, drag-drop, etc.)\n\n## Key Learning Outcomes\n\nBy completing this workshop, you'll understand:\n\n- ✅ **Multi-Client Architecture**: How to build CLI and web interfaces for the same agent\n- ✅ **Shared-State Management**: How state synchronizes between agents and multiple UI clients\n- ✅ **Agent Design**: Creating agents with personas, tools, and memory\n- ✅ **UI Integration**: Building rich interfaces that react to agent state\n- ✅ **Production Patterns**: Scalable architecture for real-world applications\n\n## Quick Start\n\n### Prerequisites\n\n- Node.js 18+\n- OpenAI API key\n- Package manager (pnpm recommended)\n\n### Setup\n\n1. **Clone and install dependencies**:\n```bash\ngit clone \u003crepository-url\u003e\ncd mastra-pm-canvas\npnpm install\n```\n\n2. **Add your OpenAI API key**:\n```bash\necho \"OPENAI_API_KEY=your-key-here\" \u003e\u003e .env\n```\n\n3. **Choose your starting point**:\n```bash\n# Start from the beginning\ngit checkout step-1\n\n# Or jump to a specific step\ngit checkout step-2\ngit checkout step-3\n```\n\n### Running the Workshop\n\nEach step provides **two different client interfaces** for the same agent:\n\n#### 🌐 **Web Interface** (CopilotKit + React)\n```bash\npnpm dev\n# Opens http://localhost:3000\n```\n\n#### 💻 **CLI Interface** (Terminal-based)\n```bash\npnpm cli\n# Interactive chat in your terminal\n```\n\n**Key Point**: Both interfaces connect to the **same agent** and share **the same state**. This demonstrates AG-UI's power in enabling multiple client types.\n\n## Workshop Navigation\n\n### Step-by-Step Progression\n```bash\ngit checkout step-1    # Basic concepts\n# Work through step-1, then:\n\ngit checkout step-2    # Enhanced state management  \n# Work through step-2, then:\n\ngit checkout step-3    # Full application\n```\n\n### Compare Between Steps\n```bash\n# See what changed between steps\ngit diff step-1 step-2 --name-only\ngit diff step-2 step-3 --name-only\n```\n\n## Architecture Overview\n\n```\n┌─────────────────┐    ┌──────────────────┐    ┌─────────────────┐\n│   Web Client    │    │   Mastra Agent   │    │   CLI Client    │\n│  (CopilotKit)   │◄──►│   + AG-UI        │◄──►│   (Terminal)    │\n│                 │    │                  │    │                 │\n└─────────────────┘    └──────────────────┘    └─────────────────┘\n        │                        │                        │\n        └────────────────────────┼────────────────────────┘\n                                 │\n                         ┌──────────────┐\n                         │ Shared-State │\n                         │   + Memory   │\n                         └──────────────┘\n```\n\n## Technologies Used\n\n- **[Mastra](https://mastra.ai)**: AI agent framework\n- **[AG-UI](https://www.npmjs.com/package/@ag-ui/mastra)**: Agent User Interaction protocol  \n- **[CopilotKit](https://copilotkit.ai)**: React AI interface components\n- **[Next.js](https://nextjs.org)**: React framework\n- **[Zod](https://zod.dev)**: Schema validation\n- **[LibSQL](https://github.com/libsql/libsql)**: SQLite-compatible database\n\n## Support \u0026 Resources\n\n- 📖 [Mastra Documentation](https://mastra.ai/en/docs)\n- 📖 [CopilotKit Documentation](https://docs.copilotkit.ai)\n- 📦 [AG-UI Mastra Package](https://www.npmjs.com/package/@ag-ui/mastra)\n\n## Next Steps\n\nAfter completing this workshop:\n1. Experiment with custom tools and agent instructions\n2. Try building additional client interfaces (mobile, desktop)\n3. Explore more complex agent behaviors and state schemas\n4. Build your own production AG-UI application\n\n---\n\n**Happy Building! 🚀**","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcopilotkit%2Fmastra-pm-canvas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcopilotkit%2Fmastra-pm-canvas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcopilotkit%2Fmastra-pm-canvas/lists"}