Skip to content
streamboard docs

Getting Started

Get streamboard running in under 5 minutes. You’ll connect an MCP client, author your first streamboard through an AI conversation, then push live values into the bindable slots from your code.

1. Create an account

Section titled “1. Create an account”

Sign up at the login page with GitHub or email. Free tier covers public streamboards — no credit card required. Private streamboards need a paid subscription (14-day money-back guarantee).

2. Connect your AI tools

Section titled “2. Connect your AI tools”

streamboard speaks MCP. Pick your AI tool of choice:

  • Claude Code — plugin + slash commands
  • Claude Desktop — add as a custom connector in settings
  • Cursor — add to .cursor/mcp.json
  • Codex — config + agent skills
  • ChatGPT — MCP connector (Business/Enterprise/Edu) or Custom GPT Action

Any other MCP-capable tool can connect directly to https://mcp.usestreamboard.com/mcp (Streamable HTTP, OAuth).

Prefer the terminal? npx streamboard streamboards ls walks your dashboards without any MCP client.

3. Author your first streamboard

Section titled “3. Author your first streamboard”

Once connected, ask your AI assistant something like:

> Build me a streamboard with four KPI tiles (MRR, active users, churn, NPS)
  and an area chart of weekly signups for the last 8 weeks. Make the chart
  data bindable so I can push fresh values later.

Your AI calls the create_streamboard MCP tool with a json-render spec. The tool returns an id + viewer URL (https://usestreamboard.com/s/<id>) — open it to see the rendered dashboard.

4. Push live data

Section titled “4. Push live data”

Mint a per-board data token in Settings → Tokens for the streamboard you just authored, then push state from your code:

import { Streamboard } from "@streamboard/sdk"


const board = new Streamboard({ token: process.env.STREAMBOARD_TOKEN! })


await board.push({
  kpis: {
    mrr: { value: "$48.2k", delta: "+4%", trend: "up" },
    activeUsers: { value: "31,408", delta: "+12%", trend: "up" },
  },
  weeklySignups: [
    { week: "W1", signups: 340 },
    { week: "W8", signups: 1580 },
  ],
})

Reload the viewer — the new values appear within the edge cache window (~60s).

Inspect live data

Section titled “Inspect live data”

Once data is flowing, your AI tool can call the get_streamboard_data MCP tool to see exactly what’s currently pushed plus a reconciliation of every { $bind } slot against that state. Each binding reports its expected type and whether a real value is present — so the model can catch typo’d paths or schema drift before they silently fall back to component defaults. Ask it: “What data is live on streamboard <id> and do my bindable slots match it?”

Next steps

Section titled “Next steps”