> ## 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 picks Node or browser behavior via package conditions. React is a separate entry.

| Environment | Import                  | HTTP | Stdio | Code mode |
| ----------- | ----------------------- | ---- | ----- | --------- |
| Node.js 20+ | `@mcp-use/client`       | ✅    | ✅     | ✅         |
| Browser     | `@mcp-use/client`       | ✅    | ❌     | ❌         |
| React       | `@mcp-use/client/react` | ✅    | ❌     | ❌         |

## Node.js

```typescript theme={null}
import { MCPClient, loadConfigFile } from "@mcp-use/client";

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

// Or from a JSON file
const client2 = new MCPClient(loadConfigFile("./mcp-config.json"));

const connections = await client.connectAll();
await connections.api.callTool("ping", {});
await client.close();
```

## Browser

HTTP only. No stdio, config files, or code mode.

```typescript theme={null}
import { MCPClient } from "@mcp-use/client";

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

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

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

## React

```bash theme={null}
npm install @mcp-use/client react
```

See [React integration](/typescript/client/usemcp). Widget rendering hooks are in `mcp-use/react`.