Connecting to MCP Servers
The Model Context Protocol lets an AI client discover and call tools a server exposes, over JSON-RPC 2.0. Below is a live client & server talking to each other in your browser — watch the handshake, then invoke real tools — followed by how to build and register your own.
How a client and server connect
initialize
Client sends protocol version + capabilities; server replies with its own.
notifications/initialized
Client confirms the handshake is complete. Session is now live.
tools/list
Client discovers the tools the server exposes, each with a JSON schema.
tools/call
Client invokes a tool by name with arguments; server runs it and returns content.
Try it: a working MCP client & server
A real MCP client and server speaking JSON-RPC 2.0 over an in-browser transport — no external server or network. The handshake runs on load; pick a tool and invoke it. The get_current_time tool returns your real clock, dice use real randomness, and UUIDs use the Web Crypto API.
Client · call a tool
Returns the real current date & time from your browser clock.
no arguments
JSON-RPC 2.0 trace
1 · Minimal MCP server
Expose one tool, hello_mcp, with the high-level McpServer helper. Your client discovers it once the server connects.
#!/usr/bin/env node
import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";
const server = new McpServer({
name: "demo-mcp-server",
version: "1.0.0",
});
// Register a tool the client can discover via tools/list and run via tools/call
server.registerTool(
"hello_mcp",
{
title: "Hello MCP",
description: "Returns a greeting from the MCP server",
inputSchema: { name: z.string().default("developer") },
},
async ({ name }) => ({
content: [{ type: "text", text: `Hello ${name}, MCP server is connected.` }],
}),
);
const transport = new StdioServerTransport();
await server.connect(transport); // speak MCP over stdio2 · Register it in your client
Add the server to your MCP client config. Use an absolute path so the process launches reliably.
{
"mcpServers": {
"demo": {
"command": "node",
"args": ["/absolute/path/demo-mcp-server/index.js"],
"env": { "NODE_ENV": "production" }
}
}
}Verification checklist
- 01 Server starts with no runtime errors.
- 02 Client lists the MCP server as connected.
- 03
hello_mcpappears in the tools list. - 04 A
tools/callreturns the greeting text.
Common issues
Server not detected: confirm the command and absolute file path in the client config.
Tool list empty: verify the server registered tools and declared the tools capability.
Process exits immediately: check the Node version and that the SDK is installed.
Timeouts: inspect stderr; avoid long startup work in server boot, and never write logs to stdout on a stdio transport.