liveBook · Manning

Mcp client

As explained in Build AI-Enhanced Web Apps

A client that implements the Model Context Protocol to discover and invoke capabilities exposed by an MCP server on behalf of an application or agent.

An MCP client connects an application to one or more MCP servers. It discovers and invokes server-exposed tools, prompts, and resources, then passes structured results back to the application. The client handles protocol communication; an AI agent handles decisions about whether to use a capability. section 12.2 section 12.4

In a Next.js chat integration, the request follows this path:

  • A React chat interface sends the user’s message to an API route. section 12.3.2
  • The route starts a local MCP server through a stdio transport, creates a client, and retrieves the server’s tools. section 12.3.2
  • The model or agent receives those tools and can invoke one. The server executes the external request and returns a result for the chat response. section 12.3.2 section 12.5.2

Connect from a Next.js API route

With the Vercel AI SDK, create a stdio transport for the Node.js server, then discover its tools: const transport = new StdioClientTransport({ command: 'node', args: ['src/stdio/server.js'], }); const mcpClient = await experimental_createMCPClient({ transport }); const tools = await mcpClient.tools(); Pass `tools` into `streamText` with the chat messages and model. A `useChat` frontend can send messages to the route and render the streamed response. Close the client when the response finishes or an error occurs. section 12.3.2

For a LangChain.js agent, `MultiServerMCPClient` is an alternative: configure a stdio server, call `getTools()`, and give the tools to a LangChain agent alongside the Gemini model. The API route invokes the agent, closes the client, and streams the output to the UI. Keep external-API error handling in the MCP server so failures produce predictable responses. section 12.5.2 section 12.8

Figure 12.3 How the Vercel AI SDK communicates with a local MCP server through stdio transport. The MCP client spawns the server as a separate Node.js process, and they exchange JSON-RPC messages via stdin/stdout. When the model calls a tool like get-chuck-joke(), the request flows through stdio to the MCP server, which executes the actual HTTP request and returns the response.

Trace how a local client exchanges requests and results with a separate server process over stdio. section 12.3.2

How Build AI-Enhanced Web Apps covers it

How deep it goes
Walks through client creation, tool discovery, route integration, and cleanup; does not detail protocol implementation.
Examples
Uses a chat application whose MCP tool retrieves a fact from an external jokes API.
What it assumes
Assumes JavaScript web-app development while introducing the distinct roles of MCP clients, servers, and agents.
What you can do after
Build it from scratch in a Next.js route using the Vercel AI SDK, or apply it via LangChain.js.
How it connects
Ties MCP servers and stdio transport to AI agents, tool calling, Next.js API routes, and streamed chat interfaces.

Also explained in

Compare how 8 books explain mcp client →

Related concepts

This explainer was generated by Manning's knowledge graph from the text of Build AI-Enhanced Web Apps. The section links point to the parts of the book it draws on.