Overview

product-search/
├── index.ts
├── views/
│   └── product-results/
│       └── view.tsx
├── public/
├── mcp-env.d.ts
└── package.json

import { MCPServer } from "mcp-use";
import { z } from "zod";

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

export const searchProducts = server.tool(
  {
    name: "search-products",
    inputSchema: z.object({
      query: z.string(),
    }),
    outputSchema: z.object({
      results: z.array(
        z.object({
          id: z.string(),
          name: z.string(),
        }),
      ),
    }),
    view: {
      name: "product-results",
    },
  },
  async ({ query }) => {
    const results = [
      { id: "starter-kit", name: `${query} starter kit` },
      { id: "travel-kit", name: `${query} travel kit` },
    ];

    return {
      content: [
        {
          type: "text",
          text: `Found ${results.length} products matching "${query}".`,
        },
      ],
      structuredContent: {
        results,
      },
    };
  },
);

export default server;

import { useToolContext } from "mcp-use/react";

export default function ProductResults() {
  const { status, toolInput, toolOutput, error } =
    useToolContext<"search-products">();

  if (status === "error") {
    return <p>{error.message}</p>;
  }

  if (status === "pending") {
    return <p>Searching for {toolInput?.query ?? "products"}…</p>;
  }

  return (
    <main>
      <h2>Product results</h2>
      <ul>
        {toolOutput.results.map(({ id, name }) => (
          <li key={id}>{name}</li>
        ))}
      </ul>
    </main>
  );
}