MCPSERV.CLUB
jiangyan

Typescript MCP Demo

MCP Server

Interactive chat with Claude using multiple MCP servers

Stale(50)
5stars
2views
Updated Jul 6, 2025

About

A full‑stack demo that showcases Model Context Protocol integration with Anthropic’s Claude LLM. It runs two Node.js MCP servers offering specialized tools, an Express host app for routing, and a browser chat interface that dynamically discovers and executes those tools.

Capabilities

Resources
Access data sources
Tools
Execute functions
Prompts
Pre-built templates
Sampling
AI model interactions

MCP Chat Demo

The Typescript MCP Demo is a showcase of how the Model Context Protocol (MCP) can be leveraged to build a seamless, tool‑powered conversational experience with Anthropic’s Claude. At its core, the project solves a common pain point for developers: connecting an LLM to domain‑specific functionality without embedding that logic directly into the model or writing custom middleware for every new capability. By exposing a set of well‑defined MCP servers, the demo demonstrates how an AI assistant can discover, invoke, and reason with external services in real time.

The server architecture is deliberately modular. Two separate Node.js MCP servers—TodoPlan and Project—each host a curated set of tools that Claude can call. The TodoPlan server offers quick access to categorized todo items and overarching plans, while the Project server provides detailed information about named projects. This separation mirrors real‑world scenarios where an assistant must juggle multiple data sources, such as a calendar service and a project management API. The Express‑based host application acts as the bridge between users, Claude, and these servers, managing authentication, request routing, and streaming of tool execution results back to the chat interface.

For developers, this setup delivers several tangible benefits. First, it abstracts away the intricacies of MCP: servers expose a simple JSON schema for each tool, and the host app handles streaming SSE endpoints. Second, the dynamic discovery feature means that adding a new MCP server requires no changes to Claude’s prompt or the front‑end; the host automatically registers available tools. Third, the two‑panel UI provides instant visibility into tool calls and their outcomes, aiding debugging and fostering trust in the assistant’s actions.

Typical use cases include productivity assistants that pull tasks from a task manager, fetch project status updates from a collaboration platform, or retrieve contextual data from internal databases. By integrating these services via MCP, developers can build assistants that not only converse but also act—scheduling meetings, updating tickets, or generating reports—all while keeping business logic outside the model. The demo’s architecture showcases how such integrations can be achieved cleanly, maintainably, and at scale.