ChatKit
Last reviewed
May 24, 2026
Sources
No citations yet
Review status
Needs citations
Revision
v1 ยท 3,494 words
Improve this article
Add missing citations, update stale details, or suggest a clearer explanation.
Suggest edit
CtrlK
Last reviewed
May 24, 2026
Sources
No citations yet
Review status
Needs citations
Revision
v1 ยท 3,494 words
Add missing citations, update stale details, or suggest a clearer explanation.
ChatKit is an embeddable chat-interface SDK from OpenAI that lets developers drop a ChatGPT-style conversational UI into a web or mobile product with a single React component. It was announced on 6 October 2025 at OpenAI DevDay 2025 in San Francisco as a component of the broader AgentKit suite, which also includes Agent Builder, the Connector Registry and an upgraded evaluations stack.[1][2] ChatKit ships as a JavaScript library (@openai/chatkit) and a React wrapper (@openai/chatkit-react), and pairs with a Python server SDK (openai-chatkit) for self-hosted backends.[3][4] The tool is positioned as a "drop-in" alternative to building chat user interfaces from scratch, handling response streaming, thread management, tool-call visualisation, file uploads, citations and a library of interactive widgets out of the box.[1][5] OpenAI bills the product itself at no extra cost; users pay only for the underlying model tokens consumed through the Responses API or a custom backend.[1][6]
| Attribute | Value |
|---|---|
| Developer | OpenAI |
| Initial release | 6 October 2025[1] |
| Stable releases | Released alongside Agent Builder beta as part of AgentKit[1] |
| License | Apache License 2.0 (client SDKs)[3] |
| Repository | github.com/openai/chatkit-js, github.com/openai/chatkit-python[3][4] |
| Primary language | TypeScript (client), Python (server SDK)[3][4] |
| Framework support | React, vanilla JavaScript via web component, community React Native fork[3][7] |
| Backend options | OpenAI-hosted (Agent Builder workflow) or self-hosted (ChatKit Python SDK)[5][4] |
| Pricing | Included with standard API model pricing; no separate fee[1][6] |
OpenAI hosted its third annual DevDay on 6 October 2025 at Fort Mason in San Francisco, gathering more than 1,500 developers for a one-day developer conference featuring keynote sessions, hands-on labs and live demos.[2][8] Sam Altman opened the keynote and framed the company's direction as a shift from "systems that you can ask anything to, to systems that you can ask to do anything for you," a framing that set up the launch of AgentKit and the Apps SDK as the day's two largest developer announcements.[9] The event closed with a fireside conversation between Altman and former Apple design chief Jony Ive about hardware ambitions.[9]
ChatKit was unveiled during the AgentKit segment of the keynote alongside Agent Builder, the Connector Registry and new evaluation tooling.[1][10] OpenAI presented AgentKit as "a complete set of building blocks" for developers to "build, deploy, and optimize agentic workflows," with ChatKit described as the layer that "makes it simple to embed chat-based agents that feel native to your product."[1] At launch the React SDK, vanilla JavaScript build, the ChatKit Python SDK and a starter application repository were all published to GitHub under the openai organisation.[3][4][11]
Christina Huang, a member of OpenAI's technical staff, performed the launch demonstration on stage. She built and shipped an agent live in roughly eight minutes that used Agent Builder to compose a multi-step workflow and then dropped the ChatKit React component into the DevDay event website to surface that agent as a chat widget in the corner of the page. The demo was named "Ask Froge" after the DevDay frog mascot and allowed attendees to query the conference schedule for sessions on specific topics. According to coverage of the demo, Huang typed the prompt "What sessions are about agents?" into the embedded widget and the agent responded with formatted session cards, with Huang finishing the build with 49 seconds left of the allotted eight-minute window.[12][10]
The Ask Froge agent remained live on the DevDay schedule site for the rest of the conference and was used as an end-to-end illustration of how ChatKit, Agent Builder and the Responses API fit together: a workflow authored in the visual canvas, published to a workflow ID, and then mounted in a host application through three lines of React.[12][10]
ChatKit and the new evaluations features shipped as generally available to developers on the day of the keynote, while Agent Builder entered open beta and the Connector Registry began rolling out to selected API, Enterprise and Edu customers with the Global Admin Console.[1] The @openai/chatkit-react package on npm received its first public release on 6 October 2025 and reached version 1.5.1 by May 2026 across 25 cumulative releases.[3]
A community fork from learning-tools vendor Memorang added React Native and Expo compatibility under the name chatkit-react-native, packaging the same widget vocabulary for iOS and Android builds; OpenAI's own first-party SDK targets web only as of May 2026.[7][13]
ChatKit supports two backend models that share the same client component. The recommended path uses an OpenAI-hosted backend in which the developer authors an agent workflow in Agent Builder, receives a workflow identifier and feeds that identifier into the client SDK; the chat session, tool execution, conversation state and persistence all run inside OpenAI's infrastructure.[5] The advanced path uses a self-hosted backend implemented with the openai-chatkit Python package, which exposes a ChatKitServer abstract base class that the developer subclasses to define a respond() method.[14] In the self-hosted mode the developer is responsible for storage (by subclassing Store and optionally AttachmentStore), authentication and connecting to any agentic backend, including non-OpenAI models.[14][4]
Both modes use the same client-side component vocabulary, so a frontend implementation can move between an OpenAI-hosted workflow and a custom backend by changing only the session-creation endpoint.[5][14]
Every ChatKit conversation is bound to a session created on the server. The application backend uses the developer's secret API key to call the ChatKit Sessions API, supplying a user parameter that must be unique per end user; the API returns a short-lived client_secret token that is delivered to the browser through a backend endpoint the developer controls.[15][5] The client component then uses that secret to authenticate directly with OpenAI for the duration of the session.[15]
Client secrets expire, so the SDK exposes a getClientSecret(currentToken) callback that ChatKit invokes before the existing token lapses; the developer's implementation refreshes the token and ChatKit reconnects without user intervention.[15][3] OpenAI documents this design as preventing exposure of the master API key on the client and recommends configuring a domain allowlist in the organisation settings so a stolen token cannot be replayed from an unrelated origin.[15]
On the wire ChatKit uses streaming events to push tokens, tool-call previews, widget renders and progress updates to the client as they happen. The Python SDK's server returns either a StreamingResult or a NonStreamingResult depending on the request type, and a helper called stream_widget lets the server render a widget immediately or stream updates to that widget as a tool call progresses.[14][4] The client component handles incremental rendering of message text, the chain-of-thought visualisation indicating that a tool is in flight and the eventual swap to the final answer.[16][5]
Source annotations and entity tagging are first-class concepts in the event stream: when an agent cites a document or a structured entity, the SDK renders citation markers in line with the answer and lets the host application register @-mentions and other entity-search affordances in the composer.[3][11]
ChatKit ships with what OpenAI calls a "wide set of widget nodes" that an agent can emit in place of, or alongside, free-text replies.[16] The widget vocabulary covers four broad categories: containers (such as Card and ListView), interactive elements (Button, Form, Select, DatePicker), display elements (Image, Badge, Markdown) and layout primitives (rows, columns, spacers).[17][16] A Card accepts status, confirm and cancel fields so an agent can render a confirmation panel with action buttons; ListView lays out vertical lists of ListViewItem rows.[17] Widgets are described in JSON and can be authored interactively in OpenAI's Widget Builder, a sandbox hosted at widgets.chatkit.studio that lets a developer compose a card layout and copy the resulting JSON into the backend integration.[17]
Beyond widgets, the SDK supports the common affordances of a production chat surface: file and image attachments (with both direct uploads and two-phase signed-URL uploads), thread and message management, response streaming, chain-of-thought thinking indicators, tool-call visualisation, source annotations, entity tagging and @-mentions in the composer.[16][3][15] The advanced samples repository demonstrates more elaborate patterns: speech-to-text transcription via dictation, server-handled widget actions with state persistence, image-generation with partial-image tracking, page-aware model responses and custom header actions such as a dark-mode toggle.[11]
Theming is configured through an options object passed to the React hook useChatKit or to the <openai-chatkit> web component.[3][18] The theme exposes a typography scale, colour scheme, accent colour, dark, light and auto modes, and styling hooks for the header, composer, disclaimer area and individual widgets.[18][3] OpenAI's documentation summarises the goal of the customisation layer as enabling "deep UI customisation so that ChatKit feels like a first-class part of your app."[3] A separate competitor analysis from developer-tools vendor Speakeasy notes that ChatKit's theming is "limited to colours, fonts, and spacing through an options object" relative to a framework such as CopilotKit, which permits full CSS overrides and component replacement.[19]
Tool calls in ChatKit can resolve either on the server or on the client. Server-side handlers run inside the developer's ChatKitServer subclass (or inside the Agent Builder workflow if the OpenAI-hosted path is used) and can stream additional events back to the chat surface; client-side handlers are declared with handler="client" and let the front end respond in JavaScript before optionally forwarding follow-up work to the server.[14] The advanced samples repository exercises both styles: a "Cat Lounge" sample uses function tools to mutate persistent cat stats and to trigger image generation; a "Customer Support" sample orchestrates multiple tools to query airline itinerary data and synchronise the answer with a timeline panel rendered next to the chat.[11]
Attachments support both single-step direct uploads (where the client posts the file to the developer's endpoint) and two-phase uploads (where the client first requests a signed URL and then posts the file to cloud storage).[16][5] The Python SDK exposes an AttachmentStore abstract class that the developer subclasses to implement object-storage CRUD; the advanced samples include implementations for both flows.[14][11]
OpenAI's first-party SDK officially targets browser environments through two packages: the framework-agnostic @openai/chatkit web component and the React wrapper @openai/chatkit-react that exposes the ChatKit component and useChatKit hook.[3] The components are published to npm under the Apache 2.0 license, and the source repository (openai/chatkit-js) reports a language breakdown of roughly 31 percent TypeScript, 27 percent CSS, 22 percent MDX and 18 percent Astro at version 1.5.1.[3]
Mobile support as of May 2026 is provided through a community React Native fork from Memorang named chatkit-react-native, which packages the same component vocabulary for Expo apps; the project describes itself as "a React Native (Expo) compatible fork of OpenAI's ChatKit SDK (chatkit-js), providing a unified interface for building chat-based experiences across web and mobile."[7] OpenAI has acknowledged community interest in a first-party React Native port in its developer forum but has not announced an official package as of May 2026.[13]
The Python server SDK (openai/chatkit-python) provides an idiomatic FastAPI-friendly interface; OpenAI's official quickstart uses FastAPI to mint client secrets and to host the custom server endpoint, and the advanced samples repository pairs FastAPI backends with Vite + React frontends.[14][11]
ChatKit and the other new components of AgentKit are included with standard API model pricing; OpenAI's launch post states that "all of these tools are included with standard API model pricing," meaning developers pay only for the underlying model tokens consumed by the agent the SDK renders.[1] There is no per-seat fee, no per-session fee and no separate SaaS subscription for the SDK itself.[1][6]
In practice the variable cost of a ChatKit deployment is the sum of input and output tokens billed against the relevant Responses API model rate, plus any tool-call costs (for example file search, code interpreter or hosted tools) that the backing workflow consumes. Third-party reviews note that this design pushes ChatKit's running cost closely in line with the model the developer picks, with token-verbose agents producing less predictable bills than fixed-fee chat SDKs.[6][19]
ChatKit is one of three new developer surfaces OpenAI built on top of the Responses API at DevDay 2025. The Responses API supplies the underlying request-response and streaming primitives, including hosted tools; the OpenAI Agents SDK supplies primitives for multi-step agent orchestration with handoffs, guardrails and sessions; Agent Builder offers a visual canvas for composing those primitives into a workflow; and ChatKit renders the resulting workflow as a chat surface.[1][20]
The Python server SDK includes "agents integration helpers for using ChatKit together with the Agents SDK," letting a developer reuse the same Agent or tool object across a programmatic Agents SDK script and a ChatKit-rendered chat surface.[14] The Apps SDK, also announced at DevDay 2025, occupies a different position in the stack: it lets third-party software render interactive UI inside ChatGPT itself using the Model Context Protocol, whereas ChatKit lets developers render a ChatGPT-style chat surface inside their own app or website.[1][9]
ChatKit can call any model accessible through the Responses API, including GPT-5 and the GPT-5 Pro variant that became available to developers on the same day, and any tool registered in the workflow such as web search, file search or the new Connector Registry endpoints.[1][9]
| Library | Backend coupling | Framework | License | Pricing | Pre-built widgets | Citations / annotations |
|---|---|---|---|---|---|---|
| OpenAI ChatKit | OpenAI-hosted or self-hosted via Python SDK[5][14] | React, vanilla JS, community React Native fork[3][7] | Apache 2.0[3] | Included with API model pricing[1] | Cards, lists, forms, buttons, images, badges, layout primitives[17] | First-class source annotations and entity tags[3] |
| Vercel AI SDK | Provider-agnostic via Vercel AI SDK Core[21] | Next.js, React, Svelte, Vue and others[21] | Apache 2.0[21] | Free; Vercel hosting billed separately[21] | useChat hook plus minimal message bubbles; rich UI is up to the developer[22] | Not built in[22] |
| CopilotKit | Self-hosted or CopilotKit Cloud[19] | React with bidirectional state hooks[19] | MIT[19] | Open-source free for self-hosting; cloud requires contact[19] | Custom React components rather than a fixed widget vocabulary[19] | Manual implementation[19] |
| LangChain UI components (LangChain / LangGraph)[23] | Self-hosted Python or JS server[23] | React (LangChain.js components, Chat UI starter)[23] | MIT[23] | Free; LangGraph Cloud billed separately[23] | Limited; primarily message and tool rendering[23] | Tool-call visualisation; citations developer-implemented[23] |
The most direct functional comparison is to Vercel's AI SDK, which also targets developers who want to drop a chat surface into a React or Next.js app. The Vercel SDK's useChat hook manages streaming and message state across many providers but ships only minimal message bubbles, leaving the citation panel, conversation sidebar, attachment uploader and widget vocabulary to the developer; a Speakeasy comparison summarises the trade-off as "no citations, feedback UI, or conversation sidebar" out of the box, in contrast to ChatKit's pre-built UX primitives.[19][22] ChatKit, in turn, accepts a tighter coupling to OpenAI workflows in exchange for those primitives: tool definitions live in Agent Builder or in the Python server, not in the React component.[19]
CopilotKit and other open-source alternatives compete on integration depth into the host React app. CopilotKit publishes hooks that synchronise component state with an agent bidirectionally, which is something ChatKit does not do; ChatKit treats the chat surface as a portal and requires manual sync of UI state.[19] LangChain and LangGraph publish a smaller set of UI components, primarily aimed at developers who already use the LangChain agent framework on the backend and want a thin chat surface.[23]
OpenAI's documentation lists eight default use cases for ChatKit: internal knowledge-base assistants, HR onboarding helpers, research companions, shopping assistants, scheduling assistants, troubleshooting bots, financial-planning advisors and customer-support agents.[16] The product launch named several enterprise design partners that built on AgentKit, including ChatKit specifically:
The advanced-samples repository ships four reference applications: "Cat Lounge," a virtual cat caretaker that exercises function tools and image generation; "Customer Support," an airline concierge that demonstrates multi-tool orchestration with itinerary data and a synchronised timeline view; "News Guide," a newsroom assistant with article search and @-mentions; and "Metro Map," a chat-driven metro planner that uses React Flow for the visualisation panel.[11]
Coverage of the launch focused on the speed of the Ask Froge demo, the breadth of the new AgentKit surface and the implication that OpenAI was pushing further into developer-experience territory historically occupied by frameworks such as LangChain and Vercel's AI SDK. The Neuron's DevDay roundup characterised ChatKit as a tool that "saves weeks of development time while delivering enterprise-grade features like streaming, attachments, and agent workflows out of the box."[10] PromptHub's roundup described AgentKit as "a complete set of building blocks" for agentic apps and noted Agent Builder's resemblance to visual workflow tools such as n8n.[24]
Reviews from third-party developer-tools vendors were mixed on the trade-offs. A Speakeasy comparison concluded that ChatKit is the right choice "for rapid OpenAI ecosystem integration despite billing unpredictability" but observed that capability definitions move to the OpenAI platform rather than living in the host application's component layer, which can complicate auditing and offline development.[19] An Inkeep comparison noted that ChatKit's pre-built widget library accelerates the common case but is "limited to colours, fonts, and spacing" for theming relative to a fully custom build.[25][19]
Constellation Research's analysis of the DevDay announcements grouped ChatKit with the Apps SDK and the Agents SDK as a coordinated push to make OpenAI "the distribution layer" for agent UX, with ChatKit handling the in-product chat surface, the Apps SDK handling agent presence inside ChatGPT and the Agents SDK handling the agent runtime itself.[20]