Your first MCP App

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.

Metabind is The Native MCP App Platform — MCP Apps render as native SwiftUI, Jetpack Compose, and React from a single BindJS definition, governed on every render. This guide walks you through building and publishing your first MCP App end-to-end. You won’t write any code in this tutorial. You’ll start from Oak & Ivory, a complete retail sample, hook it up to Claude Desktop, and watch native product cards render inline in a conversation. The same MCP App also works in ChatGPT and any other MCP-compatible host.

​

What you’ll build

The Oak & Ivory sample is a retail MCP App for an interior-design brand. It includes:

• 8 Interactive Tools that render UI: product_detail, product_carousel, product_groupings, product_comparison, product_recommendation, product_specs, product_card_stack, and interior_designer.
• 2 Data Tools that fetch data: product_search (semantic search over the Oak & Ivory catalog) and openai_image_generator.
• Project instructions that tell the AI how and when to use each tool — for example, “If the user wants to see a single product, use product_detail. If the user wants to compare products, use product_comparison.”

When you ask Claude something like “Show me a coffee table from Oak & Ivory”, the AI calls product_search to fetch matching items, then calls product_detail to render one inline. The renderer compiles the BindJS component, validates the AI’s response against the tool’s schema, and displays a native-looking product card in the chat.

​

Prerequisites

• A Metabind account. Create one if you haven’t yet.
• Claude Desktop installed locally.

You don’t need to install any SDK or write any code for this tutorial.

​

Step 1: Create a project from the Oak & Ivory sample

The left sidebar groups everything by what it does:

• Server, Connect, Gallery — project-level settings, MCP server URLs, and the asset gallery.
• UI Tools — Interactive Tools, the ones that render UI when the AI calls them.
• Data Tools — handlers that fetch data, run in V8 sandboxes with secrets injected at runtime.
• Components — the BindJS source for everything the tools render.

The main pane shows the project’s name, description, website URL, and the Instructions block. Instructions are sent to the AI as guidance for how to use the tools — they’re how a project tells the model “call product_detail when the user wants to see a single product, and always serve it up with a video if there is one.”

​

Step 2: Test a tool inline

Before connecting Claude Desktop, run a tool from inside MCP App Studio to see what the AI will see. This is the same code path that runs when an AI calls the tool from Claude Desktop. The schema-validated rendering is the production safety net — the AI cannot inject components you didn’t approve, and a malformed input never reaches the renderer.

​

Step 3: Inspect the BindJS source (optional)

Skip this step if you want to keep moving. It’s worth a glance, though, because every Interactive Tool in Oak & Ivory is a BindJS component you can read and edit directly in MCP App Studio. BindJS is a declarative, SwiftUI-inspired component language. A single component definition compiles to React in MCP hosts and to native SwiftUI or Jetpack Compose when embedded via the Assistant SDK, so what you see in this preview is what your customers will see in production.

​

Step 4: Connect to Claude Desktop using the draft URL

You don’t need to publish to test. Every project has a draft endpoint that exposes every tool — published, modified, and unpublished — for development. Point Claude Desktop at the draft URL first; you’ll publish to production once it’s working.

​

Step 5: Try it

In Claude Desktop, start a new conversation and try one of these:

• “Show me a coffee table from Oak & Ivory.”
• “I’m decorating a small living room — recommend three accent pieces.”
• “Compare the Heritage Walnut and Ivory Oak coffee tables.”

Claude will call product_search to find matching items, then call an Interactive Tool — usually product_detail, product_carousel, or product_comparison — to render the result. The rendered card appears inline in the conversation, not as a JSON dump. Behind the scenes, every render goes through schema validation against the tool’s input schema, and only components from the project’s published package can appear. That’s the governance baseline: the AI cannot inject components you didn’t approve, on any surface.

​

Step 6: Publish to production

When the draft is working the way you want, publish: The draft endpoint stays available for ongoing development. Editing a published tool puts it in modified status — the production endpoint continues to serve the last published version while the draft endpoint shows the working copy. You can iterate without breaking what’s already live.

​

What you’ve built

In a few minutes you have:

• A live MCP App on mcp.metabind.ai that any MCP host can connect to.
• Eight Interactive Tools that render schema-validated native UI rather than text returns.
• Two Data Tools that proxy your APIs through V8-sandboxed handlers with runtime-injected secrets.
• A production endpoint and a draft endpoint, with publish-and-rollback already wired in.

The same MCP App definition is also ready to embed inside your own iOS, Android, or web app as a native AI assistant via the Assistant SDK — covered in a separate guide.

​

What to read next