npm package: @hey-farhan/cs-chat-agent
Description: React Chat Widget for MCP Backend
Author: Farhan Inamdar
Latest version: 2.0.0

# 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

```bash
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:

```bash
curl -X POST https://mcp-by-farhan-render.onrender.com/api/client/onboard \
  -H "Content-Type: application/json" \
  -d '{
    "organizationName": "Your Company",
    "contactEmail": "contact@yourcompany.com",
    "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:

```jsx
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

```typescript
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)
```jsx
<ChatWidget
  clientId="your_client_id"
  agentName="Product Assistant"
  theme={{
    primaryColor: '#FF5733',
    buttonColor: '#FF5733'
  }}
/>
```

### 2. Fully Customized
```jsx
<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