Skip to main content

Getting Started

mcp-ts is a lightweight MCP (Model Context Protocol) client library for JavaScript applications. It provides seamless integration for both server-side and client-side MCP connections with real-time updates.

Why mcp-ts?​

  1. Simple API — Easy-to-use methods for connecting to MCP servers
  2. Framework Ready — Built-in support for Next.js, React, and Vue
  3. SSE — Server-Sent Events for connection and observability
  4. Persistent Sessions — Automatic session management and recovery
  5. Flexible Storage — Multiple backend options (Redis, FS, Memory)
  6. MCP Apps (SEP-1865) — Interactive UIs for MCP tools

Quick Install​

npm install @mcp-ts/sdk

Framework Guides​

We provide first-class support for popular frameworks:

Next.js
App Router and Pages Router support.
Node/Express.js
Complete backend server integration.
React Hook
Native useMcp hook for React apps.
Vue.js
Built-in composable for Vue 3 apps.

Integrations​

Vercel AI SDK​

mcp-ts provides first-class support for the Vercel AI SDK.

  • Aggregated Tools — Use MultiSessionClient to combine tools from multiple MCP servers.
  • Streaming — Perfect integration with streamText and useChat.

Core Concepts​

Understanding these pieces will help you build faster:

  1. Storage Backend — Where your MCP session data lives. Use Redis for production or File System for local dev.
  2. Server Handler — The API route that bridges your storage and the client. See Next.js or Installation.
  3. Client Hook — The frontend composable/hook that manages the SSE connection and tool calls.
  4. Adapters — Transform MCP tools into framework-specific formats. See Adapters.
  5. AG-UI Middleware — Execute MCP tools server-side when using remote agents. See AG-UI Middleware.
  6. MCP Apps — Render interactive UI components from MCP servers. See MCP Apps.

Next Steps​