Skip to main content
Metabind Studio is the web application at www.metabind.ai where developers and product teams build MCP Apps. It’s the layer that sits on top of BindJS and the Metabind backend: a visual builder, a code editor, live device previews, a tool-test harness, an asset library, and the publishing surface — all wired into the same project. Most MCP frameworks are SDKs that ship without a development surface; the developer sets up their own editor, hosting, debugging, and review workflow. Metabind Studio is what most MCP tooling doesn’t have.

​
What Metabind Studio gives you

The top navigation has three tabs:
  • MCP — Server, Connect, Gallery, UI Tools (Interactive Tools), Data Tools, Components.
  • Components — the BindJS code editor surface for every component in the package.
  • Assets — the media library.
Inside an MCP project, the left sidebar groups everything by what it does: Project-level settings (API keys, dependencies, team, billing) sit under a separate Settings menu.
The project sidebar in Metabind Studio — Server and Gallery at the top, then UI Tools, Data Tools, and Components grouped below

​
Roles and the multi-discipline model

Metabind Studio is designed so different team roles work in the surfaces meant for them:
  • Developers spend most of their time in the Components tab — authoring BindJS, defining component properties, configuring data handlers.
  • Product managers work in UI Tools and Data Tools — defining tool schemas, writing AI-facing descriptions, configuring allowed components.
  • Designers work in Components (visual configuration via the inspector) and Assets — maintaining the design system and the media library directly, without filing engineering tickets.
  • Content editors work in the Content surface, managing entries that Data Tools query as a headless CMS backend.
Each role can ship without blocking the others. A font change is a designer task in Metabind Studio, not a developer ticket.

​
Live device previews

Metabind Studio generates a preview URL for any component, Interactive Tool, or whole MCP App. The URL behaves differently per platform:
  • iOS: Opens as an App Clip on iOS 14+ — no App Store install, real native SwiftUI rendering on the device. The app clip is signed and bundled by Metabind; it loads your project’s package and renders the requested component.
  • Android: Opens in the Metabind Preview app, which the developer installs once. The app loads the requested component’s BindJS bundle and renders as native Compose.
  • Web: Opens in the browser, rendered by @metabindai/bindjs-react (React).
Preview connects to the project’s draft endpoint by default, so you can iterate before publishing without affecting production.
Metabind Studio with a Share Preview QR code modal open over the Components editor — scannable from an iOS device to launch the App Clip

​
What Metabind Studio is built on

Metabind Studio is a React application that talks to the Metabind backend. It’s part of the platform — not a separate product — but conceptually it sits at the same layer as the BindJS authoring layer: developer-trust surface, used every day, where the developer’s relationship with Metabind happens.

Your first MCP App

The end-to-end walkthrough using Metabind Studio.

Building Your MCP App

How-tos for the surfaces Metabind Studio exposes.

Testing tools

How-to: use the Metabind Studio test harness.

Live device previews

How-to: preview on a real device before publishing.