MCP Client Agent

Connect to any Model Context Protocol server, discover tools dynamically, and let the AI use them in a chat interface. Includes a demo MCP server with weather and calculator tools.

Newtoolsadvancedmcp model-context-protocol dynamic-tools agent tool-discovery

Loading interactive preview...

Installation

Option 1: Install via CLI

pnpm dlx shadcn@latest add https://ai-sdk-patterns.vercel.app/r/mcp-client

Automatically installs the pattern and its dependencies in your project.

Option 2: Copy or Download

Download the complete pattern as a standalone Next.js project.

Usage

1. Set up environment variables

# .env.local

ANTHROPIC_API_KEY=your_anthropic_key

OPENAI_API_KEY=your_openai_key

GOOGLE_GENERATIVE_AI_API_KEY=your_google_key

Add your AI provider API key to enable real functionality.

2. Run the development server

npm run dev

# or

pnpm dev

# or

yarn dev

Open http://localhost:3000 to see the pattern in action.

3. Customize for your needs

The pattern is ready to use. Modify the components, API routes, and styling to fit your application.

Update the UI components in app/page.tsx
Modify API logic in app/api/
Adjust styling with Tailwind CSS classes
Add your own business logic and data sources

Use Cases

Extensible AI Assistants

Build AI assistants that connect to any MCP-compatible tool server, gaining new capabilities without code changes.

Enterprise Tool Integration

Connect AI agents to internal APIs, databases, and services exposed as MCP servers for secure, governed tool access.

Developer Tooling Agents

Create coding assistants that use MCP to access file systems, Git repos, package registries, and CI/CD pipelines.

Dynamic Plugin Systems

Build AI platforms where users can add new tool servers on the fly, extending the AI's capabilities without redeployment.

Technical Details

Dependencies

• Next.js 16+ (App Router)

• AI SDK v6

• React 19+

• Tailwind CSS

• TypeScript

Files Included

• app/page.tsx

• app/api/mcp/route.ts

• mcp-server.ts

• lib/model.ts

Related patterns

Tool Calling

Let the AI model call functions and use external tools with the multi-step tool loop.

Multi-Step Agent

Build an agent that orchestrates multiple tool calls in sequence, using the AI SDK's maxSteps and automatic tool result forwarding.

MCP Client Agent

Connect to any Model Context Protocol server, discover tools dynamically, and let the AI use them in a chat interface. Includes a demo MCP server with weather and calculator tools.

Newtoolsadvancedmcp model-context-protocol dynamic-tools agent tool-discovery

MCP Server:

http://localhost:3001/mcp

Connected

getWeathercalculateconvertUnits

Loading interactive preview...

Installation

Option 1: Install via CLI

pnpm dlx shadcn@latest add https://ai-sdk-patterns.vercel.app/r/mcp-client

Automatically installs the pattern and its dependencies in your project.

Option 2: Copy or Download

Download the complete pattern as a standalone Next.js project.

Usage

1. Set up environment variables

# .env.local

ANTHROPIC_API_KEY=your_anthropic_key

OPENAI_API_KEY=your_openai_key

GOOGLE_GENERATIVE_AI_API_KEY=your_google_key

Add your AI provider API key to enable real functionality.

2. Run the development server

npm run dev

# or

pnpm dev

# or

yarn dev

Open http://localhost:3000 to see the pattern in action.

3. Customize for your needs

The pattern is ready to use. Modify the components, API routes, and styling to fit your application.

Update the UI components in app/page.tsx
Modify API logic in app/api/
Adjust styling with Tailwind CSS classes
Add your own business logic and data sources

Use Cases

Extensible AI Assistants

Build AI assistants that connect to any MCP-compatible tool server, gaining new capabilities without code changes.

Enterprise Tool Integration

Connect AI agents to internal APIs, databases, and services exposed as MCP servers for secure, governed tool access.

Developer Tooling Agents

Create coding assistants that use MCP to access file systems, Git repos, package registries, and CI/CD pipelines.

Dynamic Plugin Systems

Build AI platforms where users can add new tool servers on the fly, extending the AI's capabilities without redeployment.

Technical Details

Dependencies

• Next.js 16+ (App Router)

• AI SDK v6

• React 19+

• Tailwind CSS

• TypeScript

Files Included

• app/page.tsx

• app/api/mcp/route.ts

• mcp-server.ts

• lib/model.ts

Related patterns

Tool Calling

Let the AI model call functions and use external tools with the multi-step tool loop.

Multi-Step Agent

Build an agent that orchestrates multiple tool calls in sequence, using the AI SDK's maxSteps and automatic tool result forwarding.