A developer’s guide to OpenAI’s ChatKit JS: What it is and when to use it

Let’s be real, building an AI chat UI from scratch is a monster of a project. It can chew up weeks, if not months, of dev time just to get the basic messaging features working smoothly, never mind all the AI-specific bells and whistles.

OpenAI knew this was a major roadblock for developers, so they launched ChatKit JS to offer a serious head start.

This guide will walk you through everything you need to know about ChatKit JS. We’ll cover what it is, its coolest features, what the setup process actually looks like, and its very real limitations. We’ll also see how it compares to all-in-one solutions that can get you up and running much faster.

One quick thing before we dive in: we’re talking exclusively about OpenAI’s modern ChatKit. If you’re searching online and see mentions of an old, discontinued product from Pusher called Chatkit, that’s something else entirely. It’s a common mix-up, so just keep that in mind.

What is OpenAI’s ChatKit JS?

ChatKit JS is a frontend JavaScript toolkit from OpenAI designed to help you build and embed custom AI chat experiences into your websites. Think of it as the ready-made "face" for the AI agents you create with OpenAI’s AgentKit.

Its main purpose is to save you from reinventing the wheel. Instead of coding things like response streaming, thread management, and file uploads from the ground up, ChatKit provides components that are ready to go. This lets you focus your energy on the actual logic of your AI agent.

The biggest thing to remember is that OpenAI’s ChatKit is purely a frontend library. The old Pusher Chatkit was a full-stack service with its own backend, but this one puts you in the driver’s seat. You are 100% responsible for building, hosting, and managing the backend server that powers the whole thing.

Key features and customization options

This is the fun part. Let’s look at what you can actually build and tweak with the toolkit, based on what we’ve learned from the official ChatKit JS guides.

Deep UI customization and theming

ChatKit is meant to look and feel like it belongs in your application, not like some generic, tacked-on widget. You get a surprising amount of control over the look and feel.

• Themes: You can easily swap between pre-built light and dark modes to match your site’s design.

• Branding: Go deeper by setting custom accent colors, changing how round the corners are, and adjusting the spacing to align with your brand.

• Text overrides: You can change the placeholder text in the message box and on the start screen. It’s a small detail, but it’s a great way to nudge users on what to ask your agent.

• Localization: If your app has its own language setting, you can override the browser’s default locale to keep the experience consistent for all your users.

Interactive elements and agentic actions

This is where ChatKit proves it’s more than just a simple chat window. It’s built to show what your AI agent is doing behind the curtain.

• Tool and workflow integration: It can visually represent when your agent is using a tool (like checking an order status in your database) or thinking through a few steps. This kind of transparency really helps build user trust.

• Rich widgets: You can render custom interactive components right in the chat feed. This opens up possibilities for things like forms, calendars, or product carousels.

• File attachments: It’s pretty straightforward to set up support for file and image uploads, including setting rules for the number of files, their size, and accepted types.

• Custom composer tools: You can add your own buttons to the input bar that trigger specific actions or send certain instructions to the AI model.

How to implement ChatKit JS: A developer’s workflow

So, how do you get this thing running? It’s a real project that needs a dev team, and you’ve got a couple of ways to tackle it.

The two integration paths

OpenAI lays out two main methods for integrating ChatKit:

1. Recommended Integration: This is the simpler route. You use OpenAI’s Agent Builder to create and host your agent’s logic. Your main job is to embed the frontend component and hook it up to the OpenAI backend.

2. Advanced Integration: This is the full self-hosted path. You build your own backend that can talk to any model or service you want. It gives you complete control but also means you’re on the hook for everything, the server logic, the anfrastructure, the security, all of it.

Setting up the required backend

No matter which path you take, you can’t escape one hard truth: you need a backend server. It’s not optional.

Your server’s primary job is to create a secure API endpoint that hands out short-lived client tokens for authentication. You can’t do this from the client side without exposing your secret keys, which is a huge security no-no. Building this endpoint means writing server-side code, handling user authentication, and securely managing your API keys. It’s a decent amount of work.

Embedding the frontend component

Once your backend is up and running, you can embed the ChatKit component into your app using either their React component or a plain JS Web Component. This part is a bit more straightforward, though you still need to watch out for potential snags like Server-Side Rendering (SSR) hydration mismatches if you’re using a framework like Next.js.

While ChatKit gives a lot of freedom to teams with the engineering firepower, the whole process demands backend development, server management, and frontend expertise. For teams that just need a powerful, secure chat solution without the heavy engineering lift, a fully managed platform is a much more direct route.

Limitations of ChatKit JS

The do-it-yourself nature of ChatKit JS is great for control, but it’s crucial to understand what you’re not getting out of the box.

It’s a UI kit, not a complete support solution

ChatKit gives you a great-looking chat window, but that’s where its job ends. It’s missing all the tools you need to run an actual customer support operation:

• No analytics: There’s no dashboard to see how well the bot is doing, what questions people are asking, or where your knowledge base has gaps.

• No helpdesk integrations: It doesn’t connect to help desks like Zendesk or Freshdesk. If a user gets stuck and needs a human, you have to build that entire escalation and ticketing flow yourself.

• No no-code interface: Want to tweak the AI’s prompts, add a new knowledge source, or change its personality? A developer has to jump into the code. There’s no simple dashboard for a support manager to make those changes on the fly.

The hidden costs

The ChatKit library might be free, but the total cost of running it is anything but.

• Initial build: You’re paying for developer hours to build the backend, set up authentication, integrate the frontend, and connect everything to your knowledge sources.

• Ongoing maintenance: The work isn’t over at launch. You’re responsible for security patches, keeping up with API changes from your vendors, and squashing any bugs that pop up.

• Feature development: Need to add analytics? Want a better way to hand off conversations to your team? That’s more developer time, pulling your team away from your core product.

Why a managed solution is a faster path to value

This is where the build vs. buy decision gets really clear. A platform like eesel AI is built to solve these problems right from the start.

Feature	Custom Build with ChatKit JS	eesel AI
Setup Time	Weeks to Months	Minutes
Required Expertise	Frontend & Backend Engineering	No-code, Self-Serve
Helpdesk Integration	You have to build it yourself	One-Click (Zendesk, Intercom, etc.)
Knowledge Sources	Custom-built connectors	Instant sync with Docs, Confluence, past tickets
Testing & Simulation	Manual testing required	Built-in simulation on historical tickets
Analytics	You have to build your own dashboard	Actionable reporting on resolution & gaps
No-Code Control	Requires code changes	Full control via prompt editor & workflow engine

ChatKit JS pricing and alternatives

While the ChatKit JS library itself won’t cost you anything, running a solution built with it can get expensive, fast. The costs pop up in three main areas:

1. OpenAI API usage: You pay for every token your backend agent processes. This cost is unpredictable and goes up directly with how much people use your chatbot.

2. Infrastructure costs: You have to pay to host and maintain your backend server, which can add up, especially if you get a lot of traffic.

3. Developer salaries: This is the biggest hidden cost. You’re paying for the ongoing time of the engineering team that has to build, maintain, and improve the system.

Instead of juggling all those unpredictable costs, eesel AI offers straightforward, predictable pricing. Our plans are a flat monthly fee for a set number of AI conversations, and we never charge per resolution. This lets you set a budget without getting a surprise bill after a busy month. You can check out all the details on our pricing page.

Build or buy? Choosing the right chat solution

OpenAI’s ChatKit JS is a powerful and flexible toolkit, no doubt about it. It’s an excellent choice for teams that have the engineering resources and a real need to build a deeply customized chat UI for a one-of-a-kind AI agent. When you need total control over every pixel and have the team to support that, it’s a fantastic place to start.

But that freedom comes with a hefty price tag in development time, security overhead, and ongoing maintenance. At its core, it’s a "build" solution.

If your goal is to get a powerful AI chatbot live for customer support, internal Q&A, or sales this week, a "buy" solution makes a lot more sense. eesel AI is an end-to-end platform that goes live in minutes, not months. It connects instantly to all your knowledge sources and existing tools, lets you test your bot with confidence on past conversations, and empowers your non-technical team members to manage and improve the AI themselves.

See for yourself how fast you can get a powerful AI agent up and running by signing up for a free trial.