https://github.com/ashot72/multi-modal-mcp-server-client
Multi-Modal MCP Server/Client with SSE Transport Layer
https://github.com/ashot72/multi-modal-mcp-server-client
ai cursor mcp multi-modal-agent multi-modal-ai react-mcp-client server-side-events sse
Last synced: 3 months ago
JSON representation
Multi-Modal MCP Server/Client with SSE Transport Layer
- Host: GitHub
- URL: https://github.com/ashot72/multi-modal-mcp-server-client
- Owner: Ashot72
- Created: 2025-07-01T09:42:08.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-07-01T14:04:04.000Z (3 months ago)
- Last Synced: 2025-07-01T14:46:06.525Z (3 months ago)
- Topics: ai, cursor, mcp, multi-modal-agent, multi-modal-ai, react-mcp-client, server-side-events, sse
- Language: TypeScript
- Homepage:
- Size: 1.12 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Multi-Modal MCP Server/Client with SSE Transport Layer
MCP – Model Context Protocol is an open standard that simplifies how large language models (LLMs) access and interact with external data, tools, and services. It essentially acts as a universal interface, enabling AI applications to connect to various systems and resources in a standardized way. MCP utilizes a client-server model. Clients, embedded in LLMs, send requests to MCP servers, which handle the actual interaction with external systems. It simplifies the development of AI agents and workflows by providing a unified approach to connecting LLMs with various data sources, tools, and APIs.
This project connects to a Multi-Modal MCP server and demonstrates client-side integration with several powerful AI-driven tools.
---
### 🧠 Clients Used
We utilize three clients to interact with the MCP server:
- **MCP Inspector**
A developer tool for testing and debugging MCP servers.
- **React MCP Client**
A custom-built frontend written in React.
- **Cursor AI Tool Editor**
Integrates with MCP servers and allows invoking tools directly from the editor interface.
---
### 🔧 MCP Tools
The Multi-Modal MCP server provides the following tools:
- **🎧 Audio Tool**
Converts text into spoken audio using **Google Text-to-Speech**.
- **📊 Chart Tool**
Generates JSON chart data from user prompts and renders it with **Chart.js**.
- **📄 Document Tool**
Uses **Tavily Search** to retrieve relevant documents and links.
- **🖼️ Image Tool**
Leverages **DALL·E** to create images based on natural language descriptions.
- **🎥 Video Tool**
Uses the **YouTube Data API** to return video IDs, allowing video embedding in the UI.
---
### 🛠️ Setup Instructions
This project includes:
1. **MCP Server** – Backend logic and tool execution.
2. **React MCP Client** – Frontend interface.
3. **MCP Inspector** – Developer debug console for MCP.
### 🚀 Quick Start
```bash
# 1. Clone the repository
git clone https://github.com/Ashot72/Multi-Modal-MCP-Server-Client
# 2. Start the MCP Server
cd Multi-Modal-MCP-Server-Client/backend
# 2.1 Create a .env file from env.example.txt and include:
# - OPENAI_API_KEY
# - TAVILY_API_KEY
# - YOUTUBE_API_KEY
# 2.2 Install backend dependencies
npm install
# 2.3 Start the MCP server (runs at http://localhost:3001)
npm start
# 3. Run the MCP Inspector (another terminal)
cd Multi-Modal-MCP-Server-Client/backend
npm run inspector
# After running this command, you'll see a link like the following in your terminal:
#
# Open inspector with token pre-filled:
# http://localhost:6274/?MCP_PROXY_AUTH_TOKEN=your_generated_token_here
#
# Click on it to open the MCP Inspector in your browser with the authentication token automatically filled in.
# 4. Start the React MCP Client
cd Multi-Modal-MCP-Server-Client/frontend
# 4.1 Install frontend dependencies
npm install
# 4.2 Start the development server (runs at http://localhost:5173)
npm run dev
```
Go to [Multi-Modal MCP Server/Client with SSE Transport Layer Video](https://youtu.be/yP5qI0JJqNM) page
Go to [Multi-Modal MCP Server/Client with SSE Transport Layer Description](https://ashot72.github.io/Multi-Modal-MCP-Server-Client/doc.html) page