Tutorial: Build a Node.js app from a Miro Board with Miro MCP + Cursor

This tutorial demonstrates a powerful workflow for developers: using a custom AI agent to read product requirements, diagrams, and architecture notes from a Miro board and automatically generate a running Node.js web application.

You will learn how to:

• Structure information on a Miro board for an AI to understand.
• Use Miro's MCP server to analyze the board's context.
• Generate a complete single-page web application from a single prompt using Cursor (can be any AI tool of choice which supports MCP).
• Run the generated application locally.

📋 Prerequisites

Before you begin, you'll need the following:

• A Miro Account & Miro Board: The board should contain the full context for your app.
• Miro MCP configured for Cursor: Our MCP Server provides prompts to generate the best app possible based on Miro board context. Ensure Miro MCP is enabled, installed and configured to your Miro account. Also ensure you installed Miro's MCP in the same team where the board you want to use for app creation is. See instructions here.
• Node.js & npm: A local Node.js environment to install dependencies and run the app.

💡 Step 1: Set the Stage (Your Miro Board Context)

The quality of the AI's output depends entirely on the quality of its input. Your Miro board acts as the "single source of truth." For this demo, our board contains three key items:

1. 📄 Product Requirements Document (PRD): A text item detailing the app's goals, features, and target audience.
   • Goal: Create a simple, single-page "API Status Dashboard."
   • Features: List services, show status indicators (Online, Degraded, Offline), and update automatically.
2. 📐 System Architecture Document: A text item with technical specifications, including a Mermaid diagram snippet for the frontend architecture.
3. ✨ Diagram: A visual flowchart showing the data flow, from the backend "Mock Data Service" to the "Frontend Application" and the "User Developer."

💬 Step 2: Connect to Your Agent & Find Your Board

First, you verify that MCP is enabled and configured properly - find the correct Miro board.

In your IDE's agent chat, use the board_get_items tool to list out the items on the board you want to use as context for the app generation.

Your Prompt:
List all items on this Miro board via the board_get_items tool: <add-miro-board-id>

The agent will call the tool and return a list of your board items.

🪄 Step 3: The Generative Prompt (From Board to Code)

✨This is where the magic happens. We will use a single, comprehensive prompt to instruct the agent. In the video, we craft a custom prompt, but we recommend using Miro's MCP prompt: code_create_from_board. To do this in Cursor, start typing in / and then you should see a list of the prompts you have available. Use the one outlined below. The agent may ask you some follow up questions like to provide a board ID, if you haven't already. Follow the instructions, drink a coffee, and enjoy the magic of Miro's MCP Server! ✨ It's just that easy!

Now, what if your IDE doesn't support MCP prompts? You can easily just write a custom prompt which will tell the agent which tools to utilize, in which order. You can see my sample prompt from the video below (make sure to update the board ID to be the board you want to use as context for app generation.

Your Prompt:

Use context_analyze_board_and_implement tool, to take all the context from that board: uXjVOcJSyp4=

and then go ahead and create a basic app which should be running locally with Node.js. If the get board context tool doesn't give you enough context, use the get items tool instead to read the items on the board.

This prompt gives the agent a clear directive and a fallback plan (using get items if get context is insufficient), making it robust.

🤖 Step 4: The AI's Execution Plan

The agent will now begin its work. You will see it create a to-do list and execute each step.

1. Analyze Context: The agent first calls context_get_board_context to get a summary of all text, diagrams, and documents.
2. Get Detailed Items: It then calls items_list_items to get the raw content and HTML from each item on the board, ensuring it doesn't miss any details.
3. Formulate a Plan: Once it has all the context, the agent confirms its understanding and presents its development plan.

Agent's Plan:

Perfect! Now I have all the context I need. Let me update my todos and start creating the Node.js application based on the detailed requirements from the board.

Now I'll create the API Status Dashboard application. Based on the board content, this should be a simple single-page web application with:

• 1. Product Requirements: A clean dashboard showing microservice status with real-time updates.
• 2. Architecture: Frontend with a mock data service that simulates status changes.
• 3. Features: Service list, status indicators (Green/Red/Yellow), automatic updates, timestamps, and responsive design.

Let me create the application:

📂 Step 5: Generating the Application Files

The agent will proceed to generate the complete file structure and code for the application, based on the plan it just created. You will see the files (package.json, server.js, public/index.html, etc.) appear in your IDE's file tree.

🏁 Step 6: Run Your New Application

Your application has been created! The final step is to install the dependencies and run the server.

Open your terminal, navigate to the new project directory, and run the following commands:

📘

Note: your agent may have created a different folder structure / directory, so use these next steps as a guide, but your commands may vary slightly due to different naming.

1. Navigate into the directory:

   Bash

   cd api-status-dashboard-mcp
   

2. Install dependencies:

   Bash

   npm install
   

3. Start the application:

   Bash

   npm run start
   

You should see a confirmation that the server is running.

Terminal Output:

Bash

> [email protected] start
> node server.js

API Status Dashboard running on http://localhost:3000
Endpoint: http://localhost:3000/api/services

🎉 Step 7: See the Final Product

Open your web browser and navigate to http://localhost:3000.

You will see a fully functional API Status Dashboard. It features:

• A clean header and summary cards for "Total," "Online," "Degraded," and "Offline" services.
• A grid of service status cards, each with a name, ID, and a colored status badge.
• Live updates—the mock data service in the background changes the statuses every few seconds, and the frontend automatically reflects the changes.

✅ Conclusion

In just a few minutes, you've gone from a product specification on a Miro board to a running web application. This workflow shows how an AI agent, powered by the Miro API and rich board context, can act as a powerful developer assistant, automating scaffolding and boilerplate code so you can focus on building.