Your first MCP App

Metabind lets your agent answer with your own UI components instead of text: in Claude, ChatGPT, and every MCP host, and natively in your iOS, Android, and web apps. Each component is written once in BindJS and validated before it renders. 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, connect it to Claude, and watch its 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.
• 4 Data Tools that fetch data: product_search (semantic search over the Oak & Ivory catalog), product_lookup, inspiration_search, and openai_image_generator.
• Server instructions that tell the model 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 model calls product_search to fetch matching items, then usually calls product_detail to render one inline. Metabind validates the model’s response against the tool’s schema, and Claude draws the product card in its sandboxed frame in the chat.

​

Prerequisites

• A Metabind account. Create one if you haven’t yet.
• A Claude account that can add custom connectors, on claude.ai or in the Claude desktop app. Claude’s Free plan allows one custom connector.

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: the project’s metadata, server instructions, and MCP server URLs.
• Gallery: a live preview gallery of the project’s tools.
• Playground: a chat for testing the project’s tools.
• Analytics: tool-call counts and execution history.
• UI Tools: Interactive Tools, the ones that render UI when the AI calls them.
• Data Tools: handlers that fetch data. They 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. These are the MCP server instructions: every host receives them when it connects, and hosts that read them pass them to the model 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, run a tool from inside Metabind Studio to see what the AI will see. This is the same code path that runs when an AI calls the tool from Claude. Schema-validated rendering is the production safety net: the AI can’t 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 Metabind Studio. BindJS is the open component language for agent UI, with a SwiftUI-inspired API. 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 using the draft URL

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

​

Step 5: Try it

In Claude, 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 calls product_search to find matching items, then calls an Interactive Tool to render the result, usually product_detail, product_carousel, or product_comparison. 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 keeps serving 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 interactive UI rather than text.
• Four Data Tools that call your APIs through handlers in V8 isolates, with secrets injected at runtime.
• A production endpoint and a draft endpoint, with publish-and-rollback already wired in.

The same MCP App definition is also ready to run inside your own iOS, Android, or web app through the Assistant SDK, rendered natively as SwiftUI and Jetpack Compose. A separate guide covers it.

​

What to read next