A practical ChatKit JS overview or guide for building AI chat

It feels like everyone is building a custom AI chat experience right now. From internal helpdesks that answer IT questions to customer-facing bots that handle support queries, it's a smart way to offer instant answers and take a load off your team. To help developers get a running start, OpenAI released ChatKit JS, a framework designed to speed up the creation of these chat interfaces.

But what does it actually do, and is it really the right tool for your business?

Let's break down what ChatKit JS is, what it’s good at, and what the setup actually looks like. More importantly, we’ll get into the weeds of its limitations, especially for businesses that need a complete, ready-to-go support solution without kicking off a massive engineering project.

What is ChatKit JS?

ChatKit JS is a frontend JavaScript library from OpenAI that helps you build embeddable, AI-powered chat UIs. The simplest way to think about it is as a toolkit for the "look and feel" of a chat window. It handles common UI pieces like streaming messages, organizing conversation threads, and letting users attach files, so your developers don’t have to build all that from square one.

It’s designed to be the frontend for AI agents you create in tools like OpenAI's Agent Builder. You build the "brain" of your agent on OpenAI's platform, and then you use ChatKit to build the chat window where people will actually talk to it.

The main thing to remember is that it's a framework for developers, not an out-of-the-box chatbot. It gives you the Lego bricks, but you still have to put the whole thing together yourself.

Core features and customization

ChatKit comes with a decent set of features that cover the basics of a modern chat interface. Let’s take a look at what you get in the box.

Out-of-the-box UI components

The library gives developers a head start with several pre-built features that users pretty much expect these days:

• Response streaming: This makes the AI's response appear word-by-word, which feels much more like a natural conversation.

• Tool and workflow integration: It can show a little indicator when the AI is working on a multi-step task, which helps the user understand what's happening behind the scenes.

• Rich interactive widgets: You're not just stuck with plain text. The framework can show things like cards, forms, and lists right in the chat. This is perfect for displaying data or asking the user for specific information.

• File attachment handling: It has built-in support for users to upload files and images, which is a must-have for many support scenarios.

• Thread and message management: It handles the basic organization of conversations so you can keep track of different chats.

Theming, branding, and localization

Since you’re building the chat UI directly into your product or website, it has to look like it belongs. ChatKit gives you several ways to customize the look and feel to match your company's branding.

Developers can switch between light and dark themes, pick custom accent colors, change how rounded the corners are, and even adjust the spacing of the UI. You can also add custom buttons to the header, change the placeholder text in the message box, and set up some starter prompts to help users get a conversation going. And if you have a global audience, you can also override the default language.

Two integration paths: Hosted vs. self-hosted

There are two main ways to get ChatKit running, and both require a developer.

1. Recommended Integration: This is the easier route. You embed the ChatKit widget into your site and let OpenAI host and manage the AI agent you've built in their Agent Builder.

2. Advanced Integration: For teams that need total control, you can run ChatKit on your own servers. This lets you connect it to any backend you want, which offers a ton of flexibility but also adds a lot more complexity to the project.

No matter which path you take, you'll need an engineer to write server-side code, manage authentication, and handle the frontend implementation.

The setup process: What's required?

To give you a clearer idea of the technical work involved, here's a high-level walkthrough of what it takes to get ChatKit up and running. This isn't a line-by-line tutorial, but it should paint a picture of what your engineering team would be signing up for.

Step 1: Building the server-side endpoint

First things first, you can't just copy-paste ChatKit into your website and expect it to work. You need a backend server to handle authentication securely.

The main purpose of this server is to generate a temporary client_secret token. Your website's frontend will ask your server for this token, and then use it to connect to the chat. This is a really important security step that makes sure your main OpenAI API key is never exposed in a user's browser. This backend is usually built with something like Python's FastAPI or Node.js with Express.

Step 2: Embedding the frontend component

Once the server is up and running, the focus shifts to the frontend of your application. This involves a few more steps:

• Installing the ChatKit NPM package (e.g., @openai/chatkit-react).

• Adding the main ChatKit JavaScript file to your site.

• Writing the code that actually calls your backend to get the token and then uses that token to display the chat component on the page.

Step 3: Configuring the domain allowlist

This is a small but critical step that often trips people up. For security reasons, OpenAI makes you create an "allowlist" of website domains that are allowed to use your ChatKit integration. If your website's domain isn't on this list, the chat widget just won't load, often without a clear error message.

Your developers will need to remember to add every environment they work in, including localhost for their local computers, any staging or testing URLs, and, of course, the final production domain.

This whole process gives you a lot of control, but it requires dedicated developer time. If that sounds like a lot of engineering hours you'd rather not spend, no-code platforms like eesel AI offer a much faster path. You can connect it to tools like Zendesk and Slack in a few clicks instead of a few weeks.

Key limitations: Is it the right tool for your business?

While ChatKit is a solid framework for developers, does it give a business everything it needs for a real-world support solution? For most teams, the honest answer is no.

The hidden cost: It’s a project, not a product

The biggest thing to understand about ChatKit is that it’s not a finished product. It’s the starting point for a development project. The main cost isn't the library itself (it's free), but the huge and ongoing amount of developer time you'll need to build, integrate, and maintain whatever you create with it.

Want to add analytics to see how the bot is performing? That's an engineering task. Need to change how it escalates a tricky conversation to a human agent? That’s another engineering task. Every new feature, tweak, or bug fix requires code, which is slow and expensive.

The knowledge gap: A UI without a brain

ChatKit is only the chat interface. It's the "face" of your chatbot, but it doesn't have a "brain." The hardest part of building a useful AI agent, securely connecting it to all of your company's scattered knowledge so it can give accurate answers, is left completely up to you.

You'll have to build custom connectors to your help center articles, past support tickets, Confluence spaces, and internal Google Docs. Each connection is its own mini-project, and building a robust system that can pull from all these sources is a massive undertaking that can easily take months.

This is where all-in-one platforms are a lifesaver. For example, eesel AI instantly connects to all your knowledge sources, including historical support tickets, to provide accurate, context-aware answers right away, with no coding needed.

Missing business-critical features

Any serious support automation tool needs a lot more than just a pretty chat window. ChatKit is missing several features that are absolutely essential for managing and improving a support operation:

• Simulation & Testing: There's no way to test your agent on past conversations to see how it would have performed. You can't predict its accuracy or find problems before it starts talking to your customers. You're essentially launching it blind.

• Analytics & Reporting: ChatKit doesn't come with any dashboards. You can't track important metrics like resolution rates, see what questions users are asking all the time, or identify gaps in your knowledge base that are causing confusion.

• Workflow Automation: It's just a chat window. It can't actually do anything in your helpdesk. It can't triage new tickets, apply the right tags, assign conversations to the correct team, or intelligently escalate a conversation to a human based on your business rules.

Purpose-built solutions are designed to handle all of this. eesel AI, for instance, includes a powerful simulation mode to test on thousands of your past tickets, reports that show you exactly where your knowledge gaps are, and a customizable workflow engine for AI-powered triage and smart escalation.

The true cost

While the ChatKit JS library itself won't cost you anything, building a full solution around it comes with some serious and often unpredictable expenses. Here’s a quick look at what that adds up to:

Cost Component	Description	Predictability
Developer Resources	The salaries for engineers to build, integrate, and maintain your custom solution.	High & Ongoing
OpenAI API Usage	Variable costs for the AI models that actually power the agent's brain.	Unpredictable
Infrastructure Hosting	Costs for hosting your server endpoint and the frontend application itself.	Low but recurring

This developer-heavy cost structure is very different from the clear, predictable pricing of a managed platform. With a tool like eesel AI, you get transparent monthly plans that bundle all the infrastructure and business features into one predictable cost, with no surprise fees.

A powerful framework, but not a complete solution

So, what's the verdict? ChatKit JS is an excellent framework for development teams that have the time, the budget, and a very specific need to build a highly custom chat UI from the ground up. It gives you a solid foundation of UI components that can definitely save time compared to starting from absolute scratch.

However, for most businesses, especially support and IT teams, it just doesn't cut it. It’s not a complete solution. It's missing all the critical features you need for a business-ready tool, like knowledge management, Workflow Automation, analytics, and risk-free testing. Trying to build these yourself turns a simple goal, "let's add an AI chatbot", into a massive, multi-month engineering headache with an unpredictable price tag.

If your real goal is to launch a powerful AI support agent that learns from all your company data and automates workflows without derailing your engineering team for six months, then a purpose-built platform is the most direct route. eesel AI provides a fully-managed solution that can go live in minutes, not months, giving you total control and confident automation from day one.