An all-in-one AI chat framework that makes building conversational experiences dead simple.
🤔 Still building chat UIs from scratch? Managing message state manually? Implementing streaming yourself?
Let ChatKit handle the heavy lifting. Get a complete AI chat experience up and running in minutes.
- Save Time: Integrate a full-featured chat in 30 minutes, not weeks
- Flexible: Works with React, Vue, vanilla JS—customize themes your way
- Complete: Streaming, tools, uploads, threads—all built in
Config environment by copying .env.example to .env and filling in your values.
from fastapi import FastAPI
app = FastAPI()
@app.post("/api/chatkit/session")
async def create_session():
return {"client_secret": "your_session_token"}Full example: pnpm managed-chatkit:dev
npm install @xpert-ai/chatkit-reactConfig environment by copying .env.example to .env and filling in your values.
import { ChatKit, useChatKit } from '@xpert-ai/chatkit-react';
export function MyChat() {
const { control } = useChatKit({
api: {
async getClientSecret() {
const res = await fetch('/api/chatkit/session', { method: 'POST' });
const { client_secret } = await res.json();
return client_secret;
},
},
theme: { colorScheme: 'light', radius: 'round' },
});
return <ChatKit control={control} className="h-[600px]" />;
}- 🎨 Deep Customization - Control colors, fonts, spacing—make it yours
- ⚡ Real-time Streaming - Messages flow in smoothly, token by token
- 🔧 Tool Integration - Seamless client and server tool support
- 📎 File Uploads - Attach files and images with flexible config
- 💬 Thread Management - Switch conversations, track history
- 🌍 i18n Ready - 68+ locales out of the box
- 🎯 Framework Agnostic - React/Vue/Angular/UI5/vanilla JS all work
chatkit-js/
├── packages/
│ ├── chatkit/ # Shared ChatKit type contracts
│ ├── chatkit-web-shared/ # Shared browser utilities and messaging
│ ├── web-component/ # <xpertai-chatkit> Web Component
│ ├── chatkit-js/ # Vanilla JS integration helpers
│ ├── chatkit-react/ # React bindings
│ ├── chatkit-vue/ # Vue bindings
│ ├── chatkit-vue2/ # Vue 2 bindings
│ ├── chatkit-angular/ # Angular bindings
│ ├── chatkit-ui5/ # SAP UI5 bindings
│ ├── chatkit-ui/ # Iframe chat UI application
│ ├── chatkit-widgets/ # A2UI React widget renderer
│ ├── host-automation/ # Host page client-tool automation
│ └── browser-extension/ # Chrome extension host package
├── examples/
│ ├── managed-chatkit/ # React + FastAPI full-stack example
│ ├── managed-chatkit-angular/
│ └── excel-echarts-chatkit/
└── docs/ # Documentation
- @xpert-ai/chatkit-types
- @xpert-ai/chatkit-web-shared
- @xpert-ai/chatkit-web-component
- @xpert-ai/chatkit-js
- @xpert-ai/chatkit-react
- @xpert-ai/chatkit-vue
- @xpert-ai/chatkit-vue2
- @xpert-ai/chatkit-angular
- @xpert-ai/chatkit-ui5
- @xpert-ai/chatkit-ui
- @xpert-ai/chatkit-host-automation
- @xpert-ai/a2ui-react
- @xpert-ai/chatkit-browser-extension (private Chrome extension package)
# Install dependencies
pnpm install
# Build all packages
pnpm build
# Run full-stack example
pnpm managed-chatkit:dev
# Run Angular example
pnpm managed-chatkit-angular:dev
# Run Excel/ECharts example
pnpm excel-echarts-chatkit:dev
# Dev UI components
pnpm dev:ui
# Run tests
pnpm test
# Lint code
pnpm lintThis repo uses Changesets + GitHub Actions for automated npm publishing.
The private browser extension package is versioned by Changesets and packaged
separately by .github/workflows/publish-browser-extension.yml.
- For packages that already exist on npm, configure this GitHub repository as a Trusted Publisher for the package(s) released from this repo.
- For brand-new packages, do a one-time manual publish first, then configure trusted publishing for subsequent releases.
- Ensure GitHub Actions has permission to create pull requests and request an OIDC token (used by
.github/workflows/release.yml).
- Make package changes in a feature branch.
- Add a changeset:
pnpm changeset- Commit and merge into
main. - GitHub Action
Releasewill run onmainpush:- Create/update a Release PR with version bumps and changelogs.
- After the Release PR is merged, publish packages to npm automatically.
Trusted publishing can only be configured after the package already exists on npm. For a brand-new package such as @xpert-ai/chatkit-angular:
- Sign in to npm with an account that has publish access to the
@xpert-aiscope. - Build the repo:
pnpm build- Publish the new package once manually:
pnpm --filter @xpert-ai/chatkit-angular publish --access public- After the first publish succeeds, configure the package to use this repo's trusted publisher /
.github/workflows/release.yml. - Future releases of that package can then go through the normal Changesets + GitHub Actions flow.
If you need to publish manually from your local machine, make sure you are authenticated with npm first (npm login or an npm access token), then run:
pnpm build && pnpm changeset publish- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Modern mobile browsers
- Core message streaming
- Thread management
- File attachments
- Advanced theming
- Tool call visualization
- Voice I/O
- WebSocket support
We love contributions!
- Fork the project
- Create a branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
- 📖 Documentation
- 🐛 Issues
- 💬 Discussions
Apache License 2.0
Built with ❤️ by the Xpert AI team
Got questions? Want to chat? Feel free to open an issue or join the discussion