P-GPT: React AI Chat Assistant

A modern, customizable React chat component with beautiful themes, smart positioning, and seamless AI integration. Add an AI-powered chat assistant to your React app in minutes!

🚀 Features

• Beautiful UI Themes - 6 carefully designed themes with light/dark mode support
• Smart Positioning - 3 optimized positions: bottom-left, bottom-right, and fullscreen
• AI Integration - Works with OpenAI, Google Gemini, and custom APIs
• Context Management - Optional chat history inclusion with token optimization
• Highly Customizable - Appearance, behavior, and styling options
• Dark Mode Support - All themes include dark mode variants
• Conversation History - Auto-saves chats with flexible storage options
• Typing Animation - Realistic typewriter effect for bot responses
• Mobile Responsive - Optimized for all device sizes

📦 Installation

# With npm
npm install p-gpt

# With yarn
yarn add p-gpt

# With pnpm
pnpm add p-gpt

🔧 Quick Start

Basic Usage with OpenAI

import { PGPT } from 'p-gpt';
import 'dist/index.css';

export default function App() {
  return (
    <PGPT 
      apiKey="YOUR_API_KEY" 
      theme="silver"
      appearance="dark"
    />
  );
}

With Google Gemini

import { PGPT } from 'p-gpt';
import 'dist/index.css';

export default function App() {
  return (
    <PGPT 
      apiKey="YOUR_GEMINI_API_KEY" 
      llmProvider="Gemini"
      model="gemini-1.5-pro"
      theme="premium"
      appearance="light"
      content={{
        title: "AI Assistant",
        welcomeMessage: "Hello! I'm powered by Gemini. How can I assist you?"
      }}
    />
  );
}

With Custom API Endpoint

import { PGPT } from 'p-gpt';
import 'dist/index.css';

export default function App() {
  return (
    <PGPT 
      routerConfig={{
        endpoint: "/api/chat",
        headers: {
          "x-api-key": "internal-api-key"
        }
      }}
      theme="titanium"
    />
  );
}

🎨 Available Themes

P-GPT includes 3 beautiful themes, each supporting both light and dark modes:

• glass - Modern glassmorphism theme with backdrop blur effects
• silver - Classic silver/gray theme
• titanium - Modern zinc/titanium theme

<PGPT 
  theme="glass"  
  appearance="dark"  // "light", "dark", or "system"
/>

📍 Positioning Options

Choose from 3 optimized positions:

// Standard positions
<PGPT position="bottom-right" /> // Default
<PGPT position="bottom-left" />
<PGPT position="fullscreen" />

// Custom position with exact coordinates
<PGPT 
  position={{ 
    x: "20px",
    y: "50px",
    offsetX: "10px",  // Chat window offset
    offsetY: "10px"   // Chat window offset
  }} 
/>

🧠 AI Integration

OpenAI Models

<PGPT 
  apiKey="YOUR_OPENAI_API_KEY"
  model="gpt-4o" // gpt-4o, gpt-4-turbo, gpt-3.5-turbo
  llmProvider="OpenAI"
/>

Google Gemini Models

<PGPT 
  apiKey="YOUR_GEMINI_API_KEY"
  llmProvider="Gemini"
  model="gemini-1.5-pro" // gemini-1.5-pro, gemini-1.5-flash, gemini-pro, gemini-pro-vision
/>

Context-Aware Conversations

By default, P-GPT only sends the latest user message to avoid rate limiting. Enable context for better conversations:

<PGPT 
  apiKey="YOUR_API_KEY"
  theme="premium"
  includeHistory={true}
  contextLength={5}
  content={{
    title: "Context-Aware Assistant",
    welcomeMessage: "Hi! I can remember our recent conversation for better context."
  }}
/>

Context Management:

• Default behavior: Only sends system message + latest user prompt (reduces tokens & rate limiting)
• With context: Includes recent chat history for better conversation flow
• contextLength: Controls how many recent messages to include (default: 10)
• Trade-off: Better context vs. higher token usage and potential rate limits

Custom Backend API

<PGPT 
  routerConfig={{
    endpoint: "https://your-api.com/chat",
    headers: {
      "Authorization": "Bearer your-auth-token"
    },
    maxTokens: 2000
  }}
/>

Your backend should accept:

{
  "messages": [
    {"role": "system", "content": "You are a helpful assistant..."},
    {"role": "user", "content": "Hello, how are you?"}
  ],
  "model": "custom-model",
  "temperature": 0.7,
  "max_tokens": 2000
}

And respond with:

{
  "role": "bot",
  "content": "I'm doing well, thank you for asking! How can I assist you today?"
}

💅 Customization

Content Configuration

<PGPT 
  content={{
    title: "Customer Support",
    subtitle: "We're here to help!",
    welcomeMessage: "Hello! How can I assist you today?",
    placeholder: "Type your question here...",
    systemMessage: "You are a helpful customer support agent..."
  }}
/>

Appearance & Behavior

<PGPT 
  theme="silver"
  appearance="dark"
  buttonSize="medium" // "small", "medium", "large"
  buttonStyle="circle" // "circle", "rounded", "square", "sharp", "pill"
  defaultOpen={false}
  openTrigger="click" // "click" or "hover"
  enableTypingAnimation={true}
  bubbleStyle="modern" // "default", "modern", "rounded", "sharp", "bordered", "minimal"
  loadingAnimation="typingDots" // "dots", "spinner", "pulse", "bar", "typingDots"
  bubbleAnimation={true}
  enableMarkdown={true}
/>

Storage Options

<PGPT 
  storage={{
    type: "localStorage" // "localStorage", "sessionStorage", "none", "custom"
  }}
/>

Advanced Features

<PGPT 
  role="coder" // "assistant", "coder", "teacher", "customer-support", "sales"
  rules={[
    "Always be polite and professional",
    "If you don't know the answer, suggest contacting support",
    "Never share personal information"
  ]}
  colors={{
    primary: "#10a37f",
    secondary: "#1a7f64"
  }}
  onSendMessage={(message) => console.log('Sent:', message)}
  onReceiveMessage={(response) => console.log('Received:', response)}
/>

📱 Responsive Configuration

<PGPT 
  minHeight="28rem"
  maxHeight="80vh"
  fixedHeight="400px"
  chatLayout="popup" // "normal", "popup", "sidebar"
/>

📋 Complete Props Reference

Core Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiKey | string | - | OpenAI/Gemini API key | | routerConfig | object | - | Custom API endpoint configuration | | theme | string | "silver" | UI theme (glass, silver, titanium) | | appearance | string | "light" | Appearance mode: "light", "dark", or "system" | | model | string | "gpt-4o" | AI model to use | | position | string/object | "bottom-right" | Chat position (bottom-left, bottom-right, fullscreen, or custom object) |

Content Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | content | object | {} | Text content configuration | | content.title | string | "PGPT Assistant" | Chat header title | | content.subtitle | string | "AI-powered chat assistant" | Chat header subtitle | | content.welcomeMessage | string | "Hello! How can I help you today?" | Initial bot message | | content.placeholder | string | "Type your message here..." | Input placeholder text | | content.systemMessage | string | "" | System message for AI behavior |

Behavior Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | useTextarea | boolean | false | Use textarea instead of input field | | enableTypingAnimation | boolean | true | Enable typewriter effect for responses | | defaultOpen | boolean | false | Open chat automatically on load | | openTrigger | string | "click" | How to open chat: "click" or "hover" | | isCloseable | boolean | false | Allow users to close the chat |

Advanced Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | llmProvider | string | "OpenAI" | LLM provider: "OpenAI" or "Gemini" | | role | string | "assistant" | Bot role/personality | | rules | string[] | [] | Custom behavior rules | | includeHistory | boolean | false | Include chat history in API calls (increases token usage) | | contextLength | number | 10 | Number of recent messages to include when includeHistory is true |

Storage Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | storage | object | {type: "localStorage"} | Message storage configuration | | storage.type | string | "localStorage" | Storage type: "localStorage", "sessionStorage", "none", "custom" | | storage.key | string | auto-generated | Custom storage key | | storage.getItem | function | - | Custom storage getter function | | storage.setItem | function | - | Custom storage setter function |

Styling Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | colors | object | {} | Custom color overrides | | classes | object | {} | Custom CSS class overrides | | styles | object | {} | Custom inline style overrides | | buttonSize | string | "medium" | Button size: "small", "medium", "large" | | buttonStyle | string | "circle" | Button shape: "circle", "rounded", "square", "sharp", "pill" |

Layout Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | chatLayout | string | "normal" | Layout type: "normal", "popup", "sidebar" | | minHeight | string | "28rem" | Minimum chat height | | maxHeight | string | "400px" | Maximum chat height | | fixedHeight | string | "" | Fixed chat height | | showLabelWithLogo | boolean | false | Show first letter of title instead of logo |

UI Options

| Prop | Type | Default | Description | |------|------|---------|-------------| | bubbleStyle | string | "default" | Message bubble style: "default", "modern", "rounded", "sharp", "bordered", "minimal" | | loadingAnimation | string | "typingDots" | Loading animation: "dots", "spinner", "pulse", "bar", "typingDots" | | bubbleAnimation | boolean | true | Enable animation effects for message bubbles | | enableMarkdown | boolean | true | Enable markdown rendering for bot responses | | logo | ReactNode | - | Custom logo/icon component |

Event Handlers

| Prop | Type | Default | Description | |------|------|---------|-------------| | onSendMessage | function | - | Callback when user sends a message | | onReceiveMessage | function | - | Callback when bot responds | | onOpen | function | - | Callback when chat opens | | onClose | function | - | Callback when chat closes |

🔗 Links

• GitHub Repository
• NPM Package
• Issue Tracker
• Contributing Guide

📄 License

MIT © P-GPT Team