ContentPulse Chat SDK

Advanced React SDK for ContentPulse AI Chat Agent integration with extensive customization, beautiful themes, and seamless Contentstack CMS integration. Build powerful conversational AI experiences with minimal setup and maximum flexibility.

Live Demo & Resources

• Live Demo: https://contentpulse-contentpulse-contenpulse.eu-contentstackapps.com/
• NPM Package: https://www.npmjs.com/settings/hemantkadam/packages
• Demo Video: https://youtu.be/oL8AujXvVGY
• GitHub Repository: https://github.com/hemant-i7/ContentPulse

Features

• Advanced Theming - Highly customizable visual configurations with gradients, animations, and layouts
• Multi-LLM Support - OpenAI and Perplexity integration with streaming responses
• Context-Aware Conversations - Configurable context memory (0-20 messages) for intelligent follow-ups
• Lead Capture & VAPI Integration - Automatic call prompts with configurable triggers and phone call automation
• Rich Markdown Support - Full markdown rendering with code highlighting, tables, and formatting
• Responsive Design - Mobile-first design with optimized touch interactions
• Contentstack Integration - Seamless CMS content retrieval via MCP protocol
• TypeScript - Full type safety and comprehensive IntelliSense support
• Smooth Animations - Beautiful Framer Motion animations and transitions
• Multiple Components - Choose from ChatAgent, SmartChatAgent, or EasySetupAgent
• Agent Management - Save, load, and switch between different agent configurations
• Easy Integration - Drop-in components with automatic configuration detection
• Configurable Triggers - Set custom message thresholds for lead capture (1-10 messages)

Installation

npm install contentpulse-chat-sdk

Quick Start

Basic Setup

import { ContentPulseProvider, EasySetupAgent } from 'contentpulse-chat-sdk';

function App() {
  const config = {
    baseUrl: 'https://your-contentpulse-api.com',
    apiKey: 'your-api-key',
    defaultAgent: 'agent-id'
  };

  return (
    <ContentPulseProvider config={config}>
      <EasySetupAgent agentId="your-agent-id" />
    </ContentPulseProvider>
  );
}

Advanced Usage with Custom Chat Agent

import { ChatAgent, useChatAgent } from 'contentpulse-chat-sdk';

function CustomChatInterface() {
  const { messages, sendMessage, isLoading } = useChatAgent({
    agentId: 'your-agent-id',
    apiUrl: '/api/chat-agents',
    onMessageReceived: (message) => {
      console.log('Received:', message);
    }
  });

  return (
    <div>
      <div className="messages">
        {messages.map((msg) => (
          <div key={msg.id} className={`message ${msg.role}`}>
            {msg.content}
          </div>
        ))}
      </div>
      <button 
        onClick={() => sendMessage('Hello!')}
        disabled={isLoading}
      >
        Send Message
      </button>
    </div>
  );
}

Smart Chat Agent with Built-in UI

import { SmartChatAgent } from 'contentpulse-chat-sdk';

function MyApp() {
  const agentConfig = {
    id: 'agent-123',
    name: 'Support Bot',
    apiUrl: '/api/chat-agents',
    theme: {
      primaryColor: '#007bff',
      backgroundColor: '#f8f9fa'
    }
  };

  return (
    <SmartChatAgent 
      config={agentConfig}
      onMessageSent={(msg) => console.log('Sent:', msg)}
      onMessageReceived={(msg) => console.log('Received:', msg)}
    />
  );
}

Components

EasySetupAgent

A simple, drop-in chat component that requires minimal configuration.

Props:

• agentId: string - The ID of your chat agent
• apiUrl?: string - Custom API endpoint (defaults to /api/chat-agents)
• theme?: object - Custom theme configuration

SmartChatAgent

A feature-rich chat component with message history and state management.

Props:

• config: ChatAgentConfig - Complete agent configuration
• onMessageSent?: (message: string) => void - Callback when user sends a message
• onMessageReceived?: (message: string) => void - Callback when agent responds

ChatAgent

A base chat component for building custom interfaces.

Props:

• config: ChatAgentConfig - Agent configuration
• onMessage?: (message: string) => void - Message handler
• children?: ReactNode - Custom content

Hooks

useChatAgent

A React hook for managing chat state and interactions.

Parameters:

• agentId: string - The agent ID
• apiUrl?: string - API endpoint
• apiKey?: string - Authentication key
• onMessageReceived?: (message: ChatMessage) => void - Message callback
• onError?: (error: string) => void - Error callback

Returns:

• messages: ChatMessage[] - Array of chat messages
• isLoading: boolean - Loading state
• error: string | null - Error state
• sendMessage: (content: string) => Promise<void> - Send message function
• clearMessages: () => void - Clear chat history
• session: ChatSession | null - Current chat session

Providers

ContentPulseProvider

Global configuration provider for the SDK.

import { ContentPulseProvider } from 'contentpulse-chat-sdk';

const config = {
  baseUrl: 'https://api.contentpulse.com',
  apiKey: 'your-api-key',
  defaultAgent: 'default-agent-id'
};

<ContentPulseProvider config={config}>
  {/* Your app components */}
</ContentPulseProvider>

AgentConfigProvider

Agent-specific configuration provider.

import { AgentConfigProvider } from 'contentpulse-chat-sdk';

const agentConfig = {
  id: 'agent-123',
  name: 'My Agent',
  apiUrl: '/api/chat-agents',
  theme: { primaryColor: '#007bff' }
};

<AgentConfigProvider config={agentConfig}>
  {/* Agent components */}
</AgentConfigProvider>

TypeScript Support

The SDK is built with TypeScript and provides comprehensive type definitions:

import type { 
  ChatAgentConfig, 
  ChatMessage, 
  ChatSession,
  ContentPulseConfig 
} from 'contentpulse-chat-sdk';

API Requirements

Your backend should implement the following endpoints:

• POST /api/chat-agents/{agentId}/chat - Send messages to the agent
• Response format: { message: string, sessionId?: string, metadata?: object }

Development

To build the SDK:

npm run build

To watch for changes during development:

npm run dev

License

MIT License - see LICENSE file for details.