Build an Interactive Tool

​

Prerequisites

• A project with type: "mcp". See Project setup.
• Familiarity with Tools and Types and Components and Packages.

​

1. Author a layout component

• Declares the tool’s input schema (via properties).
• Defines what the AI is allowed to render (via component allowlists).
• Renders the validated input as a layout.

const properties = {
  title: {
    type: "string",
    title: "Title",
    description: "Main heading",
    inspector: { control: "singleline", placeholder: "Lounge Chair" }
  },
  price: {
    type: "string",
    title: "Price",
    inspector: { control: "singleline", placeholder: "$128.99" }
  },
  description: {
    type: "string",
    title: "Description",
    inspector: { control: "multiline", numberOfLines: 4 }
  }
} satisfies ComponentProperties;

const body = (props: InferProps<typeof properties>): Component => {
  return VStack({ spacing: 16, alignment: "leading" }, [
    Text(props.title).font("title2").fontWeight("bold"),
    Text(props.price).foregroundStyle(Color("#7A7A7A")),
    Text(props.description).font("body")
  ])
    .padding(24)
    .background(Color("white"))
    .cornerRadius(12);
};

export default defineComponent({
  metadata: {
    title: "Product Detail",
    description: "Image, title, price, and description"
  },
  properties,
  body
});

​

Add a previews array

const previews = [
  Self({
    title: "Lounge Chair",
    price: "$128.99",
    description: "A generous, hand-finished blanket woven from merino wool and alpaca."
  })
    .previewName("With description")
];

export default defineComponent({
  metadata,
  properties,
  body,
  previews
});

​

2. Create a Type that points at the component

1. Open UI Tools in the project sidebar and click + to add one.
2. Select the layout component you just authored.
3. Set the Type’s name (becomes the slug, the MCP tool name) and description (becomes the tool description the model reads). See Write tool descriptions.
4. Save.

​

3. Configure allowed components (for layouts that compose children)

properties: {
  components: {
    type: "array",
    title: "Components",
    description: "Components rendered in the body",
    valueType: {
      type: "component",
      allowedComponents: ["ProductCard", "ProductCarousel", "ProductComparison"]
    },
    validation: { minItems: 1 }
  }
}

​

4. Test the tool inline

1. Fill the test inputs.
2. Click Run.
3. The platform validates your input against the schema, compiles BindJS, resolves the package, and renders the result.

​

5. Write tool descriptions

• The tool’s description. The Type’s description is the tool’s MCP description, what the model reads when deciding whether to call it. Say when to call it and when not to: “Render a single product detail card. Use when the user wants to view one product in depth, not when comparing multiple products.”
• Field descriptions. The description on each property becomes the description of that field in the tool’s JSON schema, which tells the model what goes in it: “Price in US dollars, as a number. Don’t include the currency symbol.”

​

6. Iterate and refine

• Add validation to properties. minLength, maxLength, min, max, pattern. Schema violations return clear errors to the model on retry.
• Constrain allowed components tightly. The smaller the allowlist, the more predictable the model’s output.
• Update the server instructions to reference the new tool and describe when it should be used.

​

7. Publish

​

Related