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

# Agent with MCP

> Build an AI SDK agent connected to an MCP server

You can build an AI SDK agent connected to an MCP server and expose it through one streaming endpoint.

## Install and configure

Install `@mcpjam/sdk` first. It provides `MCPClientManager`, which connects your agent to an MCP server and exposes MCP tools to AI SDK.

```bash theme={null}
npm i @mcpjam/sdk
```

## Build the agent

Use `MCPClientManager` to connect to your MCP server, fetch AI SDK-compatible tools, and pass them directly into `streamText` in your `/api/chat` handler.

```ts theme={null}
import { MCPClientManager } from "@mcpjam/sdk";
import {
  convertWidgetMessagesToModelMessages,
  createOpenAI,
  stepCountIs,
  streamText,
  type UIMessage,
} from "@openchatwidget/sdk";

app.post("/api/chat", async (request, response) => {
  const { messages } = request.body as { messages: UIMessage[] };

  const openai = createOpenAI({
    apiKey: process.env.OPENAI_API_KEY,
  });

  const manager = new MCPClientManager();
  await manager.connectToServer("workspace", {
    url: "https://mcp.notion.com/mcp",
    requestInit: {
      headers: {
        Authorization: `Bearer ${process.env.NOTION_TOKEN}`,
      },
    },
  });

  const mcpTools = await manager.getToolsForAiSdk(["workspace"]);

  const result = streamText({
    model: openai("gpt-4o-mini"),
    system: "Use MCP tools when needed.",
    messages: await convertWidgetMessagesToModelMessages(messages),
    stopWhen: stepCountIs(10),
    tools: { ...mcpTools },
    onFinish: async () => {
      await manager.disconnectAllServers();
    },
    onAbort: async () => {
      await manager.disconnectAllServers();
    },
    onError: async () => {
      await manager.disconnectAllServers();
    },
  });

  result.pipeUIMessageStreamToResponse(response);
});
```

Then point your widget at the same endpoint:

```tsx theme={null}
<OpenChatWidget url="http://localhost:8787/api/chat" />
```

## How this appears in Open Chat Widget

The widget displays MCP tool execution as normal AI SDK tool parts:

* Tool cards show each tool call and status (running, complete, denied, error).
* Approval-required tools can be approved or denied in the chat UI.
* Responses keep streaming while tools are called in agent steps.

Because this is standard AI SDK tool streaming, MCP and non-MCP tools can be mixed in one agent.

### Example

<img src="https://mintcdn.com/openchatwidget/cxJXEUvhkJQLfRXd/images/mcp-example.png?fit=max&auto=format&n=cxJXEUvhkJQLfRXd&q=85&s=c7f5c13a3391c330b1aa582dddf84f6e" alt="MCP example in Open Chat Widget" width="3960" height="2688" data-path="images/mcp-example.png" />