mcp-use - The fullstack MCP framework to develop MCP Apps for ChatGPT / Claude and MCP Servers for AI Agents.

The root @mcp-use/client import uses package conditions to select its runtime implementation. Node gets the Node entry; browsers and other default environments get the browser-safe entry. React connection management is available from a separate entry point.

Environment	Import	HTTP	Stdio	Config files	Code Mode
Node.js `>=22.22.2`	`@mcp-use/client`	Yes	Yes	Yes	Yes
Browser	`@mcp-use/client`	Yes	No	No	No
React	`@mcp-use/client/react`	Yes	No	No	No

Node.js

The Node entry includes HTTP and stdio transports, filesystem configuration, Code Mode, and Node OAuth helpers.

import { MCPClient, loadConfigFile } from "@mcp-use/client";

const client = new MCPClient({
  mcpServers: {
    api: { url: "https://api.example.com/mcp" },
    fs: {
      command: "npx",
      args: ["-y", "@modelcontextprotocol/server-filesystem", "/tmp"],
    },
  },
});

const clientFromFile = new MCPClient(loadConfigFile("./mcp-config.json"));

try {
  const connections = await client.connectAll();
  await connections.api.callTool("ping", {});
} finally {
  await Promise.all([client.close(), clientFromFile.close()]);
}

Browser

The browser entry exposes the HTTP connection API and browser OAuth support. It does not include process spawning, filesystem configuration, or local code execution.

import { MCPClient } from "@mcp-use/client";

const client = new MCPClient({
  mcpServers: {
    api: { url: "https://api.example.com/mcp" },
  },
});

try {
  const connection = await client.connect("api");
  await connection.callTool("tool", {});
} finally {
  await client.close();
}

Do not hardcode secrets in browser bundles. Use OAuth or a backend proxy.

React

Install the client and your application’s supported React version:

npm install @mcp-use/client@beta react

@mcp-use/client/react provides connection-management APIs such as useMcp, McpClientProvider, useMcpClient, and useMcpServer. It also exports ViewRenderer for hosts that render an MCP App View. Code running inside a View uses the View APIs from mcp-use/react, including useToolContext, useCallTool, and useViewState. These hooks communicate with the host; they do not create or manage MCP server connections. See React integration for connection setup and MCP Apps for building and hosting Views.

Get Started

MCP Server

MCP Apps

MCP Client

MCP Agent

Tooling

Environments

Node.js

Browser

React

​Node.js

​Browser

​React

Node.js

Browser

React