MCP Client Template
A template for building MCP (Model Context Protocol) client applications, featuring a Vite + TypeScript frontend and an Express backend. Includes OAuth2.1 authentication and ready-to-use APIs for managing and interacting with MCP servers. Easily exte
What is MCP Client Template?
MCP Client Template is a Model Context Protocol (MCP) server that allows AI assistants like Claude, Cursor, and VS Code to template for building mcp (model context protocol) client applications, featuring a vite + typescript frontend and an express backend. includes oauth2.1 authentication and ready-to-use apis for managi...
A template for building MCP (Model Context Protocol) client applications, featuring a Vite + TypeScript frontend and an Express backend. Includes OAuth2.1 authentication and ready-to-use APIs for managing and interacting with MCP servers. Easily exte
This server falls under the Developer Tools category on MCPgee, the world's largest MCP server directory with 33,000+ servers.
Features
- A template for building MCP (Model Context Protocol) client
Use Cases
Maintainer
Works with
Installation
Manual Installation
npx mcp-client-templateConfiguration
Configuration Details
claude_desktop_config.json
Performance
Response Metrics
Resource Usage
How to Set Up and Use MCP Client Template
MCP Client Template is a full-stack starter project for building custom MCP client applications. It combines a Vite and TypeScript frontend with an Express.js backend, and includes built-in OAuth 2.1 authentication support and ready-to-use REST APIs for managing connections to multiple MCP servers. It is designed to be extended rather than used as a standalone tool.
Prerequisites
- Node.js 18 or later
- npm (bundled with Node.js)
- Git to clone the repository
- Basic familiarity with TypeScript, Vite, and Express.js
- An MCP server to connect to for testing (any publicly available MCP server will work)
Clone the repository
Download the template to your local machine using Git.
git clone https://github.com/andrea9293/mcp-client-template.git
cd mcp-client-templateInstall dependencies
Install all frontend and backend dependencies from the project root.
npm installStart the development servers
Run the Vite frontend and Express backend concurrently. The frontend runs on the Vite default port (5173) and the backend on its configured Express port.
# Start the frontend
npm run dev
# In a separate terminal, start the backend
npm run dev:serverConnect an MCP server via the web interface
Open your browser to http://localhost:5173, use the UI to add an MCP server URL, and the backend will manage the connection. For servers requiring OAuth 2.1, copy the authentication link provided by the interface and complete the flow in a new browser tab.
Customize the template for your use case
Extend the frontend in the src/ directory and backend logic in the server/ directory. The data/ folder stores runtime tokens and connection state — do not edit it manually.
MCP Client Template Examples
Client configuration
This template acts as an MCP client itself. There is no claude_desktop_config.json entry — instead, configure MCP servers through the web interface or directly in the Express backend configuration.
{
"mcpServers": {
"example-server": {
"command": "npx",
"args": ["-y", "@modelcontextprotocol/server-filesystem", "/tmp"]
}
}
}Prompts to try
Actions to perform through the template's web interface after setup.
- Add an MCP server URL through the UI and verify the connection status
- Connect to a server requiring OAuth 2.1 and complete the authentication flow
- Send a tool call to a connected MCP server and inspect the JSON response
- Review the token store at server/authTokensStore.ts to customize token persistenceTroubleshooting MCP Client Template
Frontend cannot reach the Express backend
Ensure both 'npm run dev' and 'npm run dev:server' are running simultaneously in separate terminals. Check that the frontend's API base URL in the Vite config matches the port the Express server is listening on.
OAuth 2.1 authentication loop or redirect failure
The OAuth flow requires completing the redirect in a full browser tab, not the embedded interface. When the interface presents an authentication link, open it in a new tab, complete authorization, and return to the app. Do not block third-party cookies in your browser during this flow.
data/ folder causes errors after manual edits
The data/ directory stores runtime state managed by the backend. Do not manually edit files inside it. If the state becomes corrupted, delete the contents of data/ and restart the backend server to reinitialize.
Frequently Asked Questions about MCP Client Template
What is MCP Client Template?
MCP Client Template is a Model Context Protocol (MCP) server that template for building mcp (model context protocol) client applications, featuring a vite + typescript frontend and an express backend. includes oauth2.1 authentication and ready-to-use apis for managing and interacting with mcp servers. easily exte It connects AI assistants to external tools and data sources through a standardized interface.
How do I install MCP Client Template?
Follow the installation instructions on the MCP Client Template GitHub repository. Clone the repo, install dependencies, and add the server config to your AI client.
Which AI clients work with MCP Client Template?
MCP Client Template works with all major MCP-compatible AI clients including Claude Desktop, Claude Code, Cursor, VS Code (GitHub Copilot), Windsurf, and Cline.
Is MCP Client Template free to use?
Yes, MCP Client Template is open source and available under the MIT license. You can use it freely in both personal and commercial projects.
MCP Client Template Alternatives — Similar Developer Tools Servers
Looking for alternatives to MCP Client Template? Here are other popular developer tools servers you can use with Claude, Cursor, and VS Code.
Ecc
★ 188.2kThe agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
Javaguide
★ 155.8kJava 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发、系统设计与 AI 应用开发
Gemini CLI
★ 104.5kA secure MCP server that wraps the Google Gemini CLI, allowing clients to query Gemini models using local OAuth sessions without requiring an API key. It provides tools for model interaction and diagnostics with built-in protection against command in
Awesome MCP Servers
★ 87.3k⭐ Curated list of Model Context Protocol (MCP) servers - tools that extend Claude Desktop, Cursor, Windsurf, and other MCP clients with custom capabilities.
MCP Servers
★ 86.0kModel Context Protocol Servers
CC Switch
★ 77.5kA cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Gemini CLI & Hermes Agent. Only official website: ccswitch.io
Browse More Developer Tools MCP Servers
Explore all developer tools servers available in the MCPgee directory. Each server includes setup guides for Claude, Cursor, and VS Code.
Set Up MCP Client Template in Your Editor
Choose your AI client for step-by-step setup instructions.
Quick Config Preview
Add this to your claude_desktop_config.json or .cursor/mcp.json
Ready to use MCP Client Template?
Browse our complete directory of 33,000+ MCP servers, read setup guides for your editor, and start building with the Model Context Protocol.