Preview

Preview draws an interface — a browser or app window with a product topbar, tabs, and a contextual sidebar — wrapping live content. The human sees a clean mockup; the agent gets { kind:"interface", url, tabs, sidebar, content } — the nav as data, never a screenshot to interpret. So "what tabs does the docs site have?" becomes a query, not OCR.

It ships with two presentational building blocks for the content area: Skeleton (faux text lines) and Menu (a dropdown / command-menu mock).

The two faces

The same authored block renders for a human and serializes for an agent.

What the agent reads

Over the MCP, get_component_data returns the interface as structure — no markup, no pixels:

{
  "kind": "interface",
  "id": "the-whiteboard-in-mdx",
  "title": "The whiteboard, in MDX",
  "chrome": "app",
  "url": "acme.dev/docs/canvas",
  "tabs": [
    { "label": "Guide" },
    { "label": "Canvas", "active": true },
    { "label": "Agents & MCP" },
    { "label": "API Reference" }
  ],
  "sidebar": [
    { "group": "Canvas", "items": [
      { "label": "Overview", "active": true }, { "label": "Gallery" }, { "label": "Templates" }
    ] },
    { "group": "Region model", "items": [
      { "label": "Region model", "children": [{ "label": "Concepts" }, { "label": "Live demo" }] }
    ] },
    { "group": "Reference", "items": [{ "label": "Components", "collapsed": true }] }
  ]
}

Skeleton

Faux content lines for a mockup's body. Presentational and decorative — no knowledge face.

Menu

A dropdown / command-menu mock — items with a label, an optional sub-label, and a shortcut hint. Presentational.

Props

Preview