mcp-use weekly downloads statistics

<div align="center"> <a href="https://mcp-use.com"> <img alt="mcp-use" src="https://raw.githubusercontent.com/mcp-use/mcp-use/main/docs/logo/banner-mcp-use.webp" width="100%"> </a> <br /><br /> <div id="user-content-toc"> <ul align="center" style="list-style: none;"> <summary> <h1>The TypeScript framework for MCP</h1> <h3>Build, test, and ship MCP servers, ChatGPT plugins, Claude connectors</h3> </summary> </ul> </div> <p> Fully Typed, native Views and MCP Apps support, built-in Inspector and first class Agent experience. </p> <p> <a href="https://docs.mcp-use.com/v2/typescript/getting-started/welcome"><strong>Documentation</strong></a> · <a href="https://inspector.mcp-use.com/inspector"><strong>Inspector</strong></a> · <a href="#examples"><strong>Examples</strong></a> · <a href="https://manufact.com"><strong>Deploy</strong></a> </p> <p> <a href="https://www.npmjs.com/package/mcp-use"> <img src="https://img.shields.io/npm/v/mcp-use.svg?label=npm&amp;color=orange" alt="npm version"> </a> <a href="https://www.npmjs.com/package/mcp-use"> <img src="https://img.shields.io/npm/dw/mcp-use.svg" alt="npm downloads"> </a> <a href="https://manufact.com"> <img src="https://img.shields.io/badge/made%20by-manufact.com-blue" alt="made by manufact.com"> </a> <a href="https://github.com/mcp-use/mcp-use/blob/main/LICENSE"> <img src="https://img.shields.io/github/license/mcp-use/mcp-use" alt="MIT license"> </a> <a href="https://discord.gg/XkNkSkMz3V"> <img src="https://dcbadge.limes.pink/api/server/XkNkSkMz3V?style=flat" alt="Discord"> </a> </p> <br /><br /> </div>

[!NOTE] Migrating from v1? Give it to your agent:

Migrate this mcp-use project to v2 following
https://docs.mcp-use.com/v2/typescript/server/migration

Read the migration guide →

Get started

Start with your agent

Build an MCP server: https://mcp-use.com/prompt.md

Read the prompt →

Start with code

npx -y create-mcp-use-app@latest

Run npm run dev in the generated project · open http://localhost:3000/mcp/inspector

TS Docs

Everything you need to ship MCP

<table> <tr> <td width="50%" valign="top"> <h3>Fully typed</h3> <p>Zod schemas flow from tools to structured results, View props, and tool calls.</p> </td> <td width="50%" valign="top"> <h3>Native Views</h3> <p>Bind React Views directly to tools and ship interactive apps without custom extension wiring.</p> </td> </tr> <tr> <td width="50%" valign="top"> <h3>Agent-first and headless</h3> <p>Scaffold, invoke, inspect, screenshot, and deploy through your agent.</p> </td> <td width="50%" valign="top"> <h3>Built-in debugging tools</h3> <p>Inspect tools and Views in the browser or headlessly through the CLI.</p> </td> </tr> </table>

Quickstart

The scaffold gives you the server, TypeScript configuration, development scripts, Inspector, and a React view pipeline. Start it once and the MCP endpoint also serves a client-ready landing page with its connection URL and setup instructions.

Replace its index.ts with a view-bound tool like this:

<table><tr><td> <details> <summary><strong><code>index.ts</code></strong> — Server entry file for tool definition and metadata</summary>

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

const server = new MCPServer({
  name: "weather-app",
  title: "Weather App",
  version: "1.0.0",
});

const weatherInput = z.object({
  city: z.string().describe("City to look up"),
});

const weatherOutput = z.object({
  city: z.string(),
  temperature: z.number(),
  conditions: z.string(),
});

export const getWeather = server.tool(
  {
    name: "get-weather",
    title: "Get weather",
    description: "Get the current weather for a city",
    inputSchema: weatherInput,
    outputSchema: weatherOutput,
    view: { name: "weather-card" },
    annotations: {
      readOnlyHint: true,
      destructiveHint: false,
      openWorldHint: true,
    },
  },
  async ({ city }) => {
    const weather = {
      city,
      temperature: 22,
      conditions: "Sunny",
    };

    return {
      content: [
        {
          type: "text",
          text: `Weather in ${city}: ${weather.conditions}, ${weather.temperature}°C`,
        },
      ],
      structuredContent: weather,
    };
  },
);

export default server;

</details> </td></tr></table>

Explore MCP server tools →

Add Views to your tools

Create views/weather-card/view.tsx. The directory name matches view.name on the tool:

<table><tr><td> <details> <summary><strong><code>view.tsx</code></strong> — Return a view from your tools: React weather card</summary>

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

export default function WeatherCard() {
  const { status, toolOutput, toolInput } =
    useToolContext<"get-weather">();
  const refresh = useCallTool("get-weather");

  if (status === "pending") {
    return <p>Checking the weather in {toolInput?.city ?? "your city"}…</p>;
  }
  if (status === "error") return <p>Could not load the weather.</p>;

  const weather = refresh.data?.structuredContent ?? toolOutput;…