MCP Chat SDK

A React-based chat agent SDK for integrating with the MCP (Model Context Protocol) backend.

Features

• 🚀 Easy integration with React applications
• 💅 Fully customizable theme
• 🔄 Real-time streaming responses
• 📱 Responsive design
• 🎨 Modern UI

Installation

npm install @hey-farhan/cs-chat-agent
# or
yarn add @hey-farhan/cs-chat-agent

Quick Start

1. First, onboard your application using the client onboarding site :

Onboard at : https://onboarding-app-sable.vercel.app

OR

manually using the MCP backend API:

curl -X POST https://mcp-by-farhan-render.onrender.com/api/client/onboard \
  -H "Content-Type: application/json" \
  -d '{
    "organizationName": "Your Company",
    "contactEmail": "[email protected]",
    "contentstackApiKey": "your_api_key",
    "contentstackDeliveryToken": "your_delivery_token",
    "contentstackRegion": "EU",
    "contentstackEnvironment": "development",
    "contentTypes": ["your_content_types"],
    "defaultContentType": "default_type",
    "agentName": "Your Assistant",
    "agentDescription": "Description of your assistant",
    "systemPrompt": "System prompt for your assistant"
  }'

Note : the backend is deployed on render - free tier ; so it may take some time to spin-up the backend and return the clientId . Will appreciate your patience.

2. Copy the Chat Widget Template Provided to you on the onboarding site after filling the form with correct details.

   Or Save the clientId from the response(if using Curl).

3. Add the chat agent to your React application:

import { ChatWidget } from '@hey-farhan/cs-chat-agent';

function App() {
  return (
    <ChatWidget
      clientId="your_client_id"
      agentName="Your Assistant"
      backendUrl="https://mcp-by-farhan-render.onrender.com"
      theme={{
        primaryColor: '#007bff',
        secondaryColor: '#e9ecef',
        fontFamily: 'Arial, sans-serif'
      }}
    />
  );
}

Props

| Prop | Type | Required | Description | |------|------|----------|-------------| | clientId | string | Yes | Your client ID from onboarding | | agentName | string | No | Display name for the chat agent | | backendUrl | string | No | MCP backend URL (default: https://mcp-by-farhan-render.onrender.com) | | theme | object | No | UI customization options |

Theme Options

interface Theme {
  primaryColor?: string;     // Main color for buttons and user messages
  secondaryColor?: string;   // Background color for assistant messages
  fontFamily?: string;       // Font family for the chat interface
  buttonColor?: string;      // Color for the popup button
  buttonTextColor?: string;  // Text color for the popup button
}

Usage Examples

1. Popup Mode (Default)

<ChatWidget
  clientId="your_client_id"
  agentName="Product Assistant"
  theme={{
    primaryColor: '#FF5733',
    buttonColor: '#FF5733'
  }}
/>

2. Fully Customized

<ChatWidget
  clientId="your_client_id"
  agentName="Product Assistant"
  theme={{
    primaryColor: '#007bff',
    secondaryColor: '#f8f9fa',
    fontFamily: 'Roboto, sans-serif',
    buttonColor: '#28a745',
    buttonTextColor: '#ffffff'
  }}
/>

Browser Support

The SDK supports all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Development

1. Clone the repository
2. Install dependencies: npm install
3. Build: npm run build

License

MIT