mcp-ts

Product demos

Example demos

A featured walkthrough followed by focused examples for agent UIs, middleware, and MCP-powered app experiences.

Vercel AI SDK

AI SDK + remote MCP servers

Watch a Vercel AI SDK app call remote MCP tools through mcp-ts with session management and realtime transport.

Remote toolsAI SDK

LangChain + AG-UI

AG-UI middleware

Streaming middleware that connects LangChain agents to AG-UI with an interaction model built for responsive interfaces.

LangChainAG-UIStreaming

mcp-ts apps

MCP Apps

Tool-driven interfaces that expose MCP capabilities through focused, interactive application surfaces.

Interactive UIToolingApps

Why mcp-ts?

A lightweight, TypeScript-first MCP client for React and serverless apps. Features Redis-backed sessions and real-time updates via SSE.

Server-Side

Build robust MCP connections with stateless session management and SSE endpoints for real-time updates.

import { MCPClient } from '@mcp-ts/sdk/server';

const client = new MCPClient({
  serverUrl: 'https://mcp.example.com',
  identity: 'user-123'
});

await client.connect();

Client-Side

Seamlessly integrate MCP connections into your React applications with the useMcp hook and automatic state synchronization.

import { useMcp } from '@mcp-ts/sdk/client';

function MyComponent() {
  const { connections, connect } = useMcp({
    url: '/api/mcp/sse',
    identity: 'user-123'
  });

  return <div>...</div>;
}

Frequently Asked Questions

What is mcp-ts and what is it for?

mcp-ts acts as a secure bridge between your AI application (like a Vercel AI SDK chatbot) and Model Context Protocol (MCP) servers. It manages connections, handles complex authentication (OAuth), and persists session state using Storage Backends e.g. Redis, allowing your AI agents to use tools from external services reliably.

Why Server-Sent Events (SSE) instead of WebSockets?

SSE is unidirectional and stateless, making it ideal for serverless environments (like Vercel/Next.js) where maintaining long-lived WebSocket connections is difficult, expensive, or subject to timeout limits.

Can I use this without Redis?

Yes! We support In-Memory and File System storage for local development. However, for production in serverless environments, Redis is required to persist connection state across lambda invocations.

Is this compatible with the Vercel AI SDK?

Absolutely. mcp-ts is designed to plug directly into the AI SDK's streamText andgenerateText functions, allowing LLMs to use MCP tools seamlessly.

How is authentication handled?

The library includes detailed OAuth flows, handling token exchange and refresh automatically, so you can connect to secure MCP servers support (like Neon, Github, etc.) out of the box.