26:24Build Great Products · Tutorial
Stop Using Obsidian. This Simple Second Brain Setup Actually Works
A 26-minute live walkthrough of the five-folder AI-maintained knowledge base that runs itself.
June 4thThe argument in one line.
Markdown files in a local folder are a single-player context strategy; Miro Canvas turns agent context into a multi-player cloud resource every coding agent on the team can read and write via MCP.
Read if. Skip if.
READ IF YOU ARE…
- You are building an AI-assisted product on a team and frustrated that agents on different machines start from different context.
- You already use Cursor or Codex and want your agent to reference design artifacts without manual copy-pasting.
- You are a product manager who wants PRDs, user journeys, and prototypes to live in one collaborative place rather than scattered markdown files.
- You want to generate clickable HTML prototypes directly from requirements documents inside a whiteboard tool.
SKIP IF…
- You are a solo developer with no team and your local context files are working fine — the collaboration angle does not apply.
- You need agent context that is version-controlled and reviewable in a pull request — Miro Canvas is not a git-based workflow.
The full version, fast.
Most teams manage AI agent context through scattered local markdown files that only one machine can see at a time. Miro Canvas repositions the whiteboard as a cloud context layer: you import a PRD, ask the built-in AI sidekick to generate onboarding best practices, combine both documents into a step-by-step flow, and produce a clickable HTML prototype — all on the shared canvas. Connect Cursor or Codex via the Miro MCP plugin and your coding agent reads every artifact and can write new ones without leaving the IDE. The result is that every team member's AI agent starts from the same up-to-date context instead of whoever last updated a local file.
Free for members
Chat with this breakdown — free.
Sign in and you get 23 free chat messages on us — ask for the hook, quote a framework, find the exact transcript moment, generate a markdown action plan. Bring your own key when you want unlimited.
Create a free account →Where the time goes.
00:00 – 01:15
01 · The problem with local markdown context
Hook and agenda: markdown files are single-player, Miro Canvas offers a cloud alternative
01:16 – 03:20
02 · Miro Canvas overview
What Miro is, what the new Canvas does for AI agents, why shared cloud context matters for teams
03:21 – 04:19
03 · Importing a PRD
Demo: dragging a markdown PRD file onto the canvas — it renders as a readable document object
04:20 – 05:51
04 · Generating onboarding best practices
Miro AI sidekick researches and produces a best-practice document for onboarding flows
05:52 – 07:50
05 · Combining docs into an onboarding flow
Sidekick reads PRD + best-practice doc to output a step-by-step onboarding plan; manual-selection quirk noted
07:51 – 11:12
06 · Generating an interactive HTML prototype
Miro sidekick creates a clickable multi-screen prototype from the onboarding documents
11:13 – 12:49
07 · Connecting Miro to Cursor via MCP
How to install the Miro plugin in Cursor's marketplace and browse the canvas from inside the IDE
12:50 – 15:34
08 · Cursor agent builds on the Miro canvas
Cursor agent reads existing prototype HTML from Miro and creates a light-mode variant on the canvas
15:35 – 16:55
09 · Miro as shared team context layer
Synthesis: Miro as common ground for PRDs, diagrams, prototypes — every agent reads the same source of truth
16:56 – 17:19
10 · Final thoughts and CTA
Host acknowledges sponsorship, expresses genuine enthusiasm, directs viewers to school.com/aiapps
Lines worth screenshotting.
- Markdown files on a local machine are a single-player context strategy — the moment a second agent or teammate needs the same context, local files become the bottleneck.
- Miro Canvas acts as an MCP server your AI coding agent connects to, reading PRDs, mermaid diagrams, HTML prototypes, and sticky notes without manual copy-pasting.
- The Miro AI sidekick and Cursor are not mutually exclusive — use the sidekick for canvas manipulation and Cursor for code generation against the same board simultaneously.
- Interactive HTML prototypes generated inside Miro are shareable immediately because they live in the cloud canvas, not a local file that expires when the browser tab closes.
- Comments and sticky notes on a Miro canvas are part of the agent-readable context — a PM leaving a note is effectively writing an instruction to every agent connected to that board.
- The Cursor agent can create new artifacts on a Miro canvas without switching apps — the MCP plugin handles the full round-trip from prompt to canvas update.
- The current Miro sidekick requires manually selecting documents on the canvas before prompting — the Cursor MCP path does not have this limitation.
- This is a sponsored placement but the host explicitly acknowledges it and frames his enthusiasm as a genuine opinion change — a rare moment of honest disclosure in the AI tool review space.
Your agent context belongs in the cloud, not on your hard drive.
WHAT TO LEARN
When the context your AI agent needs is stored locally, it is invisible to every other agent and every other teammate — moving it to a shared canvas is a structural fix, not a workflow preference.
- Local markdown files create a single point of failure for team-based AI workflows — if your colleague's agent needs context from your machine, you have already lost.
- Connecting a whiteboard tool to your coding agent via MCP means your agent can read design artifacts, user journeys, and prototypes without copy-pasting anything between windows.
- Interactive HTML prototypes that live in a cloud canvas can be shared with a link and accessed by any team member's agent immediately — no build step, no file transfer.
- Sticky notes and comments left by humans on a shared canvas are agent-readable context too — product decisions made in a whiteboard session automatically propagate to every connected agent.
- The distinction between the built-in AI sidekick and an external agent connected via MCP matters: the sidekick is better at canvas manipulation, the external agent is better at code-level tasks — they are complementary.
- Current limitations are real but predictable: the Miro sidekick requires manual document selection, and agent-generated prototypes will have imperfections. These are version-one rough edges, not fundamental design flaws.
Terms worth knowing.
- Agent-readable context
- Any file or artifact structured so an AI coding agent can parse and act on it — markdown, HTML, mermaid diagrams, images. The term contrasts with formats agents cannot consume directly.
- MCP (Model Context Protocol)
- An open protocol that lets AI coding tools like Cursor and Codex connect to external services and read or write data. When Miro installs an MCP server, your agent can query the canvas like an API.
- Miro AI Sidekick
- Miro's built-in AI assistant that runs inside the canvas, generating documents, combining existing canvas objects, and producing HTML prototypes on request — distinct from an external agent connected via MCP.
- PRD (Product Requirements Document)
- A structured document describing what a product or feature should do, who it is for, and what success looks like. Used in this video as the primary input to the Miro Canvas workflow.
Things they pointed at.
Lines you could clip.
00:00
“If you're building with AI, there's a high chance that you're using a lot of markdown files to manage the context for your AI agents.”
16:16
“I know this might be a sponsored video by Miro, but I'm still super excited about the direction that they're going with their platform.”
16:25
“it kind of changed my mind from thinking about Miro as this old school kind of software... to basically being like a shared context layer across your entire team for your AI agents”
Word for word.
Read-along
Don't just watch it. Burn it in.
See every word as it's spoken — crank it to 2× and still catch all of it. The same dual-channel trick behind Amazon's Kindle + Audible.
metaphoranalogy
00:00If you're building with AI, there's a high chance that you're using a lot of markdown files to manage the context for your AI agents. But what if there was a better way to not only give your AI agents markdown files as context, but to give your agents access to any type of context it needs, from HTML prototypes to mermaid diagrams, images, flowcharts, and much more.
00:22And not only that, what if you could collaborate on that context with your team members? Well, that is exactly what Miro is trying to do with the latest version of their Miro Canvas. And in this video, we're gonna break down what exactly is agent readable context, what types of context can you give your AI agents, how to build context collaboratively in Miro, and how to use your context to actually build things with AI.
00:47And we're gonna do this inside of Cursor. I'm gonna show you exactly how to use Miro in combination with Cursor as well. You don't know me, my name is Chris, for the last fifteen years, I've been designing apps and advising startups on product and design.
00:59And if you are building with AI, I've got a community helping people do just that. Well, I've just launched a new five day AI app launch challenge. So if you wanna actually build and launch your application using AI, then head over there to find out more.
01:12And otherwise, let's get straight into Miro and see what it can do. So this is the new Miro Canvas. And if you're not familiar with Miro, Miro is basically a Canvas tool that is collaborative with your team members so that you can create any type of kind of exploration or whiteboard for your product if you're figuring things out like what a user persona is, what the user journey for your app might look like or for a new feature might be.
01:35Give people a place to vote on different stuff and create tables and forms and all of these different kind of ways of visualizing information about your project or about the products that you're building. And I had the chance to attend Miro's Canvas twenty six event and find out more about what they're actually building into the Canvas that makes it so friendly to AI agents and how they're thinking about the future of building context for AI agents, not just individually on a local computer, but also across a team.
02:02So we need a way for this context to exist in the cloud. We need a canvas for your team members and other people to be able to interact with the same context. And we need a way of connecting your AI agent tool, I e cursor or codex or Claude code, to your canvas so that it can access that context and able to build things in a better way.
02:22And also make sure that that context is the same across all of your team members. So this is the new Miro canvas. And on the face of it, when you jump into the new Miro canvas, you're presented with a similar style text input field that you've seen across a bunch of different AI apps where you basically ask for whatever you want and then it will create that on the canvas for you.
02:41So it gives you a few prompts here to get started like brainstorm ideas, map user journey, plan roadmap, create research plan, create requirements document. What I'm gonna do here is I'm actually gonna start from a PRD that I've already got. So I want to explore some options for the onboarding flow for my app plan building.
02:58I wanna get an idea of what steps I should include, what steps I shouldn't include, and how I can optimize that onboarding flow in order to convert people to pay. And then once I've done that, once I've got that prototype, I wanna be able to bring those diagrams and bring that prototype back into my code project so that I can actually build following that exact steps as I've outlined in this canvas.
03:21Uh, and so let's go and grab the PRD and I'll drop it onto this canvas. And so I'm just gonna click on the text, uh, element here. I'm just gonna put some text on the page.
03:30What I'm gonna do is I'm just gonna drop the PRD file, the markdown file onto this page, and you can see it's adding the PRD to this canvas now. So I've got my full PRD here for this project. It's called content engine, which is just a little placeholder name for projects that I'm building.
03:46And it's got all of the information throughout this entire PRD here. And what we're gonna do is we're gonna use this PRD to basically inform what the onboarding flow should look like.
03:57Now, this is a huge document here. If I go from this document using the Miro AI sidekick, and we can make this document shorter as well if we want to.
04:06This is just the the PRD for this project. What I'm gonna do is I'm gonna get it to basically outline the steps for this onboarding flow. Now before I actually do that, I want to give it some best practice for what a good onboarding flow might look like.
04:19So you could go into the AI sidekick here and actually ask it, um, can you research and create a document on the Canvas that outlines the best practice for an onboarding flow for a web app with monthly subscription pricing. I'm just gonna send that off to Miro's AI sidekick.
04:37Now this is one way that you can interact with the Canvas using AI inside of Miro is to use Miro's AI sidekick. The other way that we could do this is if we wanted to connect a tool like cursor or codex to Miro using the MCP, we could go into those tools, and I'll show you how to do this in a second.
04:53And we could actually use the cursor agent or the codex agent to interact with Miro and do these thing do these things for us as well. But for now, let's just use the Miro sidekick to add this to the canvas. And what we're gonna do is we're gonna combine the information in the PRD with the research about onboarding flow best practice, And we're gonna get it to then create a list of ideal steps and give us a rationale, a breakdown of why those steps would work in our onboarding flow.
05:21And once we've done that, we can turn that into an interactive prototype in HTML that we then pull back into our project.
05:27So you can see the Miro AI sidekick working on our document here, and it's writing the onboarding best practices here. So core principles, optimize time to value, aim for two to five minutes to first value, prioritize activation over checklist completion, flow design best practices, critical met metrics, implementation strategies, all of this information.
05:47This is really gonna help us to basically make a better onboarding flow here. So now that we've got this, let's click add to Canvas.
05:55That's gonna add that to Canvas. I'm just gonna put this over here with the document. What I'm gonna then ask the Miro sidekick to do here is to can you combine the PRD for this app with the onboarding best practice document to create a new document on the Canvas which lists the onboarding steps that we should create for this app?
06:16We're gonna send that off to the Miro sidekick here. And then Miro is gonna read both of those documents and then it's gonna create a guide for us of all of the steps that we should include in our onboarding flow. And I actually can't see the PRD document on the board right now.
06:29I think they're gonna they should definitely improve that in the future so they can read any documents. I'm just gonna select these two objects and then add in the same prompt here. So you have to select the objects on the canvas for now.
06:41If we were using the cursor agent or the codex agent, it would be able to see those documents on the canvas through the MCP. So there's some slight quirks with this feature at the moment. And you can see now that the Miro sidekick here is adding in an outline of our onboarding flow, basically using these two documents for this app.
06:59So you can see here, Miro the Miro sidekick is basically writing down all of these steps in our onboarding flow that we should be creating here. So we've got step one, accept invitation and create an account. And so the user action is entering name and password.
07:13Step two is to pick a content type. So the dashboard shows seven cards with icons or descriptions, and then they click one content type aligned to their immediate needs.
07:21They fill in a brief and generate, copy the output, and then reengagement for drop offs here. It's got some ideas of behavioral triggers that we should create, overall onboarding metrics, preconditions, safeguards. And, again, if you wanted to use a specific AI model for this instead of the Miro sidekick, you could just use your agent from cursor or canvas to actually just create this on the Miro canvas for you.
07:43So now what we're gonna do is we're gonna select the client onboarding and we're gonna select the content engine PRD here. And then I'm gonna get Miro to create a prototype on the Canvas of the onboarding flow.
07:57And this is gonna be an interactive prototype in HTML that we can click through and we can make any changes to, and then we can pull that back into our build tool, cursor codecs, to actually build that for us inside of our application. So let's create the process type here.
08:10Can you create a prototype for the onboarding flow from the onboarding document based on this app idea from the PRD?
08:20We're gonna send that off to the Miro sidekick and Miro is going to create a prototype here in HTML that we can click through and that is interactive of our full onboarding flow here. Now whilst this is actually happening here, what I can do is come back to some of this stuff and read some of the documents and leave some comments on things.
08:39And this is where the team collaboration element comes into play because this context, now it lives in this Miro Canvas, is able to be shared with all of our team members, and they can use this context with their AI agent just by connecting the MCP to their AI agent tool so that everyone has the exact same context. And so I can come in here and leave a comment on this section.
09:01So say, like, not sure about this. Let's change it to six steps instead.
09:08And the great thing about doing this as we go through is that the Miro sidekick is going to have all of the context of all of these comments as well. I can add stickies on any part of this to add some notes about what we're doing here. So we might wanna add a note here around, like, changing this to yearly subscriptions, not monthly.
09:29So we can add notes here across the canvas, and again, the Miro sidekick is gonna have context of all of this information that we're adding to the document. We can even select these two elements and say, can you take the considerations from the post it and rewrite the onboarding best practices here? But let's wait for Miro to finish building this prototype for us.
09:49You can see it's oh, it's so you can see it's created the prototype here already. So we've got our prototype for content engine. So we've got our, basically, our sign up form along with a bunch of different components underneath as well.
10:01So validating your invitation, invitation expired, create your account with different states here that have been added in the prototype. All of this prototype is hooked up as well.
10:11So then we come into the dashboard. You can choose your different types of content that you wanna create, and we can generate this type this content in the app as well. So website page copy, we're gonna generate some some web page copy here.
10:24It's got the loader at the bottom. And if we want to go into this prototype, we can then basically click on these.
10:32I'm gonna add this to the canvas first. Let's add that to the canvas. I'm gonna come over to here, click play, and we can preview this prototype.
10:40Basically, go through this entire journey and see exactly what it looks like, how you go through this, and how we can review the output in this app. And we can share that prototype.
10:51All of your team has access to that because it's on the mirror canvas and not just stored locally in the local HTML prototype, for example. And now what we can do is go over to cursor, and I'm gonna show you how to connect this to cursor as well using the cursor plug in. And then you can start to even build from the mirror canvas inside of cursor in your projects.
11:11So I've got Cursor open here and I'm inside the content engine, which is the it's ContentOS, but this is the content engine project, basically. I've got a new chat open here. And if I wanna use Miro, all you have to do is connect Miro to Cursor by going to this customize tab and searching for Miro, and then you connect Miro in the in the Cursor marketplace for plugins and skills here, basically.
11:34So let's go back to content engine because I have that set up already. If you wanna use Miro inside of cursor with the cursor agent or the codex agent because you can do this in codex as well. So I've got the local version of this app running here, but you can just add a new browser.
11:48So we're gonna add a new browser tab here. I'm gonna go to this canvas in Miro. And now I've navigated to this board in cursor in the cursor browser.
11:57You can see I've got access to my entire Miro canvas here. And not only that, I can actually make changes on the Miro canvas from inside of cursor. Now that I've got that plugin installed just by typing in the in my agent chat box here, I can just do at Miro, and that will let me use Miro directly from the Cursor agent.
12:15So we can either make changes to the PRD, um, or we can add new documents to the canvas. So we could say the cursor here, like, can you use Miro to update the apps onboarding flow in line with the onboarding prototype in Miro?
12:32And that will pull this prototype from Miro into our project and actually update that. Now I don't wanna update this because I've got I'm kind of working on the design for this app at the moment.
12:42But what I am gonna show you how to do here is how we can create some more documents on the canvas and even do more prototypes here using the cursor agent. So let's ask the cursor agent, can you add a light mode version of the prototype on the Miro app planning canvas? I'm actually just gonna select this to composer 2.5 just because that will be a cheaper model to actually be able to do this.
13:01We can send this off and that is going to use the Miro MCP because we've connected that to our account. It has access to all of our stuff in Miro here. And cursor is then gonna be out of control Miro.
13:13I'm gonna run this tool in cursor, and you can see cursor says found the content engine onboarding prototype with four screens reading their HTML to build a light mode version. Now it's gonna build a light mode version of this prototype in Miro on the same canvas just using Cursor. And I think this is gonna be the way the majority of people do work like this.
13:34Using these apps like Miro to create shared context for your entire team using AI agents and be able to actually use the Miro app using a tool like cursor or codecs so that you don't have to leave the environment that you're already working in to build your products or to work on any projects that you might be using agents for.
13:55So you can see on the canvas now on the right hand side here, we've got this light mode version of the prototype that's been created using the cursor agent here. And we've got a couple of things. It's the prototype first.
14:08So it's created this prototype, but it's also added a document to the canvas here, which I wasn't expecting, and it's just outlining the onboarding flow here.
14:19It's basically just documenting what this onboarding flow is. So content engine onboarding light mode, light theme variant of the onboarding prototype, same four screen flow, and it's got these four screens below here. I actually don't think we need this.
14:30We can just delete this for now. But nice that it added that to the canvas, and then you can see it's got onboarding flow here. Now there are some things which aren't a 100% correct in this prototype.
14:44So it's not done it the way that it could. Some stuff might be better for the Miro sidekick to actually be able to do here, but this stuff is only gonna improve over time.
14:54And you can start to see the way that teams will collaborate in these shared spaces. We'll be able to use tools like Miro with your own agents inside of things like cursor and codex in order to be able to share context across a team, build better products with AI, and build better apps with AI as well. And this is also a great way of just storing a bunch of different types of context as well from prototypes to documents to mermaid diagrams to code to a bunch of different stuff.
15:24There's a ton of stuff within the new mirror canvas that you can use to create different types of context for your application or whatever projects that you're building with AI, basically. So hopefully, you can see there the sorts of context that you can create for your AI agents using the Miro Canvas.
15:41And this really creates a shared collaborative surface for a bunch of different context for your AI agents. So if you are working on a team, this is a great place to share all of your context and actually be able to collaborate on all those different files, those markdown files, mermaid diagrams, those HTML prototypes.
15:58You can drop HTML files into the Miro Canvas as well to kinda load that prototype on the canvas if you've already got existing HTML prototypes or if you wanna build your HTML prototypes locally and then drop them onto the Miro Canvas. That way, you can also use the Miro sidekick to reference a bunch of that context if you wanna use their AI agent versus using your own AI agent instead.
16:18But it just introduces a whole new way of building different types of context, giving your agent access to all those types of context, and then being able to share context across your team as well. And I know this might be a sponsored video by Miro, but I'm still super excited about the direction that they're going with their platform.
16:37And it kind of, like, seeing this new canvas and how it could work with your existing agent tools, it kind of changed my mind from thinking about Miro as this old school kind of software that you use to kind of collaborate on a whiteboard to basically being like a for your AI agents to be able to connect to and work with.
16:56Now if you are building with AI, I've got a community helping people do just that as well. So if you wanna learn how to build and launch real applications, including these kind of agent native style applications that work inside of things like cursor and codecs, you can head over to school.com/aiapps to find out more.
17:13If you enjoyed the video, don't forget to like and subscribe. Thank you for watching, and I will see you next time.
The Hook
The bait, then the rug-pull.
The markdown file is the duct tape of AI-assisted development. It works until it doesn't — until two people need the same context, or an agent on another machine needs to see the prototype you built locally. This video is a sponsored look at whether Miro Canvas solves that problem by turning a whiteboard into a shared, MCP-connected context layer for your whole team.
Named ideas worth stealing.
00:32list
Agent-Readable Context Hierarchy
- Markdown files
- Mermaid diagrams
- HTML prototypes
- Images / flowcharts
- Sticky notes and comments
The types of context Miro Canvas can store and expose to AI agents via MCP — broader than local markdown files
Steal forAny team setting up a shared context store for AI agents
How they asked for the click.
VERBAL ASK
17:04link
“head over to school.com/aiapps to find out more”
Community pitch for AI app builders, second plug in the video. Timed after the synthesis so it lands when the viewer is nodding at the team-context thesis.
MENTIONED ON CAMERA
FROM THE DESCRIPTION
PRIMARY CTAWhere the creator wants you to go next.
OTHER LINKSAlso linked in the description.
Visual structure at a glance.
