DEV Community: alapati suryapruthvi

A Guide to Multi-Server MCP with React

alapati suryapruthvi — Fri, 20 Feb 2026 13:10:30 +0000

The Model Context Protocol (MCP) is rapidly becoming the "universal connector" for AI. But while many tutorials focus on using MCP with Claude Desktop, the real power lies in building your own custom client-server architecture.

Today, we’re building a full-stack local agentic hub:

MCP Server (Python): A tools-heavy server using fastmcp to fetch real-time news and weather.
MCP Client (Node.js): A backend gateway using mcp-use-ts to manage multiple server connections.
Frontend (React): A sleek chat interface for interacting with your AI agent.

Part 1: The Python MCP Server
We’ll use FastMCP, a high-level framework that makes tool definition as easy as writing a Python function.

Setup

pip install fastmcp httpx

Server

from fastmcp import FastMCP
import httpx

mcp = FastMCP("LocalInsights")

@mcp.tool()
async def get_weather(latitude: float, longitude: float) -> str:
    """Get the weather forecast for specific coordinates."""
    async with httpx.AsyncClient() as client:
        # NWS API Example
        resp = await client.get(f"https://api.weather.gov/points/{latitude},{longitude}")
        forecast_url = resp.json()["properties"]["forecast"]
        forecast = await client.get(forecast_url)
        return forecast.json()["properties"]["periods"][0]["detailedForecast"]

@mcp.tool()
async def get_news(category: str = "technology") -> str:
    """Get latest news headlines for a category."""
    # Example using a mock/free news aggregator
    return f"Latest {category} news: MCP is taking over the world! (Mocked response)"

if __name__ == "__main__":
    mcp.run()

Part 2: The Node.js Client Gateway
Next, we build the "orchestrator" using mcp-use-ts. This layer connects to our Python server (and others) and exposes a unified API for our React frontend.

Setup

npm install @mcp-use/mcp-use-ts express cors

The Node Client (client.ts)

import { McpClient } from "@mcp-use/mcp-use-ts";
import express from "express";
import cors from "cors";

const app = express();
app.use(cors());
app.use(express.json());

// Configure MCP servers
const client = MCPClient.fromDict({
  mcpServers: {
    filesystem: {
      command: 'npx',
      args: ['@modelcontextprotocol/server-filesystem']
    },
    github: {
      command: 'npx',
      args: ['@modelcontextprotocol/server-github'],
      env: { GITHUB_TOKEN: process.env.GITHUB_TOKEN }
    },
    insights: {
      command: "python",
      args: ["server.py"],
    }
  }
})

// Create an AI agent
const agent = new MCPAgent({
  llm: new ChatOpenAI({ model: 'gpt-4' }),
  client,
  maxSteps: 10
})

app.post('/chat', async (req, res) => {
  try {
    const { message } = req.body;

    // Process message with MCP servers
    const response = await agent.run(message);

    // Send AI response back to client
    res.json({
      type: 'assistant',
      message: response,
      timestamp: new Date().toISOString(),
      userId: 'assistant',
    });
  } catch (error) {
    console.error('Error processing message:', error);
    res.status(500).json({
      type: 'error',
      message: 'Sorry, I encountered an error processing your request.',
      timestamp: new Date().toISOString(),
    });
  }
});

app.listen(3001, () => console.log("Node Gateway running on port 3001"));

Part 3: The React Chat Interface

Finally, we need a UI. We’ll build a simple React chat that sends messages to our Node.js gateway.

The Chat Component (Chat.jsx) We want a clean, agent-style interface.

import React, { useState } from 'react';

const ChatInterface = () => {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState("");

  const handleSend = async () => {
    const userMsg = { role: 'user', text: input };
    setMessages([...messages, userMsg]);

    const response = await fetch("http://localhost:3001/chat", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ message: input })
    });

    const data = await response.json();
    setMessages(prev => [...prev, { role: 'bot', text: data.response }]);
    setInput("");
  };

  return (
    <div className="p-4 max-w-2xl mx-auto border rounded shadow">
      <div className="h-64 overflow-y-auto mb-4 border-b">
        {messages.map((m, i) => (
          <div key={i} className={`p-2 ${m.role === 'user' ? 'text-right' : 'text-left'}`}>
            <span className={`inline-block p-2 rounded ${m.role === 'user' ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}>
              {m.text}
            </span>
          </div>
        ))}
      </div>
      <div className="flex gap-2">
        <input 
          className="flex-1 p-2 border rounded" 
          value={input} 
          onChange={(e) => setInput(e.target.value)} 
          placeholder="Ask about the weather..."
        />
        <button onClick={handleSend} className="bg-blue-600 text-white px-4 py-2 rounded">Send</button>
      </div>
    </div>
  );
};

export default ChatInterface;

Why This Architecture Wins
By decoupling the Client (Node) from the Server (Python), you gain two massive advantages:

Language Polyglotism: Your server can be Python (great for data/ML), but your client can be TypeScript (great for web/concurrency).
Scalability: You can connect your Node.js gateway to 10 different MCP servers—one for GitHub, one for Postgres, one for your local Weather tool—and the React frontend only needs to talk to one endpoint.

Beyond the Context Window: Choosing Between RAG and MCP

alapati suryapruthvi — Fri, 20 Feb 2026 12:47:35 +0000

1. RAG: The "Knowledge" Specialist

RAG is the industry standard for giving an LLM access to a vast library of static or semi-static information.

How it works:
RAG follows a "Fetch-then-Chat" workflow. You take unstructured data (PDFs, Wikis, Docs), break it into chunks, and store them in a Vector Database using embeddings. When a user asks a question, the system retrieves the most semantically similar chunks and stuffs them into the LLM's prompt.

Best for: Static knowledge (Documentation, HR policies, Legal archives).

The Metaphor: RAG is like giving a student an open-book exam. They have the textbooks on the desk; they just need to find the right page to answer the question.

2. MCP: The "Action" Specialist

Introduced by Anthropic and rapidly becoming an open standard, MCP is the "USB-C for AI." It is a protocol designed to connect LLMs directly to live systems, APIs, and databases.

How it works:
Unlike RAG, which is passive, MCP is agentic. It defines a standardized way for an LLM to "reach out" and interact with a server via JSON-RPC. Instead of searching for a text snippet, the model invokes a Tool or accesses a Resource (like a live SQL table or a Jira ticket) through an MCP Server.

Best for: Live data and execution (Checking inventory, querying a production DB, sending a Slack message).

The Metaphor: MCP is like giving the student a computer with an internet connection and a login to the company database. They don't just read about the data; they can query it and change it.

3. When to Use Which?

Use RAG when...

You have 10,000 PDFs and need to answer "What is our policy on X?"
The data doesn't change every minute.
You need "fuzzy" semantic matching (e.g., searching for "pet policy" when the doc says "domestic animals").

Use MCP when...

You need to answer "How many units of Product Y are in the warehouse right now?"
You want the AI to do things (e.g., "Create a GitHub issue for this bug").
You want to avoid the "N x M" problem (building a new custom connector for every new tool).

4. The "Perfect Marriage": A Hybrid Approach
In production-grade AI agents, you rarely choose just one. The most powerful systems use a Hybrid Pattern:

RAG retrieves the "Rules": The agent searches the company handbook (RAG) to find the refund policy.

MCP executes the "Action": Once the agent knows the rules, it uses an MCP tool to query the Stripe API (MCP) and process the refund.

Technical Tip: You can even treat a RAG pipeline as an MCP server. By exposing your vector search as a "Tool" within the MCP framework, you give the LLM the autonomy to decide when it needs to look up documentation versus when it needs to call a live API.

Conclusion
RAG is about Knowing. MCP is about Doing.

If you're building a researcher, invest in a solid RAG pipeline. If you're building an assistant that needs to live in the "real world" of APIs and databases, MCP is the protocol that will save you months of integration debt.

Customizing React-Player with Custom UI Controls

alapati suryapruthvi — Fri, 07 Mar 2025 04:23:53 +0000

Introduction

react-player is a widely used library for embedding media players in React applications. While it comes with built-in controls, sometimes you need a custom UI to match a specific design or add extra functionality. In this blog, I'll walk you through how to build a custom UI for react-player using React hooks and event listeners. We'll cover adding a fullscreen button and a custom progress bar with tooltips.

Install react-player First, install react-player if you haven't already:

npm install react-player

2: Create the Player Component
Set up a new component and import react-player along with React hooks:

import React, { useRef, useState } from "react";
import ReactPlayer from "react-player";

3: Set Up State and References

const playerRef = useRef(null);
const [playing, setPlaying] = useState(false);
const [volume, setVolume] = useState(0.8);
const [progress, setProgress] = useState(0);
const [fullscreen, setFullscreen] = useState(false);

4: Add Handlers for Controls
Define functions for play/pause, volume control, seeking, and fullscreen mode:

const handlePlayPause = () => setPlaying(!playing);

const handleVolumeChange = (e) => setVolume(parseFloat(e.target.value));

const handleProgress = (state) => setProgress(state.played * 100);

const seekTo = (e) => {
  const newTime = (parseFloat(e.target.value) / 100) * playerRef.current.getDuration();
  playerRef.current.seekTo(newTime);
};

const toggleFullscreen = () => {
  const playerElement = document.querySelector(".custom-player");
  if (!document.fullscreenElement) {
    playerElement.requestFullscreen();
    setFullscreen(true);
  } else {
    document.exitFullscreen();
    setFullscreen(false);
  }
};

5: Build the Player UI
Use the handlers to add custom controls to the player:

return (
  <div className="custom-player">
    <ReactPlayer
      ref={playerRef}
      url="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
      playing={playing}
      volume={volume}
      onProgress={handleProgress}
      width="100%"
      height="100%"
    />
    <div className="controls">
      <button onClick={handlePlayPause}>{playing ? "Pause" : "Play"}</button>
      <input
        type="range"
        min="0"
        max="100"
        value={progress}
        onChange={seekTo}
      />
      <input
        type="range"
        min="0"
        max="1"
        step="0.1"
        value={volume}
        onChange={handleVolumeChange}
      />
      <button onClick={toggleFullscreen}>{fullscreen ? "Exit Fullscreen" : "Fullscreen"}</button>
    </div>
  </div>
);

6: Style the Player
Enhance the UI with CSS for better visuals and usability:

.custom-player {
  position: relative;
  width: 640px;
  height: 360px;
  background: black;
}

.controls {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
}

button, input {
  margin: 0 5px;
}

/* Custom Progress Bar with Tooltip */
input[type="range"] {
  position: relative;
  cursor: pointer;
}

input[type="range"]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 0.3s;
}

input[type="range"]:hover::after {
  opacity: 1;
}

7: Run and Test
Start your React app and test the custom controls:

npm start

8: Further Enhancements

Animated Controls: Improve UI interactions with subtle animations.
Custom captions: Show the subtitle menu based on requirement (as per the supported languages by the actual video player)
Live experience: Using an on-demand video, a live experience can be delivered by further customizing the custom controls with a defined start time

How to Integrate AI into Your React App: A Developer’s Guide

alapati suryapruthvi — Fri, 07 Mar 2025 03:43:37 +0000

Artificial Intelligence (AI) is rapidly transforming web applications, enhancing user experiences through intelligent automation, personalized recommendations, and interactive chatbots. As a React developer, integrating AI into your applications can set you apart and showcase your ability to work with cutting-edge technologies. In this guide, we’ll explore how you can bring AI capabilities into your React applications with practical examples.

Why Integrate AI into Your React App?

Before diving into the implementation, let’s understand why AI can be a game-changer for React applications:
Personalization: AI can tailor content and recommendations based on user behavior.
Automation: AI-powered chatbots and voice assistants can handle common queries, reducing manual efforts.
Enhanced UX: Features like autocomplete, predictive search, and AI-powered image recognition improve user experience.
Data Insights: AI can process large amounts of data to generate useful insights for decision-making.

Common AI Use Cases in React Apps

1. AI-Powered Chatbots
Integrate chatbots using OpenAI’s GPT or Dialogflow to provide conversational interfaces.

2. Smart Search and Autocomplete
Enhance search functionality with AI-driven predictive text and recommendations.

3. Image Recognition
Use AI models like TensorFlow.js to analyze images and detect objects in React applications.

4. Personalized Recommendations
AI-driven recommendation systems suggest content, products, or media based on user preferences.

How to Integrate AI in a React App
Let’s walk through a practical example: Integrating OpenAI's GPT API to create an AI-powered chatbot in React. This is a very basic example of creating a chatbot using React.

Step 1: Set Up a React Project
Ensure you have a React project set up. If not, create one:

npx create-react-app ai-chatbot
cd ai-chatbot
npm install axios

Step 2: Get OpenAI API Key.
We need OpenAI api key to be able to communicate with OpenAI api's and use GPT models.

Step 3: Understanding OpenAI APIs Used
In this project, we are using the following OpenAI API:
Chat Completions API (/v1/chat/completions)
This API allows us to send user messages to OpenAI's GPT model and receive AI-generated responses. The key parameters used:
- model: Specifies the GPT model (e.g., gpt-3.5-turbo).
- messages: An array of messages, where each message includes a role (user/system/assistant) and content (text of the message).
- headers: Authentication headers containing the OpenAI API key.

Example request:

{
  "model": "gpt-3.5-turbo",
  "messages": [{ "role": "user", "content": "Hello!" }]
}

Example response:

{
  "id": "chatcmpl-123",
  "choices": [
    { "message": { "role": "assistant", "content": "Hello! How can I help you today?" } }
  ]
}

Step 4: Create a Chatbot Component using axios and communicate with OpenAI

import React, { useState, useEffect } from "react";
import axios from "axios";

const Chatbot = () => {
  const [input, setInput] = useState("");
  const [messages, setMessages] = useState([]);

  const handleSend = async () => {
    if (!input) return;
    const userMessage = { sender: "user", text: input };
    const updatedMessages = [...messages, userMessage];
    setMessages(updatedMessages);

    const response = await axios.post(
      "https://api.openai.com/v1/chat/completions",
      {
        model: "gpt-3.5-turbo",
        messages: [{ role: "user", content: input }],
      },
      {
        headers: {
          Authorization: `Bearer ${process.env.REACT_APP_OPENAI_API_KEY}`,
          "Content-Type": "application/json",
        },
      }
    );

    const botMessage = { sender: "bot", text: response.data.choices[0].message.content };
    const finalMessages = [...updatedMessages, botMessage];
    setMessages(finalMessages);
    setInput("");
  };

  return (
    <div style={{ display: "flex", height: "100%", width: "100%" }}>
      <div style={{ flex: 1, display: "flex", flexDirection: "column", height: "100%", padding: "20px" }}>
        <div style={{ flex: 1, border: "1px solid #ccc", padding: "10px", overflowY: "auto", background: "#fff" }}>
          {messages.map((msg, index) => (
            <p key={index} style={{ textAlign: msg.sender === "user" ? "right" : "left" }}>
              <strong>{msg.sender}: </strong>{msg.text}
            </p>
          ))}
        </div>
        <div style={{ display: "flex", padding: "10px", borderTop: "1px solid #ccc" }}>
          <input type="text" value={input} onChange={(e) => setInput(e.target.value)} placeholder="Type a message..." style={{ flex: 1, padding: "10px" }} />
          <button onClick={handleSend} style={{ marginLeft: "10px", padding: "10px" }}>Send</button>
        </div>
      </div>
    </div>
  );
};

export default Chatbot;

Step 4: Run the Application
npm start

Next steps to implement more features from OpenAI

Streaming responses for real-time AI replies
Multi-turn conversations with better memory
Integration with a database

More advanced features

Add Agents to let the AI decide actions
Use Function Calling for dynamic API usage
Implement RAG to retrieve private data