Build your first MCP App

npx create-mcp-use-app my-widget-server --template mcp-apps
cd my-widget-server

my-widget-server/
├── index.ts
├── mcp-env.d.ts
├── views/
│   └── product-search-result/
│       ├── view.tsx
│       ├── components/
│       └── hooks/
├── public/
│   ├── favicon.ico
│   ├── icon.svg
│   └── fruits/
├── package.json
└── tsconfig.json

npm run dev

// index.ts excerpt; server, fruits, and z are defined above.
export const searchFruits = server.tool(
  {
    name: "search-fruits",
    title: "Search fruits",
    description: "Search for fruits and display the results in a view",
    inputSchema: z.object({
      query: z.string().optional().describe("Search query to filter fruits"),
    }),
    outputSchema: z.object({
      query: z.string(),
      results: z.array(
        z.object({
          fruit: z.string(),
          color: z.string(),
        }),
      ),
    }),
    annotations: {
      readOnlyHint: true,
      destructiveHint: false,
      openWorldHint: false,
    },
    view: {
      name: "product-search-result",
      description: "Product search results with carousel and details",
      prefersBorder: true,
    },
  },
  ({ query = "" }) => {
    const results = fruits.filter(
      (fruit) =>
        query === "" || fruit.fruit.toLowerCase().includes(query.toLowerCase()),
    );

    const data = { query, results };

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

export default server;

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

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

  if (status === "pending") {
    return <div className="p-4">Searching…</div>;
  }

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

  const { query, results } = toolOutput;

  return (
    <div className="p-4">
      <h2>
        Results for "{query || "all"}" ({results.length})
      </h2>
      {/* carousel, details, accordion … */}
    </div>
  );
}