Connecting Miro's MCP Server to MCP-compatible clients

📘

This is a beta release of our MCP.

It is intended for evaluation and feedback purposes. The feature set and user experience may change in future releases. Feedback form.

This guide shows examples of how to connect to Miro's MCP Server based on the MCP-compatible client you are planning to work with. The Miro OAuth flow will be the same, but each tool may have a slightly different UI.

📘

The UI of each MCP-compatible client on this page may have changed recently, so please use this as a general guide. For the most accurate information, see the documentation of the MCP-compatible client of your choice.

❗️

If you are on Miro Enterprise Plan, you'll need to first enable Miro's MCP Server for your org before you can use it. See our Admin guide for more details.

Claude (Web & Desktop App)

Use this method to connect Miro to your standard Claude chat interface. This works across the Claude web app and the Claude Desktop application.

Setup Steps

1. Open Connectors: In the Claude chat box, click the plus (+) icon and select Add connectors.

   

2. Find Miro: Select the Web tab and search for "Miro."

   

3. Connect: Click the plus (+) icon on the Miro card, then click Connect on the following screen.

   

4. Authorize: Follow the Miro OAuth flow to authorize the app for your specific Miro team.

5. Verify: You will see a "Connected to Miro" confirmation. You can now prompt Claude to access or create content on your boards by including a board URL in your message.

   

6. 💡 Try this prompt: "Summarize the content on this board": [your-board-URL] OR "create me a sequence diagram of the data flow for Claude Web and Desktop app, and add it to this board [your-board-URL]

Lovable

1. Log into lovable.dev.
2. Click on your profile in the top right.
3. Click on Settings -> Integrations. Scroll down to Your MCP Servers and find Miro. Click Set up.

4. Click on Connect and then follow the Miro OAuth flow to install Miro's MCP Server on the team of your choice. You'll only be able to use MCP on boards from the team you authorize.

🎉 That's it! You've now connected Miro's MCP Server to Lovable!

❤️ Now you can start using your content inside Miro to build prototypes in Lovable, just make sure to include the board you want to reference in your prompt!

✨You can prompt it something like "build me a landing page based on the content of this board: https://miro.com/app/board/<add-your-board-id-here/> (but add in your own Miro board URL).

Replit

📘

To use MCP with the Miro board in the video, use this template to bring that same Miro board into your account.

And the REPL from video above.

1. Click on button below to install Miro's MCP Server in Replit.

2. Click on Test & Save.

3. Click on Authorize with OAuth. This will start the OAuth flow to authenticate into your Miro account. Select the Miro Team where you want to use MCP. See Miro OAuth flow for MCP for more details.

4. Now you can start using your content inside Miro to build prototypes in Replit, just make sure to include the board ID you want to reference in your prompt!

Cursor

This example is with Cursor, but it should work the same or very similar in your AI tool of choice. The main difference will be where to add in the MCP configuration. The auth steps after that should be the same.

Go to Cursor settings -> Cursor Settings -> MCP -> Add a Custom MCP Server and add in the following JSON:

{
  "mcpServers": {
    "miro-mcp": {
      "url": "https://mcp.miro.com/", 
      "disabled": false,
      "autoApprove": []
    }
  }
}

Click on the authenticate button. This should open a new window for the Miro OAuth flow (see below). See OAuth details in previous guide.

You should see that the MCP Server is enabled and should see that tools and prompts are available, as shown below.

That's it! You're ready to start generating diagrams and next level apps with Miro MCP!

VSCode and GitHub Copilot

Use this method to connect Miro to VSCode + GitHub Copilot.

Setup Steps

1. Find Miro's MCP Server on GitHub's MCP Registry.

2. Click on "Install MCP server".

   

3. Open the Miro OAuth flow, install the app on the team of your choice.

4. That's it! You can now start using Copilot agent to visualize on Miro, create code from context on Miro boards, or summarize boards.

5. 💡 Try this prompt: "Summarize the content on this board": [your-board-URL] OR "create me a sequence diagram of the data flow for VSCode app and it's extensions and add it to this board [your-board-URL]

6. To use Miro's MCP Server's built in prompts you can type in / and you should see the prompts which Miro's MCP Server provides. To see Miro's MCP Server tools, click on the tools icon and you should see Miro's tools.

9. See tools that you have available.

   

10. To ensure the Copilot Agent uses exactly the tools you want, you can explicitly tell the agent to complete task X with tool Y.
    💡Try this prompt: "use the create_diagram tool to create me a diagram of my codebase at ~/dev/codebase _and add it to this Miro board [add in your Miro board URL]"

    ❗️

    Ensure that the Miro board which you are referencing is in the team you've authed Miro MCP Server app into

Claude Code

For most up to date info on how to manage MCP Servers with Claude Code, go to Claude Code MCP Docs.

Watch the video below to see how to use Miro's MCP Server with Claude Code (in the video, the claude mcp add --transport http miro https://mcp.miro.com step is ran before the video starts).

1. Login to Claude Code with claude command.
2. Next, use claude mcp add --transport http miro https://mcp.miro.com to add the Miro MCP into Claude Code.
3. Use /mcp auth and then auth into Miro by following the Miro OAuth flow.
4. Once you've authed, you are ready to use Miro's MCP Server. From there, you can use Miro MCP prompts by running: /miro-mcp:code_explain_on_board

Gemini CLI

Watch the video below:

Windsurf

1. Go to Windsurf settings -> Windsurf Settings -> Cascade -> Manage MCPs -> Configure and then add in the following JSON:

{
  "mcpServers": {
    "miro-mcp": {
      "url": "https://mcp.miro.com/", 
      "disabled": false,
      "autoApprove": []
    }
  }
}

2. Go through the Miro OAuth flow and add the MCP app on the team of your choice.
3. Start prompting Windsurf to use Miro MCP, we recommend code_create_from_boardadd in a board URL like https://miro.com/app/board/uX1234567/ and hit enter.

Kiro CLI

1. After you install Kiro CLI, ensure your MCP Config file looks like this:

{
  "mcpServers": {
    "miro-mcp": {
      "url": "https://mcp.miro.com/", 
      "oauthScopes": [],
    }
  }
}

2. Go through the Miro OAuth flow and add the MCP app on the team of your choice.
3. Start prompting Kiro CLI to use Miro MCP, we recommend code_explain_on_boardadd in a board URL like https://miro.com/app/board/uX1234567/ and hit enter.

Amazon Q IDE Extension

Read more about Amazon Q IDE Extension here.

1. After you install the extension, ensure your configuration looks like this (ensure Transport is http and the url is https://mcp.miro.com. Then hit save.

After that, you are ready to start prompting!