Build widgets

resources/
└── product-results/
    └── widget.tsx

import { McpUseProvider, useWidget, type WidgetMetadata } from "mcp-use/react";
import { z } from "zod";

const propSchema = z.object({
  query: z.string(),
  results: z.array(
    z.object({
      id: z.string(),
      name: z.string(),
      price: z.number(),
    }),
  ),
});

type ProductResultsProps = z.infer<typeof propSchema>;

export const widgetMetadata: WidgetMetadata = {
  description: "Display product search results",
  props: propSchema,
  exposeAsTool: false,
};

export default function ProductResults() {
  const { props, isPending } = useWidget<ProductResultsProps>();

  if (isPending) {
    return <McpUseProvider>Loading products...</McpUseProvider>;
  }

  return (
    <McpUseProvider>
      <main>
        <h2>Results for {props.query}</h2>
        <ul>
          {props.results.map((product) => (
            <li key={product.id}>
              {product.name} - ${product.price}
            </li>
          ))}
        </ul>
      </main>
    </McpUseProvider>
  );
}

import { MCPServer, text, widget } from "mcp-use/server";
import { z } from "zod";

const productSchema = z.object({
  id: z.string(),
  name: z.string(),
  price: z.number(),
});

const productResultsSchema = z.object({
  query: z.string(),
  results: z.array(productSchema),
});

const server = new MCPServer({
  name: "product-search",
  version: "1.0.0",
});

async function searchProducts(query: string) {
  return [
    { id: "sku_123", name: `${query} starter kit`, price: 29 },
  ];
}

server.tool(
  {
    name: "search-products",
    description: "Search products and show the results in a widget",
    schema: z.object({
      query: z.string().describe("Search query"),
    }),
    outputSchema: productResultsSchema,
    annotations: {
      readOnlyHint: true,
      destructiveHint: false,
      openWorldHint: true,
    },
    widget: {
      name: "product-results",
      invoking: "Searching products...",
      invoked: "Products loaded",
    },
  },
  async ({ query }) => {
    const results = await searchProducts(query);

    return widget({
      props: { query, results },
      output: text(`Found ${results.length} products matching "${query}".`),
    });
  },
);

npm run dev