Xpert Chatkit Web Component

A native Web Component for embedding Xpert Chatkit into any web application.

Features

- 🚀 Zero dependencies - pure native Web Component
- 📦 Lightweight and tree-shakeable
- 🎨 Style configuration support via JSON schema
- 🔒 Secure session management
- ⚡ Loading and error states built-in
- 🌐 Works with any framework (React, Vue, Angular, vanilla JS)

Installation

``bash
npm install @xpert-ai/chatkit-web-component
`

Or use via CDN:

`html

`

Usage

$3

`html







backend-url="https://your-backend.com"
chatkit-url="https://chatkit.xpert.ai"
assistant-id="assistant_123">



`

$3

`html
backend-url="https://your-backend.com"
chatkit-url="https://chatkit.xpert.ai"
assistant-id="assistant_123"
style-config='{"primaryColor": "#007bff", "fontSize": "14px"}'>

`

$3

`javascript
import '@xpert-ai/chatkit-web-component';

// Create element
const chatkit = document.createElement('xpert-chatkit');
chatkit.setAttribute('backend-url', 'https://your-backend.com');
chatkit.setAttribute('chatkit-url', 'https://chatkit.xpert.ai');
chatkit.setAttribute('assistant-id', 'assistant_123');

// Update style config
chatkit.updateStyleConfig({
primaryColor: '#007bff',
fontSize: '14px'
});

document.body.appendChild(chatkit);
`

Attributes

| Attribute | Required | Description |
|-----------|----------|-------------|
| backend-url | Yes | Backend API URL for session creation |
| chatkit-url | Yes | Chatkit iframe URL |
| assistant-id | No | Assistant ID to use |
| style-config | No | JSON string for style configuration |

Methods

$3

Updates the style configuration. Note: Currently only applied on initial load.

`javascript
const chatkit = document.querySelector('xpert-chatkit');
chatkit.updateStyleConfig({
primaryColor: '#ff0000',
borderRadius: '8px'
});
`

Styling

The component automatically fills its container. You can control its size with CSS:

`css
xpert-chatkit {
width: 100%;
height: 100vh;
}

/ Or fixed size /
xpert-chatkit {
width: 400px;
height: 600px;
}

/ In a flex/grid container /
.container {
display: flex;
height: 100vh;
}

xpert-chatkit {
flex: 1;
}
`

Error Handling

The component displays loading and error states automatically:
- Shows "Creating session..." while fetching client secret
- Shows error message if session creation fails
- Logs errors to console with [xpert-chatkit] prefix

Browser Support

- Chrome/Edge 54+
- Firefox 63+
- Safari 10.1+
- All modern browsers with Custom Elements v1 support

For older browsers, you may need the Web Components polyfill.

Development

`bash


Install dependencies

npm install

Start development server (recommended)

npm run serve

Build for production

npm run build

Watch mode (build on change)

npm run dev

Type check

npm run type-check
``

For detailed development instructions, see DEVELOPMENT.md.

License

MIT