> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mcp-use.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Environments

> Use the MCP client in Node.js, browser, and React

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.

```typescript theme={null}
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.

```typescript theme={null}
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();
}
```

<Warning>
  Do not hardcode secrets in browser bundles. Use OAuth or a backend proxy.
</Warning>

## React

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

```bash theme={null}
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](/v2/typescript/client/usemcp) for connection setup and
[MCP Apps](/v2/typescript/mcp-apps) for building and hosting Views.