Skip to main content

ChatKit SDK A Full-Stack Solution for Intelligent Conversation Experiences

· 4 min read
Tiven Wang

Today we officially release ChatKit SDK, a full-stack UI solution purpose-built for agent-centric conversation experiences! Whether you’re creating an internal knowledge-base assistant, HR onboarding helper, research companion, shopping concierge, troubleshooting bot, or customer-support agent, ChatKit ships customizable chat embeds that handle every UX detail.

tip

ChatKit integrates into your app with minimal intrusion, supports deep customization and extensibility, and helps you ship professional-grade conversational UIs fast.

ChatKit Architecture

Figure: ChatKit architecture—frontend embed + backend workflow.

🚀 Why ChatKit?​

Building a fully featured chat interface is hard work: streaming messages, file uploads, tool-call visualization, responsive layouts, theme switching, and more. ChatKit wraps that complexity into a clean SDK so you can focus on your agent’s business logic.

Core advantages​

  • Out of the box: Embed a production-ready chat UI in a single line
  • Deep customization: Match your brand, from color themes to interaction components
  • Front/back separation: Use ChatKit on the frontend, host workflows in XpertAI Agent Builder
  • Ecosystem friendly: Built on the mature React ecosystem with TypeScript support

🎨 Themes & customization: Make the chat UI feel native​

  • Palette & modes: light/dark, accent scale, radius, density
  • Typography & voice: custom font family, input placeholder, welcome text
  • Launch prompts: preset example questions to onboard users quickly
  • Header customization: bespoke buttons and navigation aligned with your IA

Explore more options in the interactive ChatKit Studio builder.

🧩 Widgets: Richer visualization and interaction​

ChatKit widgets are interactive cards and components inside the conversation. Use them to surface:

  • Data cards: product details, order status, user profiles
  • List rows: search results, to-dos, recommendations
  • Action buttons: quick actions, form submissions, state toggles

Widget middleware​

  • Model → frontend: return widget JSON via tool calls or structured output; the UI renders directly
  • Middleware: configure generation/transformation logic server-side to adapt content and styles
  • Interaction callbacks: button/card clicks send custom payloads back for business handling

Design and preview widgets with the A2UI Widget Builder and learn more about the A2UI protocol.

🔧 Client-side tools: Let models operate frontend capabilities​

Client-side tools route model-initiated tool calls to frontend UI code, ideal for reading client state, handling user interactions, or invoking browser features.

Workflow​

  1. Server: Define tool name, description, and schema via the Client Tool middleware
  2. Model: Triggers tool calls based on context
  3. Frontend: Receives the call via callbacks and runs browser/local logic (state reads, UI actions, device APIs)
  4. Return: Sends execution results back to the model to continue reasoning

Common use cases: read browser state, trigger routing/theme changes, open modals, or invoke device capabilities.

⚡ Client-side side effects: Drive UI changes without pausing the conversation​

Client-side side effects push “side-effect events” from the model to the frontend without interrupting generation. Perfect for UI updates, focus shifts, highlighting, animations, or state sync tasks that only affect the client and need no return value.

Key features​

  • Non-blocking: the model keeps responding after firing the side effect
  • One-way notifications: model → UI, ideal for focus, highlight, animation, sync cues
  • Preset results: server configures default results; frontend just performs the UI change

Use cases: auto-highlight UI regions while explaining features, auto-scroll to target sections during guided steps, and more.

🏗️ Architecture: Best practices for a decoupled stack​

ChatKit follows a frontend-backend separation:

  • Frontend: embed the chat UI with @xpert-ai/chatkit-react
  • Backend: build agent workflows in XpertAI Agent Builder
  • Security: issue client tokens from the server for protected access

Quick start (conceptual)​

  1. Build an agent workflow in XpertAI Agent Builder and note the expert ID
  2. Install and embed @xpert-ai/chatkit-react, pointing it to your workflow
  3. Expose a server endpoint to create sessions and mint client tokens securely
  4. Render the ChatKit component with themes, widgets, tools, and side effects enabled

🎯 Use cases​

ChatKit fits a wide range of agent-driven experiences:

  • Enterprise tools: knowledge-base assistants, HR onboarding, IT support bots
  • Commerce & services: shopping concierges, order tracking, scheduling
  • Specialized domains: research aides, financial planning, medical consultations
  • Developer tooling: code review assistants, documentation generators, debugging helpers

📦 Try it now​

ChatKit SDK is GA with full documentation and example code. Visit our Docs Center to build your first conversational experience.

Stop reinventing chat UIs—focus on delivering real agent value.

XpertAI ChatKit—intelligent conversations at your fingertips.