Forget Claude Desktop: Build Your Own Custom AI Agent with MCP Client + Server

This is a simplified implementation of the official ModelContextProtocol SDK, aimed at helping developers quickly understand how LLM agents (like Claude) can reason, invoke tools, and interpret the results — step by step.

Unlike most tutorials that rely on Claude Desktop, I built my own MCP client from scratch using the official MCP SDK and Anthropic’s Claude API. This gave me full control and flexibility to customize behavior, tool invocation, and responses—exactly how real AI agents should work.

---

🌟 What You'll Build

You’ll build an AI agent that:

✅ Understands natural queries like

“What’s the weather in Florida?”

✅ Uses Claude as the LLM
✅ Invokes custom tools via MCP (e.g. get-alerts, get-forecast)
✅ Works locally using Node.js, TypeScript, and Open Tool Protocols
✅ Looks like a CLI but works like an agent 🤖

---

📁 Final Project Structure

mcp-ai-agents/
├── mcp-client-typescript/
│   ├── index.ts
│   ├── tsconfig.json
│   └── package.json
├── weather/
│   ├── src/
│   │   └── index.ts
│   ├── tsconfig.json
│   └── package.json

---

✅ Step 1: Setup the MCP Client (Claude Agent)

1.1 Create the Client Directory

mkdir mcp-ai-agents
cd mcp-ai-agents
mkdir mcp-client-typescript
cd mcp-client-typescript

1.2 Initialize and Install Dependencies

npm init -y
npm install @anthropic-ai/sdk @modelcontextprotocol/sdk dotenv
npm install -D typescript @types/node

1.3 Add Basic Setup Files

touch index.ts
touch .env

.env content:

ANTHROPIC_API_KEY=sk-xxx-your-anthropic-key

---

1.4 Configure TypeScript

tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "Node16",
    "moduleResolution": "Node16",
    "outDir": "./build",
    "rootDir": "./",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["index.ts"],
  "exclude": ["node_modules"]
}

package.json (add "type" and "scripts")

{
  "type": "module",
  "scripts": {
    "build": "tsc && chmod 755 build/index.js"
  }
}

---

1.5 MCP Client Code (index.ts)

import { Anthropic } from "@anthropic-ai/sdk";
import {
  MessageParam,
  Tool,
} from "@anthropic-ai/sdk/resources/messages/messages.mjs";
import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";
import readline from "readline/promises";
import dotenv from "dotenv";

dotenv.config();

const ANTHROPIC_API_KEY = process.env.ANTHROPIC_API_KEY;
if (!ANTHROPIC_API_KEY) {
  throw new Error("ANTHROPIC_API_KEY is not set");
}

class MCPClient {
  private mcp: Client;
  private anthropic: Anthropic;
  private transport: StdioClientTransport | null = null;
  private tools: Tool[] = [];

  constructor() {
    this.anthropic = new Anthropic({ apiKey: ANTHROPIC_API_KEY });
    this.mcp = new Client({ name: "mcp-client-cli", version: "1.0.0" });
  }

  async connectToServer(serverScriptPath: string) {
    const command = serverScriptPath.endsWith(".py")
      ? process.platform === "win32" ? "python" : "python3"
      : process.execPath;

    this.transport = new StdioClientTransport({ command, args: [serverScriptPath] });
    this.mcp.connect(this.transport);

    const toolsResult = await this.mcp.listTools();
    this.tools = toolsResult.tools.map((tool) => ({
      name: tool.name,
      description: tool.description,
      input_schema: tool.inputSchema,
    }));
    console.log("✅ Connected to server with tools:", this.tools.map(t => t.name));
  }

  async processQuery(query: string) {
    const messages: MessageParam[] = [{ role: "user", content: query }];
    const finalText = [];

    const response = await this.anthropic.messages.create({
      model: "claude-3-5-sonnet-20241022",
      max_tokens: 1000,
      messages,
      tools: this.tools,
    });

    for (const content of response.content) {
      if (content.type === "text") {
        finalText.push(content.text);
      } else if (content.type === "tool_use") {
        const result = await this.mcp.callTool({
          name: content.name,
          arguments: content.input as object,
        });

        finalText.push(`[Calling tool ${content.name} with args ${JSON.stringify(content.input)}]`);

        messages.push({ role: "user", content: result.content as string });

        const followUp = await this.anthropic.messages.create({
          model: "claude-3-5-sonnet-20241022",
          max_tokens: 1000,
          messages,
        });

        finalText.push(
          followUp.content[0].type === "text" ? followUp.content[0].text : ""
        );
      }
    }

    return finalText.join("\n");
  }

  async chatLoop() {
    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
    console.log("\n🤖 MCP Client Started!\n(Type 'quit' to exit)");

    while (true) {
      const message = await rl.question("\nQuery: ");
      if (message.toLowerCase() === "quit") break;

      const response = await this.processQuery(message);
      console.log("\n" + response);
    }

    rl.close();
  }

  async cleanup() {
    await this.mcp.close();
  }
}

async function main() {
  const mcpClient = new MCPClient();
  const scriptPath = process.argv[2];
  if (!scriptPath) return console.error("❌ Usage: node index.js <path_to_server_script>");

  await mcpClient.connectToServer(scriptPath);
  await mcpClient.chatLoop();
  await mcpClient.cleanup();
}

main();

---

☁️ Step 2: Set Up the Weather Tool Server

2.1 Create and Init Server Folder

cd ..
mkdir weather
cd weather
npm init -y
npm install @modelcontextprotocol/sdk zod
npm install -D typescript @types/node
mkdir src
touch src/index.ts

2.2 tsconfig.json

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "Node16",
    "moduleResolution": "Node16",
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

2.3 package.json

jsonCopyEdit{
  "type": "module",
  "bin": {
    "weather": "./build/index.js"
  },
  "scripts": {
    "build": "tsc && chmod 755 build/index.js"
  },
  "files": [
    "build"
  ]
}

---

2.4 Weather Server Code

Inside src/index.ts:

import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
import { z } from "zod";

const NWS_API_BASE = "https://api.weather.gov";
const USER_AGENT = "weather-app/1.0";

const server = new McpServer({
  name: "weather",
  version: "1.0.0",
  capabilities: { tools: {}, resources: {} },
});

// Helper to fetch NWS API
async function makeNWSRequest<T>(url: string): Promise<T | null> {
  const headers = {
    "User-Agent": USER_AGENT,
    Accept: "application/geo+json",
  };
  try {
    const res = await fetch(url, { headers });
    if (!res.ok) throw new Error("Fetch error " + res.status);
    return await res.json();
  } catch (err) {
    console.error("NWS fetch error:", err);
    return null;
  }
}

// --- Weather Tool: Get Alerts ---
server.tool("get-alerts", "Get weather alerts for a state", {
  state: z.string().length(2),
}, async ({ state }) => {
  const data = await makeNWSRequest(`${NWS_API_BASE}/alerts?area=${state}`);
  if (!data || !data.features?.length) {
    return { content: [{ type: "text", text: "No alerts found." }] };
  }

  const formatted = data.features.map((f: any) =>
    `Event: ${f.properties.event}\nArea: ${f.properties.areaDesc}\n---`
  ).join("\n");

  return {
    content: [{ type: "text", text: formatted }],
  };
});

// --- Weather Tool: Get Forecast ---
server.tool("get-forecast", "Get weather forecast for a location", {
  latitude: z.number(),
  longitude: z.number(),
}, async ({ latitude, longitude }) => {
  const points = await makeNWSRequest(`${NWS_API_BASE}/points/${latitude},${longitude}`);
  const forecastUrl = points?.properties?.forecast;
  if (!forecastUrl) return { content: [{ type: "text", text: "No forecast available." }] };

  const forecastData = await makeNWSRequest(forecastUrl);
  const periods = forecastData?.properties?.periods || [];

  const forecastText = periods.map((p: any) =>
    `${p.name}: ${p.temperature}°${p.temperatureUnit}, ${p.shortForecast}`
  ).join("\n");

  return {
    content: [{ type: "text", text: forecastText }],
  };
});

async function main() {
  const transport = new StdioServerTransport();
  await server.connect(transport);
  console.error("🌤️ Weather MCP Server running...");
}
main();

---

🚀 Step 3: Run Your Agent

3.1 Build both client and server

# From project root
cd weather
npm run build
cd ../mcp-client-typescript
npm run build

3.2 Start the Client + Server

Inside the client directory run:

node build/index.js ../weather/build/index.js

You’ll see:

✅ Connected to server with tools: [ 'get-alerts', 'get-forecast' ]
🤖 MCP Client Started!

Now type your query:

Query: what’s the weather in Florida?

---

🧠 How It Works

🧩 The Client = Claude + MCP SDK
🛠️ The Server = Tool logic exposed via MCP SDK
🗣️ Claude = uses tools when needed (tool_use)
🔁 Client = reads tool_use, sends to server, replies back to Claude
🎯 Final response = intelligent + tool-aware

---

🖼️ Visual Summary

You ➝ Claude ➝ tool_use ➝ MCP Client ➝ Tool Server ➝ result ➝ Claude ➝ Final Answer

---

💬 Example Output

Query: what's the weather in Florida?
[Calling tool get-alerts with args {"state":"FL"}]
... returns active alerts like:

- Rip Currents
- Red Flag Warnings
- Fire Weather Conditions

---

🏁 That's a Wrap!

You’ve now built your first Claude + MCP-powered AI Agent with:

✅ Tool use
✅ Local dev
✅ Type-safe schemas with Zod
✅ Full loop integration

👋 Got Questions or Ideas? If you have any queries or concerns regarding the AI Agent domain, just drop me an email at shayan.developer12@gmail.com.

🔔 Subscribe for more updates, walkthroughs, and deep dives as we build the future of agents together.