Migrate to v2

npm install mcp-use

import { MCPServer } from "mcp-use";

const server = new MCPServer({
  name: "inventory-server",
  version: "2.0.0",
});

export default server;

import { createServer } from "node:http";
import { toNodeHandler } from "mcp-use/node";

createServer(toNodeHandler(server)).listen(3000);

export const search = server.tool(definition, callback);
export { getDetails } from "./tools/get-details.js";

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

const lookup = useDynamicTool<{ id: string }, { value: string }>("lookup");
const result = await lookup.callTool({ id: "item-1" });

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

server.tool({
  name: "weather",
  schema: z.object({ city: z.string() }),
  cb: async ({ city }) => text(await getWeather(city)),
});

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

export const weather = server.tool(
  {
    name: "weather",
    inputSchema: z.object({ city: z.string() }),
    outputSchema: z.object({ forecast: z.string() }),
  },
  async ({ city }) => {
    const result = { forecast: await getWeather(city) };

    return {
      content: [{ type: "text", text: JSON.stringify(result) }],
      structuredContent: result,
    };
  },
);

server.resource(
  {
    name: "settings",
    uri: "app://settings",
    mimeType: "application/json",
  },
  async (uri) => ({
    contents: [
      {
        uri: uri.href,
        mimeType: "application/json",
        text: JSON.stringify({ theme: "dark" }),
      },
    ],
  }),
);

server.resourceTemplate(
  {
    name: "user",
    uriTemplate: "users://{id}",
    complete: {
      id: async (value) =>
        ["alice", "bob"].filter((id) => id.startsWith(value)),
    },
  },
  async (uri, { id }) => ({
    contents: [{ uri: uri.href, text: `User ${String(id)}` }],
  }),
);

server.prompt(
  {
    name: "review",
    schema: z.object({ code: z.string() }),
  },
  async ({ code }) => ({
    messages: [
      {
        role: "user",
        content: { type: "text", text: `Review this code:\n${code}` },
      },
    ],
  }),
);

await ctx.sendNotification("com.example/import-status", {
  status: "started",
});

await ctx.reportProgress(50, 100, "Halfway");
await ctx.sendLog("info", "Import is halfway complete");

await server.notifyToolsChanged();
await server.notifyPromptsChanged();
await server.notifyResourcesChanged();
await server.notifyResourceUpdated("app://settings");

import { acceptedContent, inputRequired, inputResponse } from "mcp-use";
import { z } from "zod";

const confirmationSchema = z.object({ confirmed: z.boolean() });

const response = inputResponse(ctx.inputResponses, "confirm-booking");
if (response.kind === "elicit" && response.action !== "accept") {
  return { content: [{ type: "text", text: "Cancelled" }] };
}

const confirmation = acceptedContent(
  ctx.inputResponses,
  "confirm-booking",
  confirmationSchema,
);
if (confirmation === undefined) {
  return inputRequired({
    inputRequests: {
      "confirm-booking": inputRequired.elicit({
        message: "Book this flight?",
        requestedSchema: confirmationSchema,
      }),
    },
  });
}

if (!confirmation.confirmed) {
  return { content: [{ type: "text", text: "Cancelled" }] };
}

// Perform the side effect only after accepted, validated input is present.

export const search = server.tool(
  {
    name: "search",
    inputSchema: z.object({ query: z.string() }),
    outputSchema: z.object({
      count: z.number(),
    }),
    view: {
      name: "results",
      description: "Search results",
      prefersBorder: true,
    },
  },
  async ({ query }) => {
    const items = await searchItems(query);

    return {
      content: [
        {
          type: "text",
          text: `Found ${items.length} matching items`,
        },
      ],
      structuredContent: { count: items.length },
      _meta: { items },
    };
  },
);

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

type ResultsMeta = {
  items: Array<{ id: string; name: string }>;
};

export default function ResultsView() {
  const view = useToolContext<"search">();

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

  if (view.status === "error") {
    return <div role="alert">{view.error.message}</div>;
  }

  const meta = view.meta as ResultsMeta | undefined;
  const items = meta?.items ?? [];

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

import type { ViewConfig } from "mcp-use/react";

export const viewConfig = {
  autoResize: true,
  displayModes: ["inline", "fullscreen", "pip"],
} satisfies ViewConfig;

// TEMPORARY: mcp-use v1 served views at ui://widget/<name>.html, v2 at ui://views/<name>.html.
// Clients that cached the v1 tool metadata still read the old URI, so rewrite
// resources/read to the v2 URI before it reaches the SDK, then restore the
// requested URI in the response. Remove once all clients have refreshed.
const LEGACY_VIEW_PREFIX = "ui://widget/";
const CURRENT_VIEW_PREFIX = "ui://views/";

function rewriteLegacyViewUri(legacyUri: string): string | undefined {
  if (!legacyUri.startsWith(LEGACY_VIEW_PREFIX) || !legacyUri.endsWith(".html")) {
    return undefined;
  }
  const suffix = legacyUri.slice(LEGACY_VIEW_PREFIX.length, -".html".length);
  if (!suffix) return undefined;
  // v1 could emit ui://widget/<view>.<buildId>.html, but v2 view URIs never
  // include a build id, so strip the trailing build id segment.
  const dotIndex = suffix.lastIndexOf(".");
  const name = dotIndex > 0 ? suffix.slice(0, dotIndex) : suffix;
  return `${CURRENT_VIEW_PREFIX}${name}.html`;
}

// server.basePath is a plain string, so register on the Hono app directly.
server.app.use(server.basePath, async (c, next) => {
  if (c.req.method !== 'POST') return next();

  const body = await c.req.raw.clone().json().catch(() => undefined);
  const legacyUri = body?.method === 'resources/read' ? body.params?.uri : undefined;
  const viewUri = typeof legacyUri === 'string' ? rewriteLegacyViewUri(legacyUri) : undefined;
  if (!viewUri) return next();

  console.log('legacy view uri rewrite:', legacyUri, '->', viewUri);
  const reqHeaders = new Headers(c.req.raw.headers);
  reqHeaders.delete("content-length");
  c.req.raw = new Request(c.req.raw, {
    body: JSON.stringify({ ...body, params: { ...body.params, uri: viewUri } }),
    headers: reqHeaders,
  });
  await next();

  const text = await c.res.text();
  const resHeaders = new Headers(c.res.headers);
  resHeaders.delete("content-length");
  resHeaders.delete("content-encoding");
  c.res = new Response(
    text.replaceAll(JSON.stringify(viewUri), JSON.stringify(legacyUri)),
    { status: c.res.status, statusText: c.res.statusText, headers: resHeaders },
  );
});