How to Integrate Replit with Miro

1import os
2import requests
3from typing import Optional
4
5ACCESS_TOKEN = os.environ["MIRO_ACCESS_TOKEN"]
6BASE_URL = "https://api.miro.com/v2"
7
8HEADERS = {
9    "Authorization": f"Bearer {ACCESS_TOKEN}",
10    "Content-Type": "application/json",
11    "Accept": "application/json"
12}
13
14def create_board(name: str, description: str = "", team_id: str = "") -> dict:
15    """Create a new Miro board."""
16    payload = {
17        "name": name,
18        "description": description,
19        "policy": {
20            "permissionsPolicy": {"collaborationToolsStartAccess": "all_editors"},
21            "sharingPolicy": {"access": "private"}
22        }
23    }
24    if team_id:
25        payload["teamId"] = team_id
26
27    response = requests.post(f"{BASE_URL}/boards", json=payload, headers=HEADERS)
28    response.raise_for_status()
29    return response.json()
30
31def add_sticky_note(
32    board_id: str,
33    content: str,
34    x: float = 0,
35    y: float = 0,
36    color: str = "yellow"
37) -> dict:
38    """
39    Add a sticky note to a board.
40    color options: gray, light_yellow, yellow, orange, light_green, green,
41                   dark_green, cyan, light_pink, pink, violet, red, light_blue, blue
42    """
43    payload = {
44        "data": {"content": content, "shape": "square"},
45        "style": {"fillColor": color},
46        "position": {"x": x, "y": y, "origin": "center"},
47        "geometry": {"width": 200}
48    }
49    response = requests.post(
50        f"{BASE_URL}/boards/{board_id}/sticky_notes",
51        json=payload,
52        headers=HEADERS
53    )
54    response.raise_for_status()
55    return response.json()
56
57def add_frame(
58    board_id: str,
59    title: str,
60    x: float = 0,
61    y: float = 0,
62    width: float = 800,
63    height: float = 600
64) -> dict:
65    """Add a labeled frame to organize content on the board."""
66    payload = {
67        "data": {"title": title, "type": "freeform"},
68        "position": {"x": x, "y": y, "origin": "center"},
69        "geometry": {"width": width, "height": height}
70    }
71    response = requests.post(
72        f"{BASE_URL}/boards/{board_id}/frames",
73        json=payload,
74        headers=HEADERS
75    )
76    response.raise_for_status()
77    return response.json()
78
79def add_text_box(board_id: str, content: str, x: float, y: float, font_size: int = 24) -> dict:
80    """Add a text element to the board."""
81    payload = {
82        "data": {"content": content},
83        "style": {"fontSize": str(font_size), "fontFamily": "opensans"},
84        "position": {"x": x, "y": y, "origin": "center"},
85        "geometry": {"width": 400}
86    }
87    response = requests.post(
88        f"{BASE_URL}/boards/{board_id}/texts",
89        json=payload,
90        headers=HEADERS
91    )
92    response.raise_for_status()
93    return response.json()
94
95def get_board_items(board_id: str, item_type: str = "") -> list:
96    """List all items on a board, optionally filtered by type."""
97    params = {"limit": 50}
98    if item_type:
99        params["type"] = item_type
100    response = requests.get(
101        f"{BASE_URL}/boards/{board_id}/items",
102        params=params,
103        headers=HEADERS
104    )
105    response.raise_for_status()
106    return response.json().get('data', [])
107
108# Example: Generate a retrospective board
109if __name__ == "__main__":
110    TEAM_ID = os.environ.get("MIRO_TEAM_ID", "")
111
112    board = create_board("Sprint 42 Retrospective", "Auto-generated retro board", TEAM_ID)
113    board_id = board['id']
114    print(f"Board created: {board['viewLink']}")
115
116    categories = [
117        ("What Went Well", -900, 0, "green"),
118        ("What Could Improve", 0, 0, "yellow"),
119        ("Action Items", 900, 0, "light_pink")
120    ]
121
122    for title, x, y, color in categories:
123        frame = add_frame(board_id, title, x=x, y=y, width=750, height=500)
124        print(f"Frame added: {title}")
125        # Add sample sticky notes inside each frame
126        for i, note_text in enumerate(["Team communication was excellent", "Deployment went smoothly"]):
127            add_sticky_note(board_id, note_text, x=x - 150 + (i * 320), y=y, color=color)
128
129    print("Retrospective board generated successfully!")

1const express = require('express');
2const axios = require('axios');
3
4const app = express();
5app.use(express.json());
6
7const ACCESS_TOKEN = process.env.MIRO_ACCESS_TOKEN;
8const TEAM_ID = process.env.MIRO_TEAM_ID || '';
9const BASE_URL = 'https://api.miro.com/v2';
10
11const miroHeaders = {
12  'Authorization': `Bearer ${ACCESS_TOKEN}`,
13  'Content-Type': 'application/json',
14  'Accept': 'application/json'
15};
16
17async function createBoard(name, description = '') {
18  const payload = {
19    name,
20    description,
21    policy: {
22      permissionsPolicy: { collaborationToolsStartAccess: 'all_editors' },
23      sharingPolicy: { access: 'private' }
24    }
25  };
26  if (TEAM_ID) payload.teamId = TEAM_ID;
27  const res = await axios.post(`${BASE_URL}/boards`, payload, { headers: miroHeaders });
28  return res.data;
29}
30
31async function addStickyNote(boardId, content, x, y, color = 'yellow') {
32  const res = await axios.post(`${BASE_URL}/boards/${boardId}/sticky_notes`, {
33    data: { content, shape: 'square' },
34    style: { fillColor: color },
35    position: { x, y, origin: 'center' },
36    geometry: { width: 200 }
37  }, { headers: miroHeaders });
38  return res.data;
39}
40
41async function addFrame(boardId, title, x, y, width = 800, height = 600) {
42  const res = await axios.post(`${BASE_URL}/boards/${boardId}/frames`, {
43    data: { title, type: 'freeform' },
44    position: { x, y, origin: 'center' },
45    geometry: { width, height }
46  }, { headers: miroHeaders });
47  return res.data;
48}
49
50// POST /boards/generate — generate a Miro board from submitted items
51app.post('/boards/generate', async (req, res) => {
52  const { boardName, columns } = req.body;
53  // columns: [{title: 'col1', items: ['item1', 'item2'], color: 'yellow'}, ...]
54
55  if (!boardName || !columns || !Array.isArray(columns)) {
56    return res.status(400).json({ error: 'boardName and columns array are required' });
57  }
58
59  try {
60    const board = await createBoard(boardName);
61    const boardId = board.id;
62    const columnWidth = 800;
63
64    for (let i = 0; i < columns.length; i++) {
65      const col = columns[i];
66      const xPos = (i - Math.floor(columns.length / 2)) * (columnWidth + 100);
67
68      await addFrame(boardId, col.title, xPos, 0, columnWidth, 600);
69
70      for (let j = 0; j < col.items.length; j++) {
71        await addStickyNote(
72          boardId,
73          col.items[j],
74          xPos - 150 + (j % 3) * 160,
75          -100 + Math.floor(j / 3) * 230,
76          col.color || 'yellow'
77        );
78      }
79    }
80
81    res.json({
82      success: true,
83      boardId: board.id,
84      boardUrl: board.viewLink
85    });
86  } catch (error) {
87    console.error('Miro API error:', error.response?.data || error.message);
88    res.status(500).json({ error: 'Failed to generate Miro board' });
89  }
90});
91
92// GET /boards/:id/items — get all sticky notes from a board
93app.get('/boards/:id/items', async (req, res) => {
94  try {
95    const response = await axios.get(
96      `${BASE_URL}/boards/${req.params.id}/items`,
97      { headers: miroHeaders, params: { type: 'sticky_note', limit: 50 } }
98    );
99    res.json(response.data);
100  } catch (error) {
101    res.status(500).json({ error: 'Failed to retrieve board items' });
102  }
103});
104
105app.listen(3000, '0.0.0.0', () => {
106  console.log('Miro integration server running on port 3000');
107});