Skip to main content
MCP App 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. MCP App Studio is what most MCP tooling doesn’t have.

​
What MCP App 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 MCP App Studio — Server and Gallery at the top, then UI Tools, Data Tools, and Components grouped below

​
Roles and the multi-discipline model

MCP App 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 MCP App Studio, not a developer ticket.

​
Live device previews

MCP App 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.
MCP App Studio with a Share Preview QR code modal open over the Components editor — scannable from an iOS device to launch the App Clip

​
What MCP App Studio is built on

MCP App 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 MCP App Studio.

Building Your MCP App

How-tos for the surfaces MCP App Studio exposes.

Testing tools

How-to: use the MCP App Studio test harness.

Live device previews

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