Miro MCP + Claude Code: Shipping Open Source Features with AI Agents

Miro

Mar 2, 2026

Discover how AI Agents are revolutionizing the open-source engineering lifecycle. In this technical demo, we integrate Claude Code with Miro via the Model Context Protocol (MCP) to bridge the gap between visual planning and production code. Watch as autonomous agents analyze the MCP-Obsidian codebase, gather visual context from a website, and ship a new feature, directly from sticky notes on a board to a live Pull Request.

What you’ll learn:

Visual Issue Management: Pulling GitHub issues into Miro for collaborative triaging.
Agentic Research: Deploying parallel sub-agents (Architect, Code Analyst, and Visual Capture) to build deep product context.
Requirement Synthesis: How Claude "reads" Miro sticky notes to generate production-ready code.
Automated Shipping: Generating a PR and syncing task progress/screenshots back to Miro for full-loop visibility.

⏱️ Timestamps

00:00 – Intro: The Future of Open Source with AI Agents

00:15 – Connecting Claude Code to the MCP-Obsidian Repo

00:25 – Syncing GitHub Issues to the Miro Canvas

01:28 – Agent Orchestration: Researching the Codebase

02:22 – Automating Product Context & User Journeys

03:13 – Visualizing Architecture & Code Snippets in Miro

03:45 – Mapping FAQ Requirements with Sticky Notes

04:07 – AI in Action: Building the Feature & Writing Code

05:35 – Reviewing the Diff & Pull Request (PR) Creation

06:18 – Visual Validation: Automated Screenshots of the Result

07:08 – Final Sync: Closing the Dev Loop in Miro