@channlize/mcp 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1739 @@
+// src/index.ts
+import { Server } from "@modelcontextprotocol/sdk/server/index.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+import {
+  CallToolRequestSchema,
+  ListResourcesRequestSchema,
+  ListToolsRequestSchema,
+  ReadResourceRequestSchema,
+  ListPromptsRequestSchema,
+  GetPromptRequestSchema
+} from "@modelcontextprotocol/sdk/types.js";
+
+// src/resources/index.ts
+var CONTACT_FORM_SCHEMA = `{
+  "name": "ContactFormData",
+  "description": "Data structure for submitting a contact form inquiry",
+  "type": "object",
+  "properties": {
+    "name": {
+      "type": "string",
+      "description": "Contact's full name",
+      "required": true
+    },
+    "email": {
+      "type": "string",
+      "format": "email",
+      "description": "Contact's email address",
+      "required": true
+    },
+    "subject": {
+      "type": "string",
+      "description": "Subject line for the inquiry"
+    },
+    "message": {
+      "type": "string",
+      "description": "Message content",
+      "required": true
+    },
+    "customFields": {
+      "type": "object",
+      "description": "Additional custom fields as key-value pairs",
+      "additionalProperties": true
+    },
+    "pageUrl": {
+      "type": "string",
+      "description": "URL of the page where form was submitted"
+    },
+    "userAgent": {
+      "type": "string",
+      "description": "User agent string of the submitter"
+    }
+  }
+}`;
+var CHAT_SESSION_SCHEMA = `{
+  "name": "ChatSession",
+  "description": "Real-time chat session structure",
+  "type": "object",
+  "properties": {
+    "id": {
+      "type": "string",
+      "description": "Unique session identifier"
+    },
+    "status": {
+      "type": "string",
+      "enum": ["active", "closed", "waiting"],
+      "description": "Current session status"
+    },
+    "messages": {
+      "type": "array",
+      "items": {
+        "$ref": "#/definitions/ChatMessage"
+      },
+      "description": "Array of messages in this session"
+    },
+    "metadata": {
+      "type": "object",
+      "description": "Custom metadata for the session"
+    },
+    "createdAt": {
+      "type": "string",
+      "format": "date-time",
+      "description": "Session creation timestamp"
+    },
+    "updatedAt": {
+      "type": "string",
+      "format": "date-time",
+      "description": "Last update timestamp"
+    }
+  },
+  "definitions": {
+    "ChatMessage": {
+      "type": "object",
+      "properties": {
+        "id": { "type": "string" },
+        "content": { "type": "string" },
+        "timestamp": { "type": "string", "format": "date-time" },
+        "author": { "type": "string", "enum": ["user", "agent"] },
+        "authorData": {
+          "type": "object",
+          "properties": {
+            "name": { "type": "string" },
+            "email": { "type": "string" },
+            "avatarUrl": { "type": "string" }
+          }
+        },
+        "attachments": {
+          "type": "array",
+          "items": { "$ref": "#/definitions/FileAttachment" }
+        }
+      }
+    },
+    "FileAttachment": {
+      "type": "object",
+      "properties": {
+        "id": { "type": "string" },
+        "name": { "type": "string" },
+        "size": { "type": "number" },
+        "type": { "type": "string" },
+        "url": { "type": "string" }
+      }
+    }
+  }
+}`;
+var API_REFERENCE = `# Channlize API Reference
+
+## Overview
+Channlize is a developer-first support platform that routes customer conversations directly into Slack.
+
+Base URL: \`http://api.channlize.com\` (default) or your configured API endpoint
+
+## Authentication
+All API requests require a Widget Key (API key) in the request body or as a header.
+
+## Endpoints
+
+### Contact Forms
+
+**POST /public/contact**
+Submit a contact form inquiry.
+
+Request Body:
+\`\`\`json
+{
+  "widgetKey": "your-widget-key",
+  "name": "John Doe",
+  "email": "john@example.com",
+  "subject": "Support Request",
+  "message": "I need help with...",
+  "pageUrl": "https://example.com/contact",
+  "userAgent": "Mozilla/5.0..."
+}
+\`\`\`
+
+Response:
+\`\`\`json
+{
+  "data": {
+    "id": "contact_123",
+    "status": "received",
+    "slackThreadUrl": "https://slack.com/..."
+  }
+}
+\`\`\`
+
+### Chat Sessions
+
+**POST /v1/chat/sessions**
+Create a new chat session.
+
+Request Body:
+\`\`\`json
+{
+  "metadata": {
+    "pageUrl": "https://example.com",
+    "userAgent": "Mozilla/5.0...",
+    "customField": "value"
+  }
+}
+\`\`\`
+
+Response:
+\`\`\`json
+{
+  "data": {
+    "session": {
+      "id": "session_123",
+      "status": "active",
+      "messages": [],
+      "createdAt": "2025-01-15T10:00:00Z"
+    },
+    "sseEndpoint": "/v1/chat/sessions/session_123/events"
+  }
+}
+\`\`\`
+
+**POST /v1/chat/sessions/:sessionId/messages**
+Send a message in a chat session.
+
+Request: FormData with 'content' field and optional file attachments
+
+**GET /v1/chat/sessions/:sessionId/messages**
+Get messages for a session. Query params: limit, offset
+
+**POST /v1/chat/sessions/:sessionId/close**
+Close a chat session.
+
+## Error Responses
+
+Status codes:
+- 400: Validation error
+- 401: Authentication failed
+- 429: Rate limit exceeded
+- 500: Server error
+
+Error format:
+\`\`\`json
+{
+  "error": "Error message",
+  "code": "ERROR_CODE",
+  "field": "fieldName" // for validation errors
+}
+\`\`\`
+`;
+var QUICK_START = `# Channlize Quick Start
+
+## Installation
+
+\`\`\`bash
+# For React applications
+npm install @channlize/react
+
+# For non-React applications
+npm install @channlize/core
+\`\`\`
+
+## React Setup
+
+1. Wrap your app with ChannlizeProvider:
+
+\`\`\`tsx
+import { ChannlizeProvider } from '@channlize/react';
+
+function App() {
+  return (
+    <ChannlizeProvider
+      config={{
+        apiKey: 'your-widget-key',
+        projectId: 'your-project-id',
+      }}
+    >
+      <YourApp />
+    </ChannlizeProvider>
+  );
+}
+\`\`\`
+
+2. Use the Form component:
+
+\`\`\`tsx
+import { Form } from '@channlize/react';
+
+function ContactPage() {
+  return (
+    <Form
+      onSuccess={() => console.log('Form submitted!')}
+      submitText="Send Message"
+    />
+  );
+}
+\`\`\`
+
+3. Add live chat:
+
+\`\`\`tsx
+import { Chat } from '@channlize/react';
+
+function SupportPage() {
+  return (
+    <Chat
+      autoStart={true}
+      title="Customer Support"
+      placeholder="How can we help?"
+    />
+  );
+}
+\`\`\`
+
+## Core SDK Usage
+
+For non-React applications:
+
+\`\`\`typescript
+import { ChannlizeClient } from '@channlize/core';
+
+const client = new ChannlizeClient({
+  apiKey: 'your-widget-key',
+  projectId: 'your-project-id',
+});
+
+// Submit contact form
+await client.submitContactForm({
+  name: 'John Doe',
+  email: 'john@example.com',
+  message: 'I need help!',
+});
+
+// Create chat session
+const { session } = await client.createChatSession();
+
+// Send message
+await client.sendMessage(session.id, 'Hello!');
+\`\`\`
+
+## Configuration
+
+- \`apiKey\`: Your Channlize widget key (required)
+- \`projectId\`: Your project ID (required)
+- \`baseUrl\`: API base URL (optional, defaults to api.channlize.com)
+- \`timeout\`: Request timeout in ms (optional, defaults to 10000)
+`;
+var REACT_COMPONENTS = `# Channlize React Components
+
+## ChannlizeProvider
+
+Wrap your app to provide Channlize configuration to all components.
+
+\`\`\`tsx
+<ChannlizeProvider config={{ apiKey, projectId }}>
+  {children}
+</ChannlizeProvider>
+\`\`\`
+
+## Form
+
+A complete contact form with validation and submission handling.
+
+### Props
+- \`customFields?: Array<CustomField>\` - Additional form fields
+- \`onSuccess?: () => void\` - Success callback
+- \`onError?: (error: Error) => void\` - Error callback
+- \`className?: string\` - CSS class name
+- \`styles?: FormStyles\` - Custom styles object
+- \`submitText?: string\` - Submit button text
+- \`successMessage?: string\` - Success message text
+
+### Example
+\`\`\`tsx
+<Form
+  customFields={[
+    {
+      name: 'department',
+      label: 'Department',
+      type: 'select',
+      options: ['Sales', 'Support'],
+      required: true,
+    },
+  ]}
+  onSuccess={() => alert('Sent!')}
+  styles={{
+    button: { background: '#007bff', color: 'white' },
+  }}
+/>
+\`\`\`
+
+## Chat
+
+Real-time chat widget with message history and file attachments.
+
+### Props
+- \`autoStart?: boolean\` - Auto-start chat session
+- \`metadata?: Record<string, unknown>\` - Session metadata
+- \`onMessage?: (message: ChatMessage) => void\` - New message callback
+- \`onError?: (error: Error) => void\` - Error callback
+- \`className?: string\` - CSS class name
+- \`styles?: ChatStyles\` - Custom styles object
+- \`title?: string\` - Chat header title
+- \`placeholder?: string\` - Input placeholder text
+- \`maxHeight?: string\` - Maximum container height
+
+### Example
+\`\`\`tsx
+<Chat
+  autoStart={true}
+  title="Need Help?"
+  placeholder="Type your message..."
+  onMessage={(msg) => console.log('New:', msg)}
+  styles={{
+    container: { width: '400px', height: '500px' },
+    header: { background: '#007bff', color: 'white' },
+  }}
+/>
+\`\`\`
+
+## Hooks
+
+### useContactForm()
+Hook for managing contact form state.
+
+\`\`\`tsx
+const { submit, isSubmitting, isSuccess, error, reset } = useContactForm({
+  onSuccess: (response) => console.log('Submitted:', response),
+  onError: (error) => console.error('Failed:', error),
+});
+\`\`\`
+
+### useChatSession()
+Hook for managing chat sessions.
+
+\`\`\`tsx
+const {
+  session,
+  messages,
+  isConnecting,
+  isConnected,
+  error,
+  sendMessage,
+  startSession,
+  endSession,
+} = useChatSession({
+  autoConnect: false,
+  metadata: { page: 'support' },
+  onMessage: (message) => console.log('New message:', message),
+});
+\`\`\`
+
+## Styling
+
+All components accept \`styles\` prop for custom styling or \`className\` for CSS classes.
+
+CSS class names:
+- \`.channlize-form\`
+- \`.channlize-field\`
+- \`.channlize-error\`
+- \`.channlize-chat-container\`
+- \`.channlize-chat-header\`
+- \`.channlize-chat-messages\`
+- \`.channlize-message\`
+- \`.channlize-message-user\`
+- \`.channlize-message-agent\`
+`;
+var resources = [
+  {
+    uri: "channlize://schema/contact-form",
+    name: "Contact Form Schema",
+    description: "JSON schema for contact form data structure",
+    mimeType: "application/json",
+    getText: () => CONTACT_FORM_SCHEMA
+  },
+  {
+    uri: "channlize://schema/chat-session",
+    name: "Chat Session Schema",
+    description: "JSON schema for chat session data structure",
+    mimeType: "application/json",
+    getText: () => CHAT_SESSION_SCHEMA
+  },
+  {
+    uri: "channlize://docs/api-reference",
+    name: "API Reference",
+    description: "Complete Channlize API reference documentation",
+    mimeType: "text/markdown",
+    getText: () => API_REFERENCE
+  },
+  {
+    uri: "channlize://docs/quick-start",
+    name: "Quick Start Guide",
+    description: "Quick start guide for using Channlize SDK",
+    mimeType: "text/markdown",
+    getText: () => QUICK_START
+  },
+  {
+    uri: "channlize://docs/react-components",
+    name: "React Components Documentation",
+    description: "Documentation for Channlize React components and hooks",
+    mimeType: "text/markdown",
+    getText: () => REACT_COMPONENTS
+  }
+];
+function getResource(uri) {
+  return resources.find((r) => r.uri === uri);
+}
+function listResources() {
+  return resources;
+}
+
+// src/tools/index.ts
+import { ChannlizeClient } from "@channlize/core";
+function createClient(context) {
+  return new ChannlizeClient({
+    apiKey: context.config.apiKey,
+    projectId: context.config.projectId || "",
+    baseUrl: context.config.baseUrl,
+    timeout: context.config.timeout
+  });
+}
+var tools = [
+  {
+    name: "submit_contact_form",
+    description: "Submit a contact form inquiry to Channlize. This creates a new conversation thread in Slack where the team can respond.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        name: {
+          type: "string",
+          description: "Contact's full name"
+        },
+        email: {
+          type: "string",
+          description: "Contact's email address"
+        },
+        subject: {
+          type: "string",
+          description: "Subject line for the inquiry (optional)"
+        },
+        message: {
+          type: "string",
+          description: "The message content"
+        },
+        customFields: {
+          type: "object",
+          description: "Additional custom fields as key-value pairs (optional)",
+          additionalProperties: true
+        },
+        pageUrl: {
+          type: "string",
+          description: "URL of the page where form was submitted (optional)"
+        },
+        userAgent: {
+          type: "string",
+          description: "User agent string of the submitter (optional)"
+        }
+      },
+      required: ["name", "email", "message"]
+    },
+    handler: async (args, context) => {
+      const client = createClient(context);
+      const response = await client.submitContactForm({
+        name: args.name,
+        email: args.email,
+        subject: args.subject,
+        message: args.message,
+        customFields: args.customFields,
+        pageUrl: args.pageUrl,
+        userAgent: args.userAgent
+      });
+      return {
+        success: true,
+        contactId: response.id,
+        status: response.status,
+        slackThreadUrl: response.slackThreadUrl,
+        message: "Contact form submitted successfully"
+      };
+    }
+  },
+  {
+    name: "create_chat_session",
+    description: "Create a new chat session for real-time messaging. Returns a session ID that can be used to send and receive messages.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        metadata: {
+          type: "object",
+          description: "Custom metadata to attach to the session (e.g., page URL, user info)",
+          additionalProperties: true
+        }
+      }
+    },
+    handler: async (args, context) => {
+      const client = createClient(context);
+      const response = await client.createChatSession(args.metadata);
+      return {
+        success: true,
+        session: {
+          id: response.session.id,
+          status: response.session.status,
+          createdAt: response.session.createdAt,
+          messageCount: response.session.messages?.length || 0
+        },
+        sseEndpoint: response.sseEndpoint,
+        message: "Chat session created successfully"
+      };
+    }
+  },
+  {
+    name: "send_message",
+    description: "Send a message in an existing chat session. The message will be delivered to the Slack thread and the user can see agent replies in real-time.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        sessionId: {
+          type: "string",
+          description: "The chat session ID"
+        },
+        content: {
+          type: "string",
+          description: "The message content to send"
+        }
+      },
+      required: ["sessionId", "content"]
+    },
+    handler: async (args, context) => {
+      const client = createClient(context);
+      const response = await client.sendMessage(args.sessionId, args.content);
+      return {
+        success: true,
+        message: {
+          id: response.message.id,
+          content: response.message.content,
+          timestamp: response.message.timestamp,
+          author: response.message.author
+        },
+        sessionStatus: response.session.status,
+        deliveryMessage: "Message sent successfully"
+      };
+    }
+  },
+  {
+    name: "get_chat_messages",
+    description: "Retrieve messages from a chat session. Useful for viewing conversation history.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        sessionId: {
+          type: "string",
+          description: "The chat session ID"
+        },
+        limit: {
+          type: "number",
+          description: "Maximum number of messages to retrieve (default: 50)",
+          default: 50
+        },
+        offset: {
+          type: "number",
+          description: "Number of messages to skip (default: 0)",
+          default: 0
+        }
+      },
+      required: ["sessionId"]
+    },
+    handler: async (args, context) => {
+      const client = createClient(context);
+      const messages = await client.getChatMessages(
+        args.sessionId,
+        args.limit || 50,
+        args.offset || 0
+      );
+      return {
+        success: true,
+        sessionId: args.sessionId,
+        messageCount: messages.length,
+        messages: messages.map((msg) => ({
+          id: msg.id,
+          content: msg.content,
+          timestamp: msg.timestamp,
+          author: msg.author,
+          authorData: msg.authorData,
+          hasAttachments: (msg.attachments?.length || 0) > 0
+        }))
+      };
+    }
+  },
+  {
+    name: "close_chat_session",
+    description: "Close an active chat session. This marks the conversation as complete and stops real-time updates.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        sessionId: {
+          type: "string",
+          description: "The chat session ID to close"
+        }
+      },
+      required: ["sessionId"]
+    },
+    handler: async (args, context) => {
+      const client = createClient(context);
+      const session = await client.closeChatSession(args.sessionId);
+      return {
+        success: true,
+        sessionId: session.id,
+        status: session.status,
+        closedAt: session.updatedAt,
+        message: "Chat session closed successfully"
+      };
+    }
+  }
+];
+function getTool(name) {
+  return tools.find((t) => t.name === name);
+}
+function listTools() {
+  return tools;
+}
+
+// src/prompts/index.ts
+var prompts = [
+  {
+    name: "integrate-contact-form",
+    description: "Guide for adding a Channlize contact form to a React application",
+    arguments: [
+      {
+        name: "framework",
+        description: "The React framework being used (e.g., Next.js, Vite, CRA)",
+        required: false
+      },
+      {
+        name: "styling",
+        description: "The styling approach (e.g., Tailwind, CSS Modules, styled-components)",
+        required: false
+      }
+    ],
+    getPrompt: (args) => {
+      const framework = args?.framework || "React";
+      const styling = args?.styling || "CSS";
+      return `# Integrating Channlize Contact Form in ${framework}
+
+## Step 1: Install Dependencies
+
+\`\`\`bash
+npm install @channlize/react
+\`\`\`
+
+## Step 2: Configure Provider
+
+Wrap your application with the ChannlizeProvider at the root level:
+
+\`\`\`tsx
+import { ChannlizeProvider } from '@channlize/react';
+
+function App() {
+  return (
+    <ChannlizeProvider
+      config={{
+        apiKey: process.env.NEXT_PUBLIC_CHANNLIZE_API_KEY, // Your widget key
+        projectId: process.env.NEXT_PUBLIC_CHANNLIZE_PROJECT_ID,
+        baseUrl: process.env.NEXT_PUBLIC_CHANNLIZE_API_URL, // Optional
+      }}
+    >
+      <YourAppContent />
+    </ChannlizeProvider>
+  );
+}
+\`\`\`
+
+## Step 3: Add Form Component
+
+Create a contact page or component:
+
+\`\`\`tsx
+import { Form } from '@channlize/react';
+
+export default function ContactPage() {
+  return (
+    <div className="container mx-auto py-8">
+      <h1>Contact Us</h1>
+      <Form
+        onSuccess={() => {
+          alert('Thank you! We will get back to you soon.');
+        }}
+        onError={(error) => {
+          console.error('Failed to submit:', error);
+        }}
+        customFields={[
+          {
+            name: 'department',
+            label: 'Department',
+            type: 'select',
+            options: ['Sales', 'Support', 'Billing'],
+            required: true,
+          },
+        ]}
+        ${styling === "Tailwind" ? `className="max-w-2xl"` : ""}
+        styles={{
+          form: { maxWidth: '600px', margin: '0 auto' },
+          button: { 
+            background: '#007bff', 
+            color: 'white',
+            padding: '0.75rem 1.5rem',
+            borderRadius: '0.5rem',
+          },
+        }}
+        submitText="Send Message"
+        successMessage="Thank you! We'll respond shortly."
+      />
+    </div>
+  );
+}
+\`\`\`
+
+## Step 4: Environment Variables
+
+Add to your \`.env.local\` or \`.env\`:
+
+\`\`\`
+NEXT_PUBLIC_CHANNLIZE_API_KEY=your_widget_key_here
+NEXT_PUBLIC_CHANNLIZE_PROJECT_ID=your_project_id_here
+NEXT_PUBLIC_CHANNLIZE_API_URL=http://api.channlize.com  # Optional
+\`\`\`
+
+## Step 5: Customize (Optional)
+
+### Custom Fields
+Add custom fields to gather specific information:
+
+\`\`\`tsx
+customFields={[
+  {
+    name: 'company',
+    label: 'Company Name',
+    type: 'text',
+    required: false,
+  },
+  {
+    name: 'priority',
+    label: 'Priority',
+    type: 'select',
+    options: ['Low', 'Medium', 'High'],
+    required: true,
+  },
+]}
+\`\`\`
+
+### Custom Styling with ${styling}
+${styling === "Tailwind" ? "Use Tailwind classes with the className prop or override styles." : "Apply custom styles using the styles prop or external CSS."}
+
+## Tips
+
+- Messages are sent to your configured Slack channel instantly
+- Email fallback is automatic if Slack delivery fails
+- Form includes built-in validation and error handling
+- All fields support accessibility features (ARIA labels, keyboard navigation)
+
+## Next Steps
+
+- Set up Slack workspace integration in your Channlize dashboard
+- Configure channel routing rules
+- Add webhooks for custom workflows
+`;
+    }
+  },
+  {
+    name: "setup-live-chat",
+    description: "Guide for implementing the Channlize live chat widget in a React application",
+    arguments: [
+      {
+        name: "placement",
+        description: 'Where to place the chat widget (e.g., "page", "popup", "sidebar")',
+        required: false
+      }
+    ],
+    getPrompt: (args) => {
+      const placement = args?.placement || "page";
+      return `# Setting Up Channlize Live Chat Widget
+
+## Step 1: Install Dependencies
+
+\`\`\`bash
+npm install @channlize/react
+\`\`\`
+
+## Step 2: Configure Provider
+
+Ensure your app is wrapped with ChannlizeProvider:
+
+\`\`\`tsx
+import { ChannlizeProvider } from '@channlize/react';
+
+function App() {
+  return (
+    <ChannlizeProvider
+      config={{
+        apiKey: process.env.NEXT_PUBLIC_CHANNLIZE_API_KEY,
+        projectId: process.env.NEXT_PUBLIC_CHANNLIZE_PROJECT_ID,
+      }}
+    >
+      <YourAppContent />
+    </ChannlizeProvider>
+  );
+}
+\`\`\`
+
+## Step 3: Add Chat Component
+
+${placement === "popup" ? `
+### Popup Widget (Bottom-Right Corner)
+
+\`\`\`tsx
+import { useState } from 'react';
+import { Chat } from '@channlize/react';
+
+export function ChatWidget() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <>
+      {/* Floating Button */}
+      {!isOpen && (
+        <button
+          onClick={() => setIsOpen(true)}
+          style={{
+            position: 'fixed',
+            bottom: '20px',
+            right: '20px',
+            width: '60px',
+            height: '60px',
+            borderRadius: '50%',
+            background: '#007bff',
+            color: 'white',
+            border: 'none',
+            fontSize: '24px',
+            cursor: 'pointer',
+            boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
+            zIndex: 1000,
+          }}
+        >
+          \u{1F4AC}
+        </button>
+      )}
+
+      {/* Chat Window */}
+      {isOpen && (
+        <div
+          style={{
+            position: 'fixed',
+            bottom: '20px',
+            right: '20px',
+            zIndex: 1000,
+            boxShadow: '0 4px 24px rgba(0,0,0,0.15)',
+            borderRadius: '12px',
+            overflow: 'hidden',
+          }}
+        >
+          <Chat
+            autoStart={true}
+            title="Customer Support"
+            placeholder="Type your message..."
+            onMessage={(message) => {
+              console.log('New message:', message);
+            }}
+            styles={{
+              container: {
+                width: '380px',
+                height: '600px',
+                display: 'flex',
+                flexDirection: 'column',
+                background: 'white',
+              },
+              header: {
+                background: '#007bff',
+                color: 'white',
+                padding: '1rem',
+                display: 'flex',
+                alignItems: 'center',
+              },
+            }}
+          />
+          <button
+            onClick={() => setIsOpen(false)}
+            style={{
+              position: 'absolute',
+              top: '10px',
+              right: '10px',
+              background: 'rgba(255,255,255,0.2)',
+              border: 'none',
+              color: 'white',
+              cursor: 'pointer',
+              fontSize: '20px',
+              width: '30px',
+              height: '30px',
+              borderRadius: '50%',
+            }}
+          >
+            \xD7
+          </button>
+        </div>
+      )}
+    </>
+  );
+}
+\`\`\`
+` : `
+### Embedded Chat
+
+\`\`\`tsx
+import { Chat } from '@channlize/react';
+
+export default function SupportPage() {
+  return (
+    <div className="container mx-auto py-8">
+      <h1>Customer Support</h1>
+      <Chat
+        autoStart={true}
+        title="Live Chat Support"
+        placeholder="How can we help you today?"
+        onMessage={(message) => {
+          // Handle incoming messages
+          console.log('New message:', message);
+        }}
+        onError={(error) => {
+          console.error('Chat error:', error);
+        }}
+        styles={{
+          container: {
+            width: '100%',
+            maxWidth: '800px',
+            height: '600px',
+            margin: '0 auto',
+            border: '1px solid #e0e0e0',
+            borderRadius: '12px',
+          },
+          header: {
+            background: '#007bff',
+            color: 'white',
+          },
+        }}
+        maxHeight="600px"
+      />
+    </div>
+  );
+}
+\`\`\`
+`}
+
+## Step 4: Advanced Features
+
+### Custom Metadata
+Pass context about the user or page:
+
+\`\`\`tsx
+<Chat
+  metadata={{
+    userId: user?.id,
+    userName: user?.name,
+    currentPage: window.location.pathname,
+    plan: 'pro',
+  }}
+/>
+\`\`\`
+
+### Event Handlers
+React to chat events:
+
+\`\`\`tsx
+<Chat
+  onMessage={(message) => {
+    // Track analytics
+    analytics.track('chat_message_received', {
+      author: message.author,
+      timestamp: message.timestamp,
+    });
+  }}
+  onError={(error) => {
+    // Report errors
+    errorReporting.log(error);
+  }}
+/>
+\`\`\`
+
+## Real-Time Features
+
+- Messages are delivered instantly via Server-Sent Events (SSE)
+- Agent presence indicators show when team is active
+- File attachments supported (images, documents)
+- Automatic reconnection on connection loss
+- Message history persisted across sessions
+
+## Tips
+
+- Chat sessions are automatically created on first message
+- Sessions remain active until explicitly closed
+- Messages are threaded in Slack for team collaboration
+- Supports multiple concurrent chat sessions per project
+
+## Next Steps
+
+- Configure Slack notifications for new chats
+- Set up auto-responses for common questions
+- Integrate with your analytics platform
+- Add custom routing based on user context
+`;
+    }
+  },
+  {
+    name: "customize-styling",
+    description: "Guide for theming and customizing Channlize components",
+    getPrompt: () => `# Customizing Channlize Component Styling
+
+Channlize components are designed to be highly customizable to match your brand.
+
+## Styling Approaches
+
+### 1. Inline Styles with \`styles\` Prop
+
+The most direct way to customize appearance:
+
+\`\`\`tsx
+<Form
+  styles={{
+    form: {
+      maxWidth: '600px',
+      margin: '0 auto',
+      padding: '2rem',
+      background: '#f9fafb',
+      borderRadius: '8px',
+    },
+    field: {
+      marginBottom: '1.5rem',
+    },
+    label: {
+      display: 'block',
+      marginBottom: '0.5rem',
+      fontWeight: '600',
+      color: '#374151',
+    },
+    input: {
+      width: '100%',
+      padding: '0.75rem',
+      border: '1px solid #d1d5db',
+      borderRadius: '6px',
+      fontSize: '1rem',
+    },
+    textarea: {
+      width: '100%',
+      padding: '0.75rem',
+      border: '1px solid #d1d5db',
+      borderRadius: '6px',
+      fontSize: '1rem',
+      minHeight: '120px',
+    },
+    button: {
+      background: '#3b82f6',
+      color: 'white',
+      padding: '0.75rem 2rem',
+      border: 'none',
+      borderRadius: '6px',
+      fontSize: '1rem',
+      fontWeight: '600',
+      cursor: 'pointer',
+      transition: 'background 0.2s',
+    },
+    error: {
+      color: '#ef4444',
+      fontSize: '0.875rem',
+      marginTop: '0.5rem',
+    },
+    success: {
+      background: '#ecfdf5',
+      border: '1px solid #10b981',
+      padding: '1.5rem',
+      borderRadius: '6px',
+      color: '#065f46',
+    },
+  }}
+/>
+\`\`\`
+
+### 2. CSS Classes with \`className\` Prop
+
+Use your existing CSS or CSS-in-JS solution:
+
+\`\`\`tsx
+<Form className="custom-form" />
+\`\`\`
+
+\`\`\`css
+/* styles.css */
+.channlize-form {
+  max-width: 600px;
+  margin: 0 auto;
+}
+
+.channlize-field {
+  margin-bottom: 1.5rem;
+}
+
+.channlize-field label {
+  font-weight: 600;
+  color: var(--primary-text);
+}
+
+.channlize-field input,
+.channlize-field textarea,
+.channlize-field select {
+  border: 1px solid var(--border-color);
+  border-radius: 6px;
+  padding: 0.75rem;
+}
+
+.channlize-form button[type="submit"] {
+  background: var(--primary-color);
+  color: white;
+}
+\`\`\`
+
+### 3. Tailwind CSS
+
+Combine with Tailwind utility classes:
+
+\`\`\`tsx
+<Form
+  className="max-w-2xl mx-auto p-8"
+  styles={{
+    input: {
+      // Tailwind styles as objects don't work well
+      // Use className on wrapper or global CSS
+    },
+  }}
+/>
+\`\`\`
+
+\`\`\`css
+/* globals.css with @layer */
+@layer components {
+  .channlize-field input {
+    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500;
+  }
+  
+  .channlize-field textarea {
+    @apply w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500;
+  }
+  
+  .channlize-form button[type="submit"] {
+    @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-lg transition;
+  }
+}
+\`\`\`
+
+## Styling Chat
+
+\`\`\`tsx
+<Chat
+  styles={{
+    container: {
+      border: '1px solid #e5e7eb',
+      borderRadius: '12px',
+      overflow: 'hidden',
+      boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
+    },
+    header: {
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      color: 'white',
+      padding: '1rem',
+    },
+    messages: {
+      background: '#f9fafb',
+      padding: '1rem',
+    },
+    messageUser: {
+      background: '#3b82f6',
+      color: 'white',
+      padding: '0.75rem',
+      borderRadius: '12px 12px 4px 12px',
+      maxWidth: '70%',
+      marginLeft: 'auto',
+    },
+    messageAgent: {
+      background: 'white',
+      color: '#1f2937',
+      padding: '0.75rem',
+      borderRadius: '12px 12px 12px 4px',
+      maxWidth: '70%',
+      border: '1px solid #e5e7eb',
+    },
+    input: {
+      border: '1px solid #d1d5db',
+      borderRadius: '6px',
+      padding: '0.75rem',
+      fontSize: '1rem',
+    },
+    button: {
+      background: '#3b82f6',
+      color: 'white',
+      padding: '0.75rem 1.5rem',
+      borderRadius: '6px',
+      border: 'none',
+      cursor: 'pointer',
+    },
+  }}
+/>
+\`\`\`
+
+## CSS Class Reference
+
+All Channlize components use semantic CSS classes:
+
+**Form:**
+- \`.channlize-form\` - Form container
+- \`.channlize-form-success\` - Success message container
+- \`.channlize-field\` - Field wrapper
+- \`.channlize-error\` - Error message
+
+**Chat:**
+- \`.channlize-chat-container\` - Main container
+- \`.channlize-chat-header\` - Header section
+- \`.channlize-chat-messages\` - Messages container
+- \`.channlize-message\` - Individual message
+- \`.channlize-message-user\` - User message
+- \`.channlize-message-agent\` - Agent message
+- \`.channlize-chat-input-container\` - Input area
+
+## Dark Mode Example
+
+\`\`\`tsx
+const darkStyles = {
+  form: {
+    background: '#1f2937',
+    color: '#f9fafb',
+  },
+  input: {
+    background: '#374151',
+    color: '#f9fafb',
+    border: '1px solid #4b5563',
+  },
+  button: {
+    background: '#3b82f6',
+    color: 'white',
+  },
+};
+
+<Form styles={darkStyles} />
+\`\`\`
+`
+  },
+  {
+    name: "handle-webhooks",
+    description: "Guide for integrating Channlize webhooks into custom workflows",
+    getPrompt: () => `# Integrating Channlize Webhooks
+
+Channlize can send webhook events to your backend for custom workflows and integrations.
+
+## Available Webhook Events
+
+- \`conversation.created\` - New contact form or chat session started
+- \`message.created\` - New message in a conversation
+- \`conversation.closed\` - Conversation marked as closed
+- \`agent.assigned\` - Agent assigned to conversation
+
+## Setting Up Webhooks
+
+### 1. Configure Webhook URL
+
+In your Channlize dashboard:
+1. Navigate to Project Settings \u2192 Webhooks
+2. Add your webhook endpoint URL
+3. Select which events to receive
+4. Save your secret key for verification
+
+### 2. Create Webhook Handler (Next.js API Route)
+
+\`\`\`typescript
+// app/api/webhooks/channlize/route.ts
+import { NextRequest, NextResponse } from 'next/server';
+import crypto from 'crypto';
+
+const WEBHOOK_SECRET = process.env.CHANNLIZE_WEBHOOK_SECRET!;
+
+function verifySignature(payload: string, signature: string): boolean {
+  const hmac = crypto.createHmac('sha256', WEBHOOK_SECRET);
+  const digest = hmac.update(payload).digest('hex');
+  return crypto.timingSafeEqual(
+    Buffer.from(signature),
+    Buffer.from(digest)
+  );
+}
+
+export async function POST(req: NextRequest) {
+  const signature = req.headers.get('x-channlize-signature');
+  const payload = await req.text();
+
+  if (!signature || !verifySignature(payload, signature)) {
+    return NextResponse.json(
+      { error: 'Invalid signature' },
+      { status: 401 }
+    );
+  }
+
+  const event = JSON.parse(payload);
+
+  // Handle different event types
+  switch (event.type) {
+    case 'conversation.created':
+      await handleNewConversation(event.data);
+      break;
+
+    case 'message.created':
+      await handleNewMessage(event.data);
+      break;
+
+    case 'conversation.closed':
+      await handleConversationClosed(event.data);
+      break;
+
+    default:
+      console.log('Unhandled event type:', event.type);
+  }
+
+  return NextResponse.json({ received: true });
+}
+
+async function handleNewConversation(data: any) {
+  // Example: Log to analytics
+  await analytics.track('support_conversation_started', {
+    conversationId: data.conversation.id,
+    type: data.conversation.type, // 'contact_form' or 'chat'
+    customerEmail: data.conversation.email,
+  });
+
+  // Example: Notify sales team for high-value customers
+  if (data.conversation.metadata?.customerTier === 'enterprise') {
+    await notifySalesTeam({
+      conversationId: data.conversation.id,
+      customerEmail: data.conversation.email,
+      message: data.conversation.initialMessage,
+    });
+  }
+}
+
+async function handleNewMessage(data: any) {
+  // Example: Auto-tag based on content
+  const message = data.message.content.toLowerCase();
+  
+  if (message.includes('bug') || message.includes('error')) {
+    await tagConversation(data.conversation.id, 'bug');
+  }
+  
+  if (message.includes('billing') || message.includes('payment')) {
+    await tagConversation(data.conversation.id, 'billing');
+    await assignToDepartment(data.conversation.id, 'billing');
+  }
+
+  // Example: Sentiment analysis
+  const sentiment = await analyzeSentiment(message);
+  if (sentiment === 'negative') {
+    await escalateConversation(data.conversation.id, 'high');
+  }
+}
+
+async function handleConversationClosed(data: any) {
+  // Example: Send satisfaction survey
+  await sendSurveyEmail({
+    to: data.conversation.email,
+    conversationId: data.conversation.id,
+    resolutionTime: data.metrics.resolutionTime,
+  });
+
+  // Example: Update CRM
+  await updateCRM({
+    email: data.conversation.email,
+    lastInteraction: new Date(),
+    supportTicketId: data.conversation.id,
+    resolved: true,
+  });
+}
+\`\`\`
+
+### 3. Express.js Example
+
+\`\`\`typescript
+import express from 'express';
+import crypto from 'crypto';
+
+const app = express();
+
+// Raw body needed for signature verification
+app.use('/webhooks/channlize', express.raw({ type: 'application/json' }));
+
+app.post('/webhooks/channlize', (req, res) => {
+  const signature = req.headers['x-channlize-signature'];
+  const payload = req.body.toString();
+
+  // Verify signature
+  const hmac = crypto.createHmac('sha256', process.env.CHANNLIZE_WEBHOOK_SECRET);
+  const digest = hmac.update(payload).digest('hex');
+
+  if (signature !== digest) {
+    return res.status(401).json({ error: 'Invalid signature' });
+  }
+
+  const event = JSON.parse(payload);
+
+  // Handle event
+  handleEvent(event);
+
+  res.json({ received: true });
+});
+\`\`\`
+
+## Webhook Event Payload Examples
+
+### conversation.created
+
+\`\`\`json
+{
+  "type": "conversation.created",
+  "timestamp": "2025-01-15T10:00:00Z",
+  "data": {
+    "conversation": {
+      "id": "conv_123",
+      "type": "contact_form",
+      "status": "open",
+      "email": "customer@example.com",
+      "name": "John Doe",
+      "initialMessage": "I need help with...",
+      "metadata": {
+        "pageUrl": "https://example.com/contact",
+        "userAgent": "Mozilla/5.0..."
+      },
+      "createdAt": "2025-01-15T10:00:00Z"
+    }
+  }
+}
+\`\`\`
+
+### message.created
+
+\`\`\`json
+{
+  "type": "message.created",
+  "timestamp": "2025-01-15T10:05:00Z",
+  "data": {
+    "message": {
+      "id": "msg_456",
+      "conversationId": "conv_123",
+      "content": "Thanks for reaching out!",
+      "author": "agent",
+      "authorData": {
+        "name": "Sarah",
+        "email": "sarah@example.com"
+      },
+      "timestamp": "2025-01-15T10:05:00Z"
+    },
+    "conversation": {
+      "id": "conv_123",
+      "status": "open"
+    }
+  }
+}
+\`\`\`
+
+## Use Cases
+
+1. **CRM Integration**: Sync conversations to Salesforce, HubSpot, etc.
+2. **Analytics**: Track support metrics in your data warehouse
+3. **Auto-routing**: Assign conversations based on content analysis
+4. **Notifications**: Alert teams via SMS, PagerDuty for urgent issues
+5. **AI Enhancement**: Feed messages to AI for sentiment/intent analysis
+6. **Billing**: Track support usage for metered billing
+
+## Security Best Practices
+
+- Always verify webhook signatures
+- Use HTTPS endpoints only
+- Rotate webhook secrets periodically
+- Implement rate limiting on webhook endpoints
+- Log all webhook events for audit trail
+`
+  }
+];
+function getPrompt(name) {
+  return prompts.find((p) => p.name === name);
+}
+function listPrompts() {
+  return prompts;
+}
+
+// src/index.ts
+var ChannlizeMCPServer = class {
+  server;
+  config;
+  constructor(options = {}) {
+    this.config = options.config;
+    this.server = new Server(
+      {
+        name: options.name || "channlize-mcp",
+        version: options.version || "0.1.0"
+      },
+      {
+        capabilities: {
+          resources: {},
+          tools: {},
+          prompts: {}
+        }
+      }
+    );
+    this.setupHandlers();
+  }
+  setupHandlers() {
+    this.server.setRequestHandler(ListResourcesRequestSchema, async () => {
+      const resources2 = listResources();
+      return {
+        resources: resources2.map((r) => ({
+          uri: r.uri,
+          name: r.name,
+          description: r.description,
+          mimeType: r.mimeType
+        }))
+      };
+    });
+    this.server.setRequestHandler(ReadResourceRequestSchema, async (request) => {
+      const resource = getResource(request.params.uri);
+      if (!resource) {
+        throw new Error(`Resource not found: ${request.params.uri}`);
+      }
+      return {
+        contents: [
+          {
+            uri: resource.uri,
+            mimeType: resource.mimeType,
+            text: resource.getText()
+          }
+        ]
+      };
+    });
+    this.server.setRequestHandler(ListToolsRequestSchema, async () => {
+      const tools2 = listTools();
+      return {
+        tools: tools2.map((t) => ({
+          name: t.name,
+          description: t.description,
+          inputSchema: t.inputSchema
+        }))
+      };
+    });
+    this.server.setRequestHandler(CallToolRequestSchema, async (request) => {
+      const tool = getTool(request.params.name);
+      if (!tool) {
+        throw new Error(`Tool not found: ${request.params.name}`);
+      }
+      if (!this.config?.apiKey) {
+        throw new Error(
+          "Channlize API key required. Please configure the MCP server with your API credentials."
+        );
+      }
+      const context = {
+        config: this.config
+      };
+      try {
+        const result = await tool.handler(request.params.arguments || {}, context);
+        return {
+          content: [
+            {
+              type: "text",
+              text: JSON.stringify(result, null, 2)
+            }
+          ]
+        };
+      } catch (error) {
+        return {
+          content: [
+            {
+              type: "text",
+              text: JSON.stringify(
+                {
+                  success: false,
+                  error: error.message || "Unknown error",
+                  code: error.code,
+                  statusCode: error.statusCode
+                },
+                null,
+                2
+              )
+            }
+          ],
+          isError: true
+        };
+      }
+    });
+    this.server.setRequestHandler(ListPromptsRequestSchema, async () => {
+      const prompts2 = listPrompts();
+      return {
+        prompts: prompts2.map((p) => ({
+          name: p.name,
+          description: p.description,
+          arguments: p.arguments
+        }))
+      };
+    });
+    this.server.setRequestHandler(GetPromptRequestSchema, async (request) => {
+      const prompt = getPrompt(request.params.name);
+      if (!prompt) {
+        throw new Error(`Prompt not found: ${request.params.name}`);
+      }
+      const args = request.params.arguments;
+      const text = prompt.getPrompt(args);
+      return {
+        description: prompt.description,
+        messages: [
+          {
+            role: "user",
+            content: {
+              type: "text",
+              text
+            }
+          }
+        ]
+      };
+    });
+  }
+  /**
+   * Set or update the Channlize configuration
+   */
+  setConfig(config) {
+    this.config = config;
+  }
+  /**
+   * Get the underlying MCP server instance
+   */
+  getServer() {
+    return this.server;
+  }
+  /**
+   * Start the server with stdio transport
+   */
+  async runStdio() {
+    const transport = new StdioServerTransport();
+    await this.server.connect(transport);
+  }
+  /**
+   * Close the server
+   */
+  async close() {
+    await this.server.close();
+  }
+};
+function createMCPServer(options) {
+  return new ChannlizeMCPServer(options);
+}
+var index_default = ChannlizeMCPServer;
+export {
+  ChannlizeMCPServer,
+  createMCPServer,
+  index_default as default,
+  getPrompt,
+  getResource,
+  getTool,
+  listPrompts,
+  listResources,
+  listTools
+};
+//# sourceMappingURL=index.mjs.map