How to Integrate Miro with V0

Go to developers.miro.com and sign in with your Miro account. Click 'Create new app' and give it a name like 'My V0 Dashboard'. Under 'App Credentials' you will find your Client ID and Client Secret — save these for later. For initial development, the fastest path is creating a static access token: go to your app settings, navigate to 'OAuth & Permissions', and under 'Redirect URI for OAuth' add your Vercel deployment URL (e.g., https://your-app.vercel.app/api/miro/callback). For development testing without full OAuth, Miro provides a way to generate a user access token directly from the developer portal. Go to your app page → 'OAuth & Permissions' → scroll to 'Access Token' and click 'Get token' — this gives you a personal access token tied to your account for testing. Copy this token, as it goes into your Vercel environment variables as MIRO_ACCESS_TOKEN. The scopes you need depend on what you want to access. For reading boards and items, add: boards:read and board:item:read. If you want to embed boards, no API token is needed at all — just the board ID from the Miro URL. For production apps serving multiple users, implement the full OAuth 2.0 flow so each user authorizes the app with their own Miro account. For a single-team internal tool, a single team access token from your Miro workspace admin is sufficient.

Create app/api/miro/boards/route.ts to fetch a list of Miro boards from the Miro REST API. The Miro REST API base URL is https://api.miro.com/v2. All requests require an Authorization header with Bearer plus your access token. The boards endpoint returns a paginated list of boards with their ID, name, thumbnail, description, team, and modification dates. The API route uses process.env.MIRO_ACCESS_TOKEN for authentication — never use NEXT_PUBLIC_ prefix here since this is a secret server-side credential. The route fetches from Miro's boards API and returns the data to your frontend component. Miro's API returns results with a cursor field for pagination; for initial implementation, fetch the first page (default 20 boards) and add pagination later. For better performance, consider caching the boards list since it does not change frequently. Next.js route handlers support the cache option: add next: { revalidate: 60 } to the fetch call to cache for 60 seconds. This reduces Miro API calls and keeps your app snappy even under load. Miro's rate limits are generous (1000 requests per minute per token) but caching is still good practice. Note a key V0 limitation: V0 generates the UI components and the API route structure, but it cannot authenticate with Miro to test that the generated code actually works. Always test the route manually after deployment by checking the Vercel Function Logs for any authentication or network errors.

1import { NextResponse } from 'next/server';
2
3const MIRO_API_BASE = 'https://api.miro.com/v2';
4
5export async function GET() {
6  const token = process.env.MIRO_ACCESS_TOKEN;
7  if (!token) {
8    return NextResponse.json(
9      { error: 'MIRO_ACCESS_TOKEN environment variable not set' },
10      { status: 500 }
11    );
12  }
13
14  try {
15    const response = await fetch(`${MIRO_API_BASE}/boards?limit=50`, {
16      headers: {
17        Authorization: `Bearer ${token}`,
18        Accept: 'application/json',
19      },
20      next: { revalidate: 60 }, // Cache for 60 seconds
21    });
22
23    if (!response.ok) {
24      const error = await response.json();
25      return NextResponse.json(
26        { error: error.message || 'Miro API request failed', status: response.status },
27        { status: response.status }
28      );
29    }
30
31    const data = await response.json();
32    return NextResponse.json({
33      boards: data.data,
34      total: data.total,
35      cursor: data.cursor,
36    });
37  } catch (error) {
38    console.error('Miro API error:', error);
39    return NextResponse.json(
40      { error: 'Failed to fetch Miro boards' },
41      { status: 500 }
42    );
43  }
44}

Create app/api/miro/boards/[boardId]/items/route.ts to fetch items (sticky notes, shapes, text, frames, images) from a specific Miro board. This dynamic route accepts a boardId path parameter and an optional type query parameter to filter by item type. Miro board items are the individual elements on the canvas. The items endpoint at /v2/boards/{boardId}/items returns all item types; you can filter by passing type=sticky_note, type=shape, type=text, or type=frame. Each item has a data field with the content (for sticky notes, this is the text), a style field with color and formatting, and a position field with x/y coordinates on the canvas. For sticky notes specifically, the data.content field contains the HTML-formatted text (Miro uses simple HTML for styling within sticky notes). Strip HTML tags if you want plain text — a simple regex or DOMParser approach works. For shapes and connectors, the data field contains geometry info. For text items, data.content has the text. Note: Miro's API requires the boardId to be URL-encoded if it contains special characters. The dynamic route segment [boardId] in Next.js handles this automatically through params. However, Miro board IDs sometimes end with = signs which are valid base64 characters — ensure your API calls encode these properly when constructing the URL.

1import { NextRequest, NextResponse } from 'next/server';
2
3const MIRO_API_BASE = 'https://api.miro.com/v2';
4
5interface RouteParams {
6  params: { boardId: string };
7}
8
9export async function GET(request: NextRequest, { params }: RouteParams) {
10  const token = process.env.MIRO_ACCESS_TOKEN;
11  if (!token) {
12    return NextResponse.json(
13      { error: 'MIRO_ACCESS_TOKEN not configured' },
14      { status: 500 }
15    );
16  }
17
18  const { searchParams } = new URL(request.url);
19  const type = searchParams.get('type');
20  const limit = searchParams.get('limit') || '50';
21  const boardId = encodeURIComponent(params.boardId);
22
23  const typeParam = type ? `&type=${type}` : '';
24  const url = `${MIRO_API_BASE}/boards/${boardId}/items?limit=${limit}${typeParam}`;
25
26  try {
27    const response = await fetch(url, {
28      headers: {
29        Authorization: `Bearer ${token}`,
30        Accept: 'application/json',
31      },
32    });
33
34    if (!response.ok) {
35      const error = await response.json();
36      return NextResponse.json(
37        { error: error.message || 'Failed to fetch board items' },
38        { status: response.status }
39      );
40    }
41
42    const data = await response.json();
43
44    // Clean HTML from sticky note content
45    const items = data.data.map((item: { type: string; data?: { content?: string }; [key: string]: unknown }) => ({
46      ...item,
47      data: item.data
48        ? {
49            ...item.data,
50            content: item.data.content
51              ? item.data.content.replace(/<[^>]*>/g, '')
52              : '',
53          }
54        : item.data,
55    }));
56
57    return NextResponse.json({
58      items,
59      total: data.total,
60      type: type || 'all',
61    });
62  } catch (error) {
63    console.error('Miro items error:', error);
64    return NextResponse.json(
65      { error: 'Failed to fetch board items' },
66      { status: 500 }
67    );
68  }
69}

Add your Miro access token to Vercel environment variables so it is available to your API routes in production. In Vercel Dashboard, navigate to your project, click Settings → Environment Variables. Add MIRO_ACCESS_TOKEN with your Miro OAuth access token value. Set the scope to Production and Preview (you can use the same token for both in development). Never add NEXT_PUBLIC_ prefix to this variable — it must remain server-only. If you want a specific default board to embed, also add MIRO_DEFAULT_BOARD_ID with the board ID. Board IDs are in the Miro URL when you have a board open: https://miro.com/app/board/uXjVM_BOARD_ID=/ — copy everything between /board/ and =/. After adding environment variables, redeploy your Vercel project so the new variables are picked up. Go to Deployments in Vercel → click the three dots on your latest deployment → Redeploy. Alternatively, push a small commit to trigger a new deployment. Environment variable changes on Vercel require a redeployment to take effect — they are not hot-reloaded. To embed Miro boards without the API, use Miro's embed URL format in an iframe: https://miro.com/app/live-embed/BOARD_ID/ — this requires the board to have link sharing enabled. In Miro, open the board → Share → Copy link. For private boards on paid plans, you can use the embed URL with the access token as a query parameter for authenticated embedding.

1// app/components/MiroBoardEmbed.tsx
2'use client';
3
4interface MiroBoardEmbedProps {
5  boardId: string;
6  height?: number;
7}
8
9export function MiroBoardEmbed({ boardId, height = 600 }: MiroBoardEmbedProps) {
10  const embedUrl = `https://miro.com/app/live-embed/${boardId}/`;
11
12  return (
13    <div className="w-full rounded-lg overflow-hidden border border-gray-200">
14      <iframe
15        src={embedUrl}
16        width="100%"
17        height={height}
18        frameBorder="0"
19        scrolling="no"
20        allow="fullscreen; clipboard-read; clipboard-write"
21        allowFullScreen
22        title="Miro Board"
23      />
24    </div>
25  );
26}