Overview

import { MCPServer } from "mcp-use/server";

const server = new MCPServer({
  name: "inventory-server",
  title: "Inventory Server",
  version: "1.0.0",
  description: "Look up products and prepare inventory summaries",
  instructions:
    "Call search-products before get-product-details. Confirm availability before preparing an order.",
  baseUrl: process.env.MCP_URL || "http://localhost:3000",
});

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

server.tool(
  {
    name: "get-time",
    description: "Return the current server time as an ISO timestamp",
    schema: z.object({}),
    annotations: {
      readOnlyHint: true,
      destructiveHint: false,
      openWorldHint: false,
    },
  },
  async () => text(new Date().toISOString()),
);

import { object } from "mcp-use/server";

server.resource(
  {
    name: "inventory-summary",
    uri: "inventory://summary",
    title: "Inventory Summary",
    description: "Current warehouse inventory totals",
  },
  async () =>
    object({
      warehouses: 3,
      products: 1284,
      lowStockItems: 17,
    }),
);

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

server.prompt(
  {
    name: "summarize-inventory",
    description: "Create an inventory summary for a specific audience",
    schema: z.object({
      audience: z.enum(["operations", "finance", "support"]),
      timeframe: z.string().describe("Reporting period, such as today or Q2"),
    }),
  },
  async ({ audience, timeframe }) =>
    text(
      `Summarize inventory changes for ${audience} during ${timeframe}. Include risks, causes, and next actions.`,
    ),
);

// resources/product-search-result/widget.tsx
import React from "react";
import { useWidget } from "mcp-use/react";

type ProductSearchResultProps = {
  query: string;
  results: { id: string; name: string }[];
};

const ProductSearchResult: React.FC = () => {
  const { props, isPending } = useWidget<ProductSearchResultProps>();

  if (isPending) {
    return <div className="p-4">Loading...</div>;
  }

  const query = props.query ?? "";
  const results = props.results ?? [];

  return (
    <div className="p-4">
      <h3>Results for "{query}"</h3>
      <ul>
        {results.map((result) => (
          <li key={result.id}>{result.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default ProductSearchResult;

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

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

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

npm run dev