mcp-server-and-client-ts

Sahil7475/mcp-server-and-client-ts

3.1

If you are the rightful owner of mcp-server-and-client-ts and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to henry@mcphub.com.

This repository demonstrates how to set up a full Model Context Protocol (MCP) server and client using TypeScript, with integration capabilities for Google's Gemini 2.0 Flash model.

Tools
1
Resources
0
Prompts
0

MCP Server & Client in TypeScript (Gemini Integration)

This repository demonstrates how to set up a full Model Context Protocol (MCP) server and client using TypeScript, along with interaction capabilities for Google's Gemini 2.0 Flash model during sampling. It covers the complete flow — from tools and queries to resource templates, prompt definitions, and user input.

✨ Features

  • ✅ MCP Server Setup (via @modelcontextprotocol/sdk)
  • ✅ MCP Client with interactive CLI (@inquirer/prompts)
  • ✅ Google Gemini 2.0 Flash model integration
  • ✅ Tool Implementation: Create and store user data in a local JSON file
  • ✅ Prompt & Sampling capabilities
  • ✅ Query & Resource management using MCP APIs
  • ✅ Inspector Support via @modelcontextprotocol/inspector
  • ✅ Terminal Input for tool parameters
  • ✅ Easy debugging with Postman-like UI for MCP

📂 Project Structure

├── .vscode/
│   └── mcp.json               # MCP Inspector config
├── src/
│   ├── client.ts              # CLI client code
│   ├── server.ts              # MCP server code
│   └── data/
│       └── users.json         # User storage (via tool)
├── .gitignore
├── README.md
├── tsconfig.json
├── package.json
└── package-lock.json

🧠 Technologies Used

TechnologyPurpose
@modelcontextprotocol/sdkCore SDK to build MCP server/client
@modelcontextprotocol/inspectorGUI inspector for MCP API testing
@inquirer/promptsTerminal input prompts
Google Gemini 2.0 FlashAI model used for generation/sampling
ZodSchema validation
Node.js, TypeScriptRuntime and language

🚀 Getting Started

1. Clone the repo

git clone https://github.com/Sahil7475/mcp-server-and-client-ts.git
cd mcp-server-and-client-ts

2. Install Dependencies

npm install

3. Start the MCP Server

npm run server:dev

Inspect MCP Server

npm run server:inspect

Build and Run MCP Server with Watch Mode

npm run server:build:watch

4. Environment Setup

Create a .env file in the root directory and add your Gemini API key:

GEMINI_API_KEY=your-gemini-api-key-here

5. Start the MCP Client

npm run client:dev

Use Cases

  • Learning how to integrate MCP with real-world tools
  • Creating and managing resources through MCP APIs
  • Using Gemini 2.0 Flash for sampling/generation via prompt templates
  • CLI interactions that simulate real users calling tools
  • Testing & debugging with a MCP Inspector

Future Enhancements

  • Add more tools (e.g., update/delete user)
  • Enable Gemini streaming support
  • Replace local JSON storage with a database
  • Add authentication to secure client-server interaction