PuppyChat
React SDK for building AI chatbot interfaces
PuppyChat is a React SDK designed for developers and product teams who need to quickly integrate AI chat capabilities into their applications.
It provides three distinct styles - **ChatBubble**, **ChatSidebar**, and **ChatMain** - each optimized for different use cases:
- **Chat in Bubble** - Ideal for customer support widgets and non-intrusive help assistants
- **Chat in Sidebar** - Perfect for documentation sites and persistent co-pilot experiences
- **Chat in Main** - Best for full-featured chatbot applications and internal knowledge base portals
## What's New
### 🎉 v0.0.12 - October 4, 2025
- **Improved Header Icon Display**: Removed circular container around custom icons for better flexibility
- Custom logos now display in their original shape without forced circular cropping
- Better `objectFit: 'contain'` handling for image icons
### v0.0.11 - October 4, 2025
- **Custom Header Icon**: You can now customize and replace the header logo with your own brand icon
- Added `headerIcon` prop - accepts both URL strings and React components
- Added `headerIconSize` prop - control the size of your custom icon
- Added `showHeaderIcon` prop - toggle icon visibility
## Installation
```bash
npm i puppychat
```
or
```bash
yarn add puppychat
```
## Usage
PuppyChat provides three main components for different use cases:
### 1. ChatMain - Full-Page Chat Interface
A complete full-page chat interface for building dedicated chat applications.
```tsx
import React from 'react'
import { ChatMain } from 'puppychat'
function App() {
const handleSendMessage = async (message: string) => {
// Your message handling logic here
return `Echo: ${message}`
}
return (
)
}
export default App
```
### 2. ChatBubble - Floating Chat Widget
A floating chat bubble that can be positioned anywhere on your page, perfect for customer support widgets.
```tsx
import React from 'react'
import { ChatBubble } from 'puppychat'
function App() {
const handleSendMessage = async (message: string) => {
// Your message handling logic here
return `Echo: ${message}`
}
return (
{/* Your page content */}
Welcome to my website
{/* Floating chat bubble */}
)
}
export default App
```
### 3. ChatSidebar - Sidebar Chat Panel
A fixed sidebar chat panel that stays anchored to the side of your page, ideal for documentation sites and persistent assistants.
```tsx
import React from 'react'
import { ChatSidebar } from 'puppychat'
function App() {
const handleSendMessage = async (message: string) => {
// Your message handling logic here
return `Echo: ${message}`
}
return (
{/* Your page content */}
My Documentation Site
Content goes here...
{/* Sidebar chat */}
