Skip to main content
Oak & Ivory is the sample retail MCP App that ships with Metabind. It demonstrates the patterns most product MCP Apps share: a Data Tool that searches a catalog, an Interactive Tool that renders product details, and a layout component reused across multiple Tools. This page walks through what’s in it and why each piece exists.

What Oak & Ivory does

The template defines 12 tools: 8 Interactive Tools and 4 Data Tools. This page walks through two of them: Together they support flows like:
A user asks for lounge chairs; the AI calls product_search, then an Interactive Tool, and the user sees the products rendered inline.
The AI decides when to chain them: product_search returns JSON, and product_detail returns interactive UI.

Get the sample

Three ways:
  1. In Metabind Studio onboarding. When you sign up, onboarding offers the MCP Starter Project (the Oak & Ivory retail demo). Metabind Studio provisions the components, Types, and sample data.
  2. From a template. In an existing organization, click New Project → Create MCP Server, then choose MCP Starter Project.
  3. From GitHub. The Retail demo in metabind-demos holds the same MCP App beside complete iOS and Android apps with the agent inside, rendered natively in SwiftUI and Jetpack Compose. The repository also has a Finance demo, a personal finance app built from the agent’s own tools.
You get a fully working MCP App with no further setup. Open the project to see the components, test the tools, and connect a host.
The new-project sample picker in Metabind Studio with the Oak & Ivory retail template available alongside a blank starter

What’s in the project

The sample API runs on Metabind’s infrastructure, so there are no external dependencies to set up. For a production deployment, the product_search handler would point at your real catalog.

How product_search works

The Data Tool’s handler queries the catalog through the Metabind Content API and maps each result to a product:
A real product would replace the Content API URL with their own API, keep its key in env.secrets, and likely transform the response shape. The patterns are what generalize: schema validation, V8 sandbox, output validation, sandbox limits. See Sandboxed execution for the runtime model.

How product_detail works

The Interactive Tool is bound to the ProductDetail component. Its input schema mirrors the component’s properties:
When the AI calls product_detail with a product, the platform:
  1. Validates the input against the schema.
  2. Compiles ProductDetail’s BindJS layout against the input.
  3. Returns an MCP UI resource for the host to render.
The rendered view then calls the product_lookup tool to load the product’s title, price, description, and image. Inside your own app via the Assistant SDK, the card renders as SwiftUI on iOS and Jetpack Compose on Android. Web hosts like Claude and ChatGPT render it as React, via @metabindai/bindjs-react in a sandboxed iframe.

Sub-component reuse

ProductDetail is composed from smaller pieces: BrandBackground and EnvironmentSizeClass. These are normal BindJS components in the project, available as building blocks for other layouts. The template’s other layouts already reuse them: ProductCarousel combines BrandBackground, EnvironmentSizeClass, and ProductCard. The sub-components carry the styling through.

Component allowlist

The template declares its allowlists on layout slots: ProductGroupings allows ProductSection, and ProductSection allows ProductCarousel. If a new MCP App reused this package and added a LandingHero layout, that layout would declare its own slot allowlists. See Component allowlists.

Connecting Oak & Ivory to Claude

Once the sample is in your account:
  1. Open the Server tab in the project sidebar.
  2. Copy the production URL.
  3. Add it in Claude as a custom connector. See Connect to Claude.
In Claude, ask:
Claude calls product_search to find matching chairs, then calls an Interactive Tool, such as product_carousel or product_detail, to render them. You see the products inline in the conversation.

Embedding Oak & Ivory in your own app

To embed the same tools in a custom app via the Assistant SDK, see Assistant SDK overview. Point the SDK at the Oak & Ivory project, choose the Agent Proxy or, on iOS, your own Anthropic key, and ship. The same tools work, and the rendered cards appear as SwiftUI on iOS, Jetpack Compose on Android, and React on the web.

Customizing Oak & Ivory

Once Oak & Ivory is in your account, it’s a real project you can change freely:
  • Replace the sample API. Point product_search at your real catalog and add an API key secret.
  • Restyle the components. Edit ProductCard, change colors, change layout.
  • Add new tools. A cart_add, a wishlist_save, a recommendations Data Tool. Each becomes another Type.
  • Publish. When you’re done, publish the package. It’s now your own MCP App.
Starting from the sample is the recommended path. The shape is correct; the content is yours to evolve.

Your first MCP App

The end-to-end tutorial that uses Oak & Ivory.

Build an Interactive Tool

The pattern product_detail follows.

Build a Data Tool

The pattern product_search follows.

Connect to Claude

Try Oak & Ivory’s tools in a real host.