Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metabind.ai/llms.txt

Use this file to discover all available pages before exploring further.

Live previews let you see Interactive Tools and components on actual hardware while you build. Edit in MCP App Studio, watch the rendered output update on your iPhone or Android device — no rebuild, no app store, no redeploy.

​
Why preview on a real device

The web preview in MCP App Studio is fast but not faithful. SwiftUI and Jetpack Compose have rendering behaviors — typography, safe areas, gestures, accessibility — that the web renderer approximates but doesn’t reproduce exactly. Before you publish a tool that ends up rendering inside Claude on iOS, see it on iOS. A few specific things only a real device shows you:
  • Type metrics. Apple system fonts and Material typography render at slightly different weights and tracking than their web counterparts.
  • Safe areas and dynamic insets. Notch, home indicator, and status bar interactions.
  • Gesture feel. Hover states translate to press states; transitions land differently on touch hardware.
  • Performance. A complex layout that stutters on a mid-tier Android device may feel fine on a desktop browser.

​
What the preview connects to

Live previews point at your project’s draft endpoint. Every save in MCP App Studio updates the draft instantly — the preview app re-fetches and re-renders. Production isn’t touched until you publish. This is the same draft endpoint Claude Desktop and other MCP hosts can connect to for testing. See Draft and production.

​
iOS preview (App Clip)

The iOS preview ships as an App Clip — no App Store install required. The first time you scan, iOS prompts to load the clip; after that it stays cached.
  1. In MCP App Studio, open any Type or component.
  2. Click the Preview menu and pick iOS.
  3. MCP App Studio shows a QR code.
  4. Open the iOS Camera and scan the code.
  5. The App Clip launches and loads your project’s draft endpoint.
The App Clip renders any Interactive Tool’s preview state and any component’s standalone preview. Tap a different Type or component in MCP App Studio and the clip updates.
The Components tab in MCP App Studio with a Share Preview QR code modal open over the editor
The clip renders the component as native SwiftUI on the device:
An ItemStackView component rendered as native SwiftUI inside the iOS App Clip on an iPhone

​
Android preview

The Android preview is a standalone app available on the Play Store as Metabind Preview.
  1. Install Metabind Preview from the Play Store.
  2. In MCP App Studio, click Preview → Android.
  3. Scan the QR code with the Metabind Preview app, or sign in to the same account and the preview will appear in your project list.
  4. Pick a Type or component.
Android preview uses the same JavaScript runtime that ships in production Android hosts — the layout you see here is what end users will see when an MCP host on Android renders your tool.

​
Web preview

The web preview lives inside MCP App Studio itself — the right pane on any Type or component detail. It’s the fastest loop, since there’s no device to scan, but it uses @bindjs/renderer (React) rather than the native runtime.
A web preview window inside MCP App Studio rendering an ItemStackView component with a frame switcher offering Mobile, Tablet, Desktop, and No Frame options
Use the web preview for quick iteration during authoring, then switch to a device preview before publishing.

​
What you can preview

SurfaceRenders
ComponentThe component itself with its previews array entries
Interactive ToolThe Type’s bound layout component, with test inputs
Data ToolNot previewable as UI — see Testing tools for the test panel
Components and Interactive Tools render on every supported surface. Data Tools don’t have a preview because they return JSON, not UI; use the test panel.

​
Iterating with previews

The preview re-fetches when you save. A few patterns that speed up iteration:
  • Pin a Type. When you have a single Type you’re refining, leave it open in the preview and edit the underlying component in MCP App Studio. Each save round-trips in under a second.
  • Use multiple devices. Side-by-side iOS and Android previews catch platform-specific rendering issues — a font that looks fine on iOS may push a layout differently on Android.
  • Test edge cases via previews entries. A component’s previews array can include “empty,” “long-text,” and “error” variants. Cycle through them on-device to verify each state.
  • Show stakeholders. Preview links can be shared — designers and PMs can scan the QR code from their own phones and review without an MCP App Studio account.
The QR code encodes a project-scoped preview URL. Anyone who scans it can view the draft state of that project’s tools and components. The link is read-only — viewers can’t edit, only see. If you need to share a preview without exposing it broadly, use Project visibility to make a sample project public, or invite specific reviewers to your organization with a Viewer role on a private project.

​
Preview vs. real MCP host

The preview apps render tools the same way the production runtime does, but they don’t simulate the AI calling your tool. The preview shows what an Interactive Tool would render given specific inputs — you supply those inputs. To test the full chain (AI decides which tool to call → tool runs → tool renders), connect a real MCP host like Claude Desktop to the draft endpoint. See Connect to Claude Desktop.

Testing tools in MCP App Studio

The inline test panel for tool inputs and outputs.

Draft and production

What the draft endpoint is and how publishing promotes it.

Authoring BindJS components

The authoring loop the previews are paired with.

Connect to Claude Desktop

Test the full AI-to-tool chain on a real host.