Function registerAppTool

registerAppTool<
    OutputArgs extends AnySchema
    | ZodRawShapeCompat,
    InputArgs extends AnySchema | ZodRawShapeCompat | undefined = undefined,
>(
    server: Pick<McpServer, "registerTool">,
    name: string,
    config: McpUiAppToolConfig & {
        inputSchema?: InputArgs;
        outputSchema?: OutputArgs;
    },
    cb: ToolCallback<InputArgs>,
): RegisteredTool

This is a convenience wrapper around server.registerTool that normalizes UI metadata: if _meta.ui.resourceUri is set, the legacy _meta["ui/resourceUri"] key is also populated (and vice versa) for compatibility with older hosts.

Type Parameters

OutputArgs extends AnySchema | ZodRawShapeCompat
InputArgs extends AnySchema | ZodRawShapeCompat | undefined = undefined

Parameters

server: Pick<McpServer, "registerTool">
The MCP server instance
name: string
Tool name/identifier
config: McpUiAppToolConfig & { inputSchema?: InputArgs; outputSchema?: OutputArgs }
Tool configuration with _meta field containing UI metadata
cb: ToolCallback<InputArgs>
Tool handler function

Returns RegisteredTool

Example: Basic usage

registerAppTool(
  server,
  "get-weather",
  {
    title: "Get Weather",
    description: "Get current weather for a location",
    inputSchema: { location: z.string() },
    _meta: {
      ui: { resourceUri: "ui://weather/view.html" },
    },
  },
  async (args) => {
    const weather = await fetchWeather(args.location);
    return { content: [{ type: "text", text: JSON.stringify(weather) }] };
  },
);

Example: Tool visible to model but not callable by UI

registerAppTool(
  server,
  "show-cart",
  {
    description: "Display the user's shopping cart",
    _meta: {
      ui: {
        resourceUri: "ui://shop/cart.html",
        visibility: ["model"],
      },
    },
  },
  async () => {
    const cart = await getCart();
    return { content: [{ type: "text", text: JSON.stringify(cart) }] };
  },
);

Example: Tool hidden from model, only callable by UI

registerAppTool(
  server,
  "update-quantity",
  {
    description: "Update item quantity in cart",
    inputSchema: { itemId: z.string(), quantity: z.number() },
    _meta: {
      ui: {
        resourceUri: "ui://shop/cart.html",
        visibility: ["app"],
      },
    },
  },
  async ({ itemId, quantity }) => {
    const cart = await updateCartItem(itemId, quantity);
    return { content: [{ type: "text", text: JSON.stringify(cart) }] };
  },
);

See

registerAppResource to register the HTML resource referenced by the tool