AI :: Agent :: Framework :: CopilotKit :: About :: AG-UI + CopilotKit + Mastra: Build a Project Management Canvas
⪼ Made with 💜 by Polyglot.
This video is a tutorial and informal live coding session aimed at educating developers on how to build a project management "canvas" (think Kanban board) using Maastra (an open-source TypeScript AI agent framework), Copilot Kit (a React UI and agent-to-app plumbing library), and AGUI (an emerging open-source event protocol for agent-user interoperability). The session features leaders from Copilot Kit and Maastra, who demo the end-to-end workflow: wiring up Maastra agents with structured working memory, connecting them to a React frontend, leveraging tool calls from both the backend and frontend, and showcasing how state and workflows sync live between the terminal and the web UI. The intent is to educate and inspire developers to start building agentic apps by showing the architecture, primitives, and real code, while actively fielding community questions.
- Overview of Maastra as a TypeScript-based agent framework with memory, tools, workflows, and agent networks.
- Introduction to Copilot Kit for building agentic UIs in React, providing both prebuilt and headless components.
- AGUI is explained as a protocol standardizing events between agents and UIs, enabling client-agnostic agent integration (React, Svelte, mobile, etc.).
- Step-by-step demo of creating a Kanban-style board powered by a Maastra agent, with Copilot Kit handling the UI.
- Shows how frontend tool calls (like changing theme color) can be triggered and handled, with agents invoking them via AGUI.
- Demonstrates "generative UI"—having the agent generate UI elements (like weather cards) via tool calls.
- Deep dive into Maastra's structured working memory using Zod schemas, allowing agents to maintain and update project/user/task state.
- Real-time sync between backend agent state and frontend UI—changes in state are surfaced via AGUI deltas and Copilot Kit hooks.
- Highlights type safety and tight TypeScript integration between agent memory, schema, and frontend state rendering.
- Explanation of the relationships between Maastra workflows, tools, and agent networks—flexible building blocks for complex agentic apps.
- Details how AGUI events and protocol primitives (like tool calls, run started/finished, deltas) enable live streaming and user interactivity.
- Comparison of AGUI, MCP, and A2A protocols, each targeting different aspects of agentic ecosystems (tools/resources, agent-to-agent, agent-to-user).
- Audience questions address topics like tool call binding, security of front-end tools, Copilot Kit state hooks, and agent network supervision.
- Discussion of rendering workflows as reasoning steps in the UI, and the challenges of integrating multiple entry points and complex agent networks.
- Tips for contributing, community links, hackathons, and next steps for Maastra and AGUI (SDKs for other languages, template building, working groups).
- Maastra's design lets developers use any server (not just Hono) and build custom integrations.
- CLI demo shows same agent logic working in terminal and UI, emphasizing cross-platform agent deployment.
- Community engagement via Discord, open-source hackathons, and a culture of rapid iteration and feedback.