> ## 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.

# Quickstart

> Get started with mcp-use in minutes

**mcp-use** is a unified MCP framework to build **MCP servers**, **MCP clients** and **MCP Agents**.

```mermaid theme={null}
%%{init: {'theme':'neutral'}}%%
graph LR
    Agent[MCP Agent] -->|uses| Client[MCP Client]
    Client -->|connects to| Server[MCP Server]
    Server -->|provides tools| Client
```

| Section               | Description                                                                                   |                                                                                                               |
| --------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- |
| [Agent](#mcp-agent)   | An AI Agent with tool calling capabilities through MCP connections                            | [Examples](https://github.com/mcp-use/mcp-use/tree/main/libraries/typescript/packages/mcp-use/examples/agent) |
| [Client](#mcp-client) | A full featured MCP Client implementation for TypeScript with node, browser and react support | [Examples](https://github.com/mcp-use/mcp-use/tree/main/examples/client)                                      |
| [Server](#mcp-server) | The MCP Server framework implementation for TypeScript, with Apps SDK and MCP-UI support      | [Examples](https://github.com/mcp-use/mcp-use/tree/main/examples/server)                                      |

## MCP Agent

**mcp-use** has a complete MCP Agent implementation for TypeScript.
**MCP Agents** are AI-powered agents that can use tools from MCP servers to accomplish complex tasks. They reason across multiple steps, selecting and executing tools as needed.
Building such agents is easy with **mcp-use**, all you need is an LLM and the MCP Client.

<CodeGroup>
  ```bash yarn theme={null}
  yarn add mcp-use @langchain/openai
  ```

  ```bash npm theme={null}
  npm install mcp-use @langchain/openai
  ```

  ```bash pnpm theme={null}
  pnpm add mcp-use @langchain/openai
  ```
</CodeGroup>

<Note>
  The agent requires a LangChain LLM provider package. The examples use `@langchain/openai`  -  swap for `@langchain/anthropic`, `@langchain/google-genai`, or `@langchain/groq` as needed.
</Note>

Here's a simple example to get you started for an agent with **browser tools** support.

```typescript TypeScript theme={null}
import { ChatOpenAI } from '@langchain/openai' // use your preferred LLM provider
import { MCPAgent, MCPClient } from 'mcp-use'
// Create MCPClient from configuration object
const client = new MCPClient({
  mcpServers: {
    playwright: {
      command: 'npx',
      args: ['@playwright/mcp@latest'],
      env: {
        DISPLAY: ':1'
      }
    }
  }
})

// Create agent with the client
const agent = new MCPAgent({
  llm: new ChatOpenAI({ model: "gpt-5.5" }), // use your preferred LLM provider
  client,
  maxSteps: 30
})

// Run the query
const result = await agent.run({
    prompt: 'Find the best restaurant in San Francisco USING GOOGLE SEARCH'
})
console.log(`\nResult: ${result}`)

// Clean up
await client.closeAllSessions()

```

<Tip>
  For multi-server setups, tool restrictions, and advanced configuration options, see the [Agent Configuration](/typescript/agent/agent-configuration) and [Client Configuration](/typescript/client/client-configuration) guides.
</Tip>

For a complete overview of the mcp-use MCP Agent, see the [MCP Agent](/typescript/agent) documentation.

### Available MCP Servers

mcp-use supports **any MCP server**. Check out the [Awesome MCP Servers](https://github.com/punkpeye/awesome-mcp-servers) list for available options.
Or deploy your own following the instruction [below](#mcp-server).

## MCP Client

**mcp-use** has a complete MCP Client implementation for TypeScript.
It improves the official Model Context Protocol Client SDK with browser and server environments support, react hooks and more.
The mcp-use client has a conformance score of 100/100 based on the official MCP Conformance Tests.

<CodeGroup>
  ```bash yarn theme={null}
  yarn add mcp-use
  ```

  ```bash npm theme={null}
  npm install mcp-use
  ```

  ```bash pnpm theme={null}
  pnpm add mcp-use
  ```
</CodeGroup>

Then create a new MCP Client:

<CodeGroup>
  ```typescript TypeScript theme={null}
  import { MCPClient } from 'mcp-use'

  const client = new MCPClient({
      mcpServers: {
          everything: {
              command: 'npx',
              args: ['-y', '@modelcontextprotocol/server-everything']
          }
      }
  })

  // Initialize all configured sessions
  await client.createAllSessions()

  // Get the session for a specific server
  const session = client.getSession('everything')

  // List available tools
  const tools = await session.listTools()
  console.log(`Available tools: ${tools.map(t => t.name).join(', ')}`)

  // Call a specific tool with arguments
  const result = await session.callTool(
      'add',
      { a: 1, b: 2 }
  )
  ```

  ```typescript React theme={null}
  import { useMcp } from 'mcp-use/react'

  const { tools, callTool } = useMcp({
      url: 'http://localhost:3000/mcp'
  })

  const result = await callTool('add', { a: 1, b: 2 })
  ```
</CodeGroup>

To learn more about the MCP Client, see the [MCP Client](/typescript/client) documentation.

## MCP Server

**mcp-use** has a complete MCP server framework implementation for TypeScript.
It improves the official Model Context Protocol SDK with support for Edge Runtime, MCP Apps, ChatGPT Apps SDK, and MCP-UI. In addition, it supports all official MCP features and achieves a conformance score of 100/100 based on the official MCP Conformance Tests.

```bash theme={null}
npx create-mcp-use-app my-mcp-server
cd my-mcp-server
npm install
npm run dev
```

This command will create a new MCP server with:

* A complete TypeScript MCP server project structure.
* Example MCP Tools and Resources to get you started.
* Example UI Widgets React components in `resources/` folder exposed as tools and resources in MCP Apps and ChatGPT Apps SDK format.
* Pre-configured server metadata (title, instructions, icons, websiteUrl) with your project name.
* Hot Module Reloading (HMR) - modify tools/prompts/resources without restarting or dropping connections.
* Automatically launches an MCP Inspector in your browser to test your server.

### Project Structure

After creation, your project will have this structure:

```
my-mcp-server/
├── resources/                     # React widgets (MCP Apps + ChatGPT)
│   └── product-search-result/
│       ├── widget.tsx             # Widget entry point
│       ├── components/            # Sub-components
│       └── types.ts
├── public/                        # Static assets (icons, images, etc.)
│   ├── icon.svg
│   └── favicon.ico
├── index.ts                       # MCP server entry point
├── package.json
├── tsconfig.json
└── README.md
```

### Running Your MCP Server

Commands:

```bash theme={null}
npm run dev   # start the development server
npm run build # build the server
npm run start # start the production server
npm run deploy # deploy the server to Manufact cloud
```

When you run your MCP server, it will be available at:

* **MCP Endpoint**: `http://localhost:3000/mcp` - For MCP client connections
* **MCP Inspector**: `http://localhost:3000/inspector`

### Deploy Your MCP Server

You can deploy your MCP server on any platform. Build your MCP server with `npm run build` and start the production server with `npm run start`.
Or you can deploy it on [Manufact Cloud](https://manufact.com).
For detailed instructions, see the [Deploy Your Server](/typescript/server/deployment/mcp-use) guide.

### Next Steps

* [Core features](/typescript/server/tools): Learn how to create MCP tools, prompts and resources.
* [MCP Apps](/typescript/server/mcp-apps): Build interactive widgets with the standard MCP Apps protocol (works with ChatGPT and MCP clients).
* [ChatGPT Apps SDK](/typescript/server/mcp-apps): ChatGPT-specific widget protocol details.
* [Configuration](/typescript/server/configuration): Advanced configuration and deployment options.
* [Deploy Your Server](/typescript/server/deployment/mcp-use) - Deploy to production with one command

***

## Next Steps

<CardGroup cols={3}>
  <Card title="Agent Configuration" icon="cog" href="/typescript/agent/agent-configuration">
    Configure your Agent and connected MCP servers
  </Card>

  <Card title="MCP Apps" icon="app-window-mac" href="/typescript/server/mcp-apps">
    Build interactive widgets for ChatGPT and MCP Apps clients.
  </Card>

  <Card title="Deployment" icon="cloud" href="/typescript/server/deployment/mcp-use">
    Deploy your MCP server to production with one command.
  </Card>
</CardGroup>

<Tip>
  **Need Help?** Join our [Discord](https://discord.gg/XkNkSkMz3V) or [Github](https://github.com/mcp-use/mcp-use) communities.
</Tip>