Build views

export const searchProducts = server.tool(
  {
    name: "search-products",
    inputSchema: z.object({ query: z.string() }),
    outputSchema: z.object({
      query: z.string(),
      items: z.array(z.object({ id: z.string(), name: z.string() })),
    }),
    view: {
      name: "product-results",
      description: "Interactive product search results",
      csp: { connectDomains: ["https://api.example.com"] },
    },
  },
  async ({ query }) => {
    const data = { query, items: [] };
    return {
      content: [{ type: "text", text: JSON.stringify(data) }],
      structuredContent: data,
    };
  },
);

// views/product-results/view.tsx
import { ThemeProvider, useToolContext } from "mcp-use/react";

export default function ProductResults() {
  const view = useToolContext<"search-products">();
  if (view.status === "pending") return <p>Searching…</p>;
  if (view.status === "error") return <p>{view.error.message}</p>;

  return (
    <ThemeProvider>
      <ul>
        {view.toolOutput.items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </ThemeProvider>
  );
}