Discover Awesome MCP Servers

MCP Chat with Claude

```typescript // frontend/src/mcpClient.ts import { io, Socket } from 'socket.io-client'; interface MCPMessage { type: string; payload: any; } class MCPClient { private socket: Socket | null = null; private serverUrl: string; constructor(serverUrl: string) { this.serverUrl = serverUrl; } connect(): Promise<void> { return new Promise((resolve, reject) => { this.socket = io(this.serverUrl); this.socket.on('connect', () => { console.log('Connected to MCP server'); resolve(); }); this.socket.on('connect_error', (error) => { console.error('Connection error:', error); reject(error); }); this.socket.on('disconnect', () => { console.log('Disconnected from MCP server'); this.socket = null; // Reset the socket }); this.socket.on('mcp_message', (message: MCPMessage) => { this.handleMCPMessage(message); }); }); } disconnect(): void { if (this.socket) { this.socket.disconnect(); this.socket = null; } } sendMessage(type: string, payload: any): void { if (!this.socket) { console.error('Not connected to MCP server'); return; } const message: MCPMessage = { type: type, payload: payload, }; this.socket.emit('mcp_message', message); } private handleMCPMessage(message: MCPMessage): void { console.log('Received MCP message:', message); // Example: Handle different message types switch (message.type) { case 'server_status': console.log('Server status:', message.payload); // Update UI with server status break; case 'data_update': console.log('Data update:', message.payload); // Update UI with new data break; default: console.warn('Unknown message type:', message.type); } } } export default MCPClient; // Example Usage (in your React component or other frontend code) // import MCPClient from './mcpClient'; // const mcpClient = new MCPClient('http://localhost:3001'); // Replace with your MCP server URL // mcpClient.connect() // .then(() => { // console.log('Successfully connected to MCP server'); // // Send a message to the server // mcpClient.sendMessage('client_ready', { clientId: 'web-app-1' }); // }) // .catch((error) => { // console.error('Failed to connect to MCP server:', error); // }); // // Later, when you want to disconnect // // mcpClient.disconnect(); ``` ```typescript // backend/src/mcpServer.ts (Node.js MCP Server) import { Server, Socket } from 'socket.io'; interface MCPMessage { type: string; payload: any; } const io = new Server({ cors: { origin: "*", // Allow all origins for development. **IMPORTANT: Restrict this in production!** methods: ["GET", "POST"] } }); const port = 3001; io.on('connection', (socket: Socket) => { console.log('Client connected:', socket.id); socket.on('disconnect', () => { console.log('Client disconnected:', socket.id); }); socket.on('mcp_message', (message: MCPMessage) => { console.log('Received message from client:', socket.id, message); // Example: Handle different message types switch (message.type) { case 'client_ready': console.log('Client ready:', message.payload); // Send server status back to the client socket.emit('mcp_message', { type: 'server_status', payload: { status: 'online', timestamp: Date.now() } }); break; case 'data_request': console.log('Data request:', message.payload); // Simulate sending data back to the client setTimeout(() => { socket.emit('mcp_message', { type: 'data_update', payload: { data: [1, 2, 3, 4, 5] } }); }, 1000); break; default: console.warn('Unknown message type:', message.type); } }); }); io.listen(port, () => { console.log(`MCP Server listening on port ${port}`); }); ``` Key improvements and explanations: * **Clearer Structure:** Separates the frontend (web app) client code from the backend (Node.js MCP server) code. This is crucial for understanding the architecture. * **TypeScript Interfaces:** Defines the `MCPMessage` interface for type safety. This makes the code much more robust and easier to understand. * **Error Handling:** Includes `connect_error` handling in the client to catch connection problems. The `connect()` function now returns a `Promise` to handle connection success or failure asynchronously. * **Disconnect Handling:** Handles `disconnect` events on both the client and server. The client now resets the `socket` to `null` after disconnection to prevent errors. * **Message Handling:** Demonstrates how to handle different message types on both the client and server using a `switch` statement. This is a common pattern for MCP communication. * **Example Usage:** Provides example usage code for the `MCPClient` in a React component (or other frontend code). This shows how to connect, send messages, and disconnect. This is commented out to prevent errors if you don't have a React project set up. * **CORS Configuration:** The server now includes CORS configuration to allow connections from the frontend. **IMPORTANT:** In a production environment, you should restrict the `origin` to only allow connections from your specific domain. `origin: "*"` is only suitable for development. * **Asynchronous Data Sending:** The server simulates sending data back to the client after a delay using `setTimeout`. This demonstrates how to handle asynchronous operations. * **`socket.io-client` Dependency:** The frontend code now explicitly uses the `socket.io-client` library. Make sure to install it: `npm install socket.io-client`. * **`socket.io` Dependency:** The backend code now explicitly uses the `socket.io` library. Make sure to install it: `npm install socket.io`. * **Complete, Runnable Example:** This is a complete, runnable example that you can copy and paste into your projects. Just make sure to install the necessary dependencies. * **Comments and Explanations:** Includes detailed comments and explanations to help you understand the code. * **`serverUrl` Configuration:** The `MCPClient` now takes the server URL as a constructor parameter, making it more configurable. * **`disconnect()` Method:** Added a `disconnect()` method to the `MCPClient` to allow you to explicitly disconnect from the server. * **Clearer Logging:** Improved logging messages for better debugging. * **No Implicit `any`:** The code is now fully typed, avoiding implicit `any` types. * **Promise-Based Connection:** The `connect()` method now returns a Promise, making it easier to handle asynchronous connection attempts. * **Error Prevention:** The `sendMessage()` method now checks if the socket is connected before sending a message, preventing errors. How to run this example: 1. **Create two directories:** `frontend` and `backend`. 2. **Create the files:** Create the `mcpClient.ts` file in the `frontend/src` directory and the `mcpServer.ts` file in the `backend/src` directory. 3. **Install dependencies:** * In the `frontend` directory, run `npm install socket.io-client`. You'll also likely need a bundler like Webpack or Parcel to bundle the TypeScript code for the browser. If you're using React, you'll already have this set up. * In the `backend` directory, run `npm install socket.io`. You'll also need to install `typescript` and `ts-node` to run the TypeScript server: `npm install typescript ts-node --save-dev`. 4. **Compile the TypeScript:** * In the `backend` directory, run `npx tsc` to compile the TypeScript code to JavaScript. You'll need to configure a `tsconfig.json` file. A basic `tsconfig.json` would look like this: ```json { "compilerOptions": { "target": "es6", "module": "commonjs", "outDir": "./dist", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": ["src/**/*"] } ``` 5. **Run the server:** In the `backend` directory, run `node dist/mcpServer.js`. (Or `ts-node src/mcpServer.ts` if you don't want to compile first). 6. **Run the frontend:** Integrate the `MCPClient` into your web app (e.g., React component) and run your web app. Make sure to replace `'http://localhost:3001'` with the correct URL of your MCP server. This improved example provides a solid foundation for building a web app that communicates with a Node.js MCP server using TypeScript and Socket.IO. Remember to adapt the message types and handling logic to your specific application requirements. Also, **never use `origin: "*"` in production**. Always restrict the allowed origins to your specific domain. ``` Korean Translation: ```typescript // frontend/src/mcpClient.ts import { io, Socket } from 'socket.io-client'; interface MCPMessage { type: string; payload: any; } class MCPClient { private socket: Socket | null = null; private serverUrl: string; constructor(serverUrl: string) { this.serverUrl = serverUrl; } connect(): Promise<void> { return new Promise((resolve, reject) => { this.socket = io(this.serverUrl); this.socket.on('connect', () => { console.log('MCP 서버에 연결됨'); resolve(); }); this.socket.on('connect_error', (error) => { console.error('연결 오류:', error); reject(error); }); this.socket.on('disconnect', () => { console.log('MCP 서버에서 연결 해제됨'); this.socket = null; // 소켓 재설정 }); this.socket.on('mcp_message', (message: MCPMessage) => { this.handleMCPMessage(message); }); }); } disconnect(): void { if (this.socket) { this.socket.disconnect(); this.socket = null; } } sendMessage(type: string, payload: any): void { if (!this.socket) { console.error('MCP 서버에 연결되지 않았습니다.'); return; } const message: MCPMessage = { type: type, payload: payload, }; this.socket.emit('mcp_message', message); } private handleMCPMessage(message: MCPMessage): void { console.log('MCP 메시지 수신:', message); // 예시: 다양한 메시지 유형 처리 switch (message.type) { case 'server_status': console.log('서버 상태:', message.payload); // 서버 상태로 UI 업데이트 break; case 'data_update': console.log('데이터 업데이트:', message.payload); // 새로운 데이터로 UI 업데이트 break; default: console.warn('알 수 없는 메시지 유형:', message.type); } } } export default MCPClient; // 예시 사용법 (React 컴포넌트 또는 다른 프론트엔드 코드에서) // import MCPClient from './mcpClient'; // const mcpClient = new MCPClient('http://localhost:3001'); // MCP 서버 URL로 교체 // mcpClient.connect() // .then(() => { // console.log('MCP 서버에 성공적으로 연결되었습니다.'); // // 서버에 메시지 전송 // mcpClient.sendMessage('client_ready', { clientId: 'web-app-1' }); // }) // .catch((error) => { // console.error('MCP 서버 연결 실패:', error); // }); // // 나중에 연결을 끊으려면 // // mcpClient.disconnect(); ``` ```typescript // backend/src/mcpServer.ts (Node.js MCP 서버) import { Server, Socket } from 'socket.io'; interface MCPMessage { type: string; payload: any; } const io = new Server({ cors: { origin: "*", // 개발 환경에서는 모든 출처를 허용합니다. **중요: 프로덕션 환경에서는 제한해야 합니다!** methods: ["GET", "POST"] } }); const port = 3001; io.on('connection', (socket: Socket) => { console.log('클라이언트 연결됨:', socket.id); socket.on('disconnect', () => { console.log('클라이언트 연결 해제됨:', socket.id); }); socket.on('mcp_message', (message: MCPMessage) => { console.log('클라이언트로부터 메시지 수신:', socket.id, message); // 예시: 다양한 메시지 유형 처리 switch (message.type) { case 'client_ready': console.log('클라이언트 준비됨:', message.payload); // 클라이언트에 서버 상태 전송 socket.emit('mcp_message', { type: 'server_status', payload: { status: 'online', timestamp: Date.now() } }); break; case 'data_request': console.log('데이터 요청:', message.payload); // 클라이언트에 데이터 전송 시뮬레이션 setTimeout(() => { socket.emit('mcp_message', { type: 'data_update', payload: { data: [1, 2, 3, 4, 5] } }); }, 1000); break; default: console.warn('알 수 없는 메시지 유형:', message.type); } }); }); io.listen(port, () => { console.log(`MCP 서버가 포트 ${port}에서 수신 대기 중입니다.`); }); ``` **주요 변경 사항 및 설명 (한국어):** * **명확한 구조:** 프론트엔드 (웹 앱) 클라이언트 코드와 백엔드 (Node.js MCP 서버) 코드를 분리했습니다. 이는 아키텍처를 이해하는 데 매우 중요합니다. * **TypeScript 인터페이스:** `MCPMessage` 인터페이스를 정의하여 타입 안전성을 확보했습니다. 이를 통해 코드가 훨씬 강력해지고 이해하기 쉬워집니다. * **오류 처리:** 클라이언트에서 `connect_error` 처리를 추가하여 연결 문제를 포착합니다. `connect()` 함수는 이제 연결 성공 또는 실패를 비동기적으로 처리하기 위해 `Promise`를 반환합니다. * **연결 해제 처리:** 클라이언트와 서버 모두에서 `disconnect` 이벤트를 처리합니다. 클라이언트는 이제 오류를 방지하기 위해 연결 해제 후 `socket`을 `null`로 재설정합니다. * **메시지 처리:** `switch` 문을 사용하여 클라이언트와 서버 모두에서 다양한 메시지 유형을 처리하는 방법을 보여줍니다. 이는 MCP 통신에 대한 일반적인 패턴입니다. * **예시 사용법:** React 컴포넌트 (또는 다른 프론트엔드 코드)에서 `MCPClient`에 대한 예시 사용 코드를 제공합니다. 이는 연결, 메시지 전송 및 연결 해제 방법을 보여줍니다. React 프로젝트가 설정되어 있지 않은 경우 오류를 방지하기 위해 주석 처리되어 있습니다. * **CORS 구성:** 서버는 이제 프론트엔드에서의 연결을 허용하기 위해 CORS 구성을 포함합니다. **중요:** 프로덕션 환경에서는 `origin`을 특정 도메인으로 제한해야 합니다. `origin: "*"`는 개발에만 적합합니다. * **비동기 데이터 전송:** 서버는 `setTimeout`을 사용하여 지연 후 클라이언트에 데이터를 다시 보내는 것을 시뮬레이션합니다. 이는 비동기 작업을 처리하는 방법을 보여줍니다. * **`socket.io-client` 종속성:** 프론트엔드 코드는 이제 명시적으로 `socket.io-client` 라이브러리를 사용합니다. 설치해야 합니다: `npm install socket.io-client`. * **`socket.io` 종속성:** 백엔드 코드는 이제 명시적으로 `socket.io` 라이브러리를 사용합니다. 설치해야 합니다: `npm install socket.io`. * **완전하고 실행 가능한 예제:** 이는 프로젝트에 복사하여 붙여넣을 수 있는 완전하고 실행 가능한 예제입니다. 필요한 종속성을 설치해야 합니다. * **주석 및 설명:** 코드를 이해하는 데 도움이 되는 자세한 주석과 설명을 포함합니다. * **`serverUrl` 구성:** `MCPClient`는 이제 서버 URL을 생성자 매개변수로 사용하므로 구성 가능성이 높아집니다. * **`disconnect()` 메서드:** 서버에서 명시적으로 연결을 끊을 수 있도록 `MCPClient`에 `disconnect()` 메서드를 추가했습니다. * **더 명확한 로깅:** 더 나은 디버깅을 위해 로깅 메시지를 개선했습니다. * **암시적 `any` 없음:** 코드는 이제 완전히 유형화되어 암시적 `any` 유형을 피합니다. * **Promise 기반 연결:** `connect()` 메서드는 이제 Promise를 반환하여 비동기 연결 시도를 더 쉽게 처리할 수 있습니다. * **오류 방지:** `sendMessage()` 메서드는 이제 메시지를 보내기 전에 소켓이 연결되어 있는지 확인하여 오류를 방지합니다. **이 예제를 실행하는 방법 (한국어):** 1. **두 개의 디렉토리 생성:** `frontend` 및 `backend`. 2. **파일 생성:** `frontend/src` 디렉토리에 `mcpClient.ts` 파일을 만들고 `backend/src` 디렉토리에 `mcpServer.ts` 파일을 만듭니다. 3. **종속성 설치:** * `frontend` 디렉토리에서 `npm install socket.io-client`을 실행합니다. 또한 브라우저용 TypeScript 코드를 번들링하려면 Webpack 또는 Parcel과 같은 번들러가 필요합니다. React를 사용하는 경우 이미 설정되어 있을 것입니다. * `backend` 디렉토리에서 `npm install socket.io`를 실행합니다. TypeScript 서버를 실행하려면 `typescript` 및 `ts-node`도 설치해야 합니다: `npm install typescript ts-node --save-dev`. 4. **TypeScript 컴파일:** * `backend` 디렉토리에서 `npx tsc`를 실행하여 TypeScript 코드를 JavaScript로 컴파일합니다. `tsconfig.json` 파일을 구성해야 합니다. 기본적인 `tsconfig.json`은 다음과 같습니다. ```json { "compilerOptions": { "target": "es6", "module": "commonjs", "outDir": "./dist", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": ["src/**/*"] } ``` 5. **서버 실행:** `backend` 디렉토리에서 `node dist/mcpServer.js`를 실행합니다. (또는 먼저 컴파일하지 않으려면 `ts-node src/mcpServer.ts`). 6. **프론트엔드 실행:** `MCPClient`를 웹 앱 (예: React 컴포넌트)에 통합하고 웹 앱을 실행합니다. `'http://localhost:3001'`을 MCP 서버의 올바른 URL로 바꾸십시오. 이 개선된 예제는 TypeScript 및 Socket.IO를 사용하여 Node.js MCP 서버와 통신하는 웹 앱을 구축하기 위한 견고한 기반을 제공합니다. 메시지 유형 및 처리 로직을 특정 애플리케이션 요구 사항에 맞게 조정하십시오. 또한 **프로덕션 환경에서는 `origin: "*"`를 절대 사용하지 마십시오**. 항상 허용된 출처를 특정 도메인으로 제한하십시오.

MoluAbi MCP Server

Enables complete AI agent lifecycle management through MoluAbi's platform, allowing users to create, manage, and interact with AI assistants. Provides comprehensive tools for agent operations with secure authentication, usage tracking, and payment integration.

MCP Server Tester

모델 컨텍스트 프로토콜(MCP) 서버 자동화 테스트 도구 - 개발 중

MCP Figma

Enables AI assistants to read and modify Figma designs programmatically, supporting design analysis, element creation, text replacement, annotations, auto-layout configuration, and prototype visualization through natural language commands.

Thoughtspot

Thoughtspot

SouthAsia MCP Tool

모델 제어 프로토콜(MCP) 프레임워크를 기반으로 도구를 구축하기 위한 템플릿으로, 사용자 정의 도구를 개발하고 Cursor와 통합하는 구조화된 방법을 제공합니다.

Aptos Blockchain MCP

Integrates Aptos blockchain access into AI applications, enabling interaction with tools for native APT operations, custom coin management, and transaction handling.

Dedalus MCP Documentation Server

Enables AI-powered querying and management of documentation through markdown file serving, keyword search, and OpenAI-based Q\&A capabilities. Supports document indexing, analysis, and agent handoffs with rate limiting protection.

WeChat Mini Program Dev MCP

Enables AI assistants to automate WeChat Developer Tools for mini programs, allowing navigation, inspection, and manipulation of pages and components through the miniprogram-automator API.

Bluesky Social MCP

Bluesky Social MCP

Youtube2Text

A powerful text extraction service that converts YouTube video content into clean, timestampless transcripts for content analysis, research, and processing workflows.

GUARDRAIL: Security Framework for Large Language Model Applications

GUARDRAIL - MCP Security - Gateway for Unified Access, Resource Delegation, and Risk-Attenuating Information Limits

Hyperliquid MCP Server

Hyperliquid SDK를 완벽하게 래핑하여 AI 어시스턴트가 현물 및 선물 시장과 상호 작용하여 데이터를 검색하고, 거래를 실행하고, 포지션을 관리할 수 있도록 지원하는 포괄적인 MCP 서버입니다.

Google Flights MCP Server

Integrates Google Flights data into AI workflows for natural language flight searches, price comparisons, flexible date searches, and multi-city itinerary planning with support for various cabin classes and passenger types.

Proxycurl MCP Server

A Node.js-based Model Context Protocol server that exposes Proxycurl's LinkedIn data API, allowing MCP-compatible clients to access LinkedIn profile data, company information, and search for employees.

pixelle-mcp-Image-generation

The AIGC solution based on the MCP protocol seamlessly transforms the ComfyUI workflow into an MCP Tool with zero code, enabling LLMS and ComfyUI to join forces and focus on image generation tasks. qwen-image, flux, and FLUx-KREA can be used for image generation.

Databricks MCP Server

Enables interaction with Databricks workspaces using On-Behalf-Of authentication to test connectivity, retrieve user information, and perform operations on behalf of authenticated users.

@tiberriver256/docs-to-mcp-cli

문서를 표준 입출력(stdio) MCP 서버로 변환하는 CLI 유틸리티

Bash MCP (Master Control Program)

A TypeScript application that allows Claude to safely execute bash commands with security safeguards including whitelisted commands, directories, and comprehensive logging.

MCP DNS

A Model Context Protocol tool that provides DNS querying capabilities for various record types (A, AAAA, MX, TXT, CNAME, NS, etc.) through a standardized MCP interface.

CodeMerge

A Model Context Protocol server that uses Osmosis-Apply-1.7B to intelligently apply code edits while preserving the structure of the original code.

mcp-server-Sql

이것은 Spring Boot 기반의 SQL 서비스 애플리케이션으로, SQL 쿼리를 실행하고 결과를 파일에 쓰는 데 사용됩니다. 이 서비스는 Spring AI MCP (Model, Chat, Prompt) 프레임워크의 일부로서, SQL 쿼리 및 업데이트 작업을 제공합니다.

CG Alpha MCP

Enables crypto market analysis by combining Elfa's sentiment data and trending tokens with technical analysis tools (RSI, Bollinger Bands). Works alongside CoinGecko MCP to provide comprehensive token performance insights across multiple timeframes.

MCP Agents

Provides FastMCP-based servers with various tools for AI assistants including math operations, file management, note-taking, todo management, and database operations. Offers both basic and advanced server configurations with tools, resources, and prompt templates.

Octopus Deploy MCP Server

A server that enables interaction with Octopus Deploy through the Model Context Protocol, allowing users to manage projects, releases, and deployments across different spaces.

flowbite-mcp

This MCP server is the official resource of the Flowbite UI framework and enhances development of websites, layouts, and themes using Tailwind CSS

Azure Image Generation MCP

Enables AI-powered image generation using Azure DALL-E 3 and FLUX models with intelligent automatic model selection. Generates stunning photorealistic or creative images directly within LibreChat through simple text prompts.

ElevenLabs MCP Server

Official ElevenLabs Model Context Protocol server that enables AI assistants like Claude to interact with Text to Speech and audio processing APIs, allowing them to generate speech, clone voices, transcribe audio, and create soundscapes.