Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesThe right way to embed ChatGPT depends on how much of the chat experience and infrastructure you want to own. For the quickest launch, use hosted ChatKit; for data-residency or on-premises requirements, self-host ChatKit; for a static site, use the vanilla JavaScript web component; for a React application, use @openai/chatkit-react; and for complete control, build a custom interface on the OpenAI API. Every production option still needs a server to authenticate users and protect credentials.
Which embedding method should you choose?
OpenAI’s current embeddable chat surface is ChatKit. It has a managed (hosted) workflow and an advanced self-hosted workflow. ChatKit can be mounted directly as a web component or rendered through a React package. A fifth path is to build your own browser UI and backend around the OpenAI API.
As an Amazon Associate I earn from qualifying purchases.
| Method | Best fit | Implementation speed | Control over infrastructure and data | Frontend fit | Backend and operations work |
|---|---|---|---|---|---|
| Hosted ChatKit | Teams that want a ready-made chat surface and can use the hosted workflow | Fastest of the five | Less than self-hosting or a custom API stack | Any site that can mount the ChatKit script | Server endpoint, user authentication and session handling are still required |
| Self-hosted ChatKit | Custom authentication, data residency, on-premises deployment or bespoke orchestration | Slower than the hosted path | Highest ChatKit control | Web applications using your own infrastructure | Backend engineering, deployment, monitoring and secure credential handling |
| Vanilla JavaScript ChatKit | Static sites and non-React applications | Quick frontend integration | Depends on whether the ChatKit workflow is hosted or self-hosted | Web component | The same server-side session and security duties as the selected ChatKit workflow |
| React ChatKit | Existing React applications that prefer component-based integration | Quick when the application already uses React | Depends on whether the ChatKit workflow is hosted or self-hosted | @openai/chatkit-react |
The same server-side session and security duties as the selected ChatKit workflow |
| Custom OpenAI API UI | Products needing their own layout, policy, storage, tools and conversation behavior | Slowest and largest engineering surface | Highest overall control | Any frontend stack | You own authentication, API access, conversation state, tools, moderation and operations |
Vanilla JavaScript and React are not separate AI backends. They are two frontend ways to mount ChatKit. Your major architectural decision is first between hosted ChatKit, self-hosted ChatKit and a completely custom API experience; then choose the frontend pattern that matches your site.
What a secure embedded-chat architecture looks like
Do not put a long-lived OpenAI API key in browser JavaScript. Treat every file delivered to the browser as public. A secure integration keeps credentials and ChatKit session creation on your server.
#1 Best Overall
- Authenticate the visitor. Establish the signed-in user, subscription, tenant or anonymous-session policy in your own application before creating a ChatKit session.
- Assign a stable, unique user value. Pass a unique identifier for the end user when your server creates the session. Use an identifier that your application can reliably associate with the correct account and permissions.
- Create a short-lived client-secret exchange. Your server calls the ChatKit session endpoint and returns the resulting short-lived client secret to the browser. The browser uses that temporary value to mount the chat.
- Keep authorization decisions server-side. The browser may request an action, but your server must verify ownership, permissions, limits and business rules before changing data, charging an account or calling a privileged tool.
- Log and monitor the boundary. Record session creation failures, denied actions, latency and unexpected tool requests without logging secrets or unnecessary personal data.
This boundary applies whether the visible chat is a hosted widget, a web component, a React component or a UI you wrote yourself.
Method 1: Hosted ChatKit workflow
Hosted ChatKit is the shortest route to a ready-made embedded conversation. OpenAI hosts the ChatKit surface and workflow components while your application handles identity and the server-side session exchange.
How the request flow works
- The visitor opens the page containing ChatKit.
- Your frontend calls an endpoint on your server, not OpenAI directly with a permanent key.
- Your server authenticates the visitor, determines the unique user value, and creates a ChatKit session.
- Your server sends the short-lived client secret back to the browser.
- The browser mounts ChatKit with that secret and the configured workflow.
Implementation sequence
- Choose your identity rule. Decide whether only signed-in users may chat, whether guests receive temporary identities, and how a user maps to an account or tenant.
- Add a server session route. The route should reject unauthenticated requests, create a ChatKit session, attach the unique user value and return only the temporary client secret required by the browser.
- Mount ChatKit in the page. Load the ChatKit client and initialize it after your page has obtained the client secret.
- Configure the experience. Set the workflow and presentation options supported by your ChatKit setup. Use widgets, actions and themes when the chat needs structured choices, branded styling or interactive controls rather than plain text.
- Test expiry and failure. Confirm that an expired secret causes a clean re-authentication or session refresh instead of exposing an API key or leaving a broken spinner.
When hosted ChatKit is the best choice
- You need a production chat surface quickly.
- Your organization accepts the hosted workflow model and does not require on-premises deployment.
- You want ChatKit’s built-in presentation while retaining your site’s account authentication and server-side authorization.
What hosted does not remove
“Hosted” does not mean “frontend only.” You still need a server endpoint, authenticated users, a unique user value and the client-secret exchange. It also does not make browser code trusted: validate every action that can affect an account, payment, private record or other durable state.
Method 2: Self-hosted ChatKit
Self-hosted ChatKit runs the advanced integration on your infrastructure. OpenAI positions this path for custom authentication, data residency, on-premises deployment and bespoke agent orchestration.
What you take responsibility for
- Deployment: package and release the ChatKit integration in your own environment.
- Authentication: connect it to your identity provider, session model and tenant boundaries.
- Data location: design storage, logs and network paths to meet your residency requirements.
- Orchestration: implement the agent routing, tools and policies that are specific to your product.
- Operations: monitor uptime, errors, capacity, upgrades and secret rotation.
Step-by-step planning
- Document the data boundary. List what conversations, user attributes and tool inputs may be processed, where they are stored and how long they are retained.
- Design the authentication contract. Define how your application proves identity to the self-hosted service and how tenant isolation is enforced on every request.
- Build the server integration. Keep OpenAI credentials in a server-side secret store, expose only the browser-facing session exchange, and apply rate limits and request validation.
- Implement orchestration and tools. Give agents only the tools they need. Validate tool arguments and authorization on the server before executing an operation.
- Deploy with observability. Add health checks, structured error logging, latency monitoring and a rollback path before opening the feature to all users.
- Run compliance and resilience tests. Test tenant separation, secret leakage, replayed requests, expired sessions, provider outages and partial tool failures.
Trade-off
Self-hosting buys operational and data control, but that control is an engineering obligation. It is appropriate when hosted constraints conflict with policy or product requirements; it is unnecessary overhead for a simple marketing-site chat.
Method 3: Vanilla JavaScript ChatKit web component
The vanilla integration is the cleanest frontend fit for a static site or a non-React application. The ChatKit client is loaded from OpenAI’s deployment CDN, an <openai-chatkit> element is placed in the page, and the element is configured with setOptions.
Minimal page structure
<script src="https://cdn.platform.openai.com/deployments/chatkit/chatkit.js"></script>
<openai-chatkit></openai-chatkit>After the element is available, call its setOptions method with the session and presentation configuration required by your ChatKit workflow. The values that create a session belong on your server; the page should receive only the short-lived client secret produced for the current user.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Static-site checklist
- Provide a serverless function or backend route for authenticated ChatKit session creation. A static host alone cannot safely mint secrets.
- Load the ChatKit script and place the custom element where the conversation should appear.
- Initialize the element after obtaining the current session’s client secret.
- Use the component’s supported widgets, actions and themes to match your site’s interaction and visual requirements.
- Handle network errors, blocked third-party scripts and session expiration with a visible retry path.
Why choose this over React?
The web component avoids adding a framework or a React build pipeline. It works well when the rest of the page is ordinary HTML and JavaScript, while still giving you the ChatKit surface and its configuration model.
Method 4: React ChatKit integration
React teams can install OpenAI’s @openai/chatkit-react package, call the ChatKit hook and render the ChatKit component inside the application. This keeps the chat in the same component and state-management conventions as the rest of a React product.
Integration sequence
- Install the package. Add
@openai/chatkit-reactto the application’s dependencies. - Create the server route first. The React component must obtain a short-lived client secret from your authenticated backend; do not substitute a permanent API key in component code.
- Call the ChatKit hook. Use the package’s hook to establish the ChatKit configuration and session lifecycle.
- Render the component. Place the ChatKit component in the page or feature route where the conversation belongs.
- Connect application state carefully. Pass tenant, locale and feature flags from trusted application state, and keep authorization checks on the server.
- Test route transitions. Confirm that mounting, unmounting and re-mounting a chat does not create duplicate sessions or lose the signed-in user’s identity.
When React is the better frontend
Choose this path when your site already has React, a component library, typed props and a client-side routing model. It avoids wrapping a web component yourself and makes ChatKit part of the application’s normal component tree. It does not, by itself, provide more data control than the hosted or self-hosted workflow selected underneath.
Method 5: Build a custom chat UI with the OpenAI API
A custom API implementation gives you the broadest control over the interface and server behavior. You build the message composer, transcript, streaming state, error handling and accessibility behavior, while your backend owns authentication, conversation policy, storage, tools and calls to OpenAI APIs.
Free tools Windows power users keep installed
One-click scans. No signup required.
Core components
- Browser client: renders messages, handles input, shows streaming and retry states, and never contains a long-lived API key.
- Application backend: authenticates users, enforces quotas and permissions, calls the model API, and filters or transforms tool requests.
- Conversation store: keeps the minimum history needed for your product, with retention and deletion rules that match your policy.
- Tool layer: exposes narrowly scoped server functions and validates every argument before execution.
- Safety and policy layer: applies your moderation, content, tenant and escalation rules before responses or actions reach the user.
- Operations layer: measures failures, latency, usage and provider errors without leaking secrets into logs.
Build order
- Define the conversation contract: message formats, maximum history, streaming behavior and error states.
- Implement authenticated server requests to the OpenAI API and keep credentials in server-side configuration.
- Add persistence only after deciding what must be retained and how users can delete it.
- Add tools one at a time, with explicit authorization and idempotency for operations that may be retried.
- Build the UI states users actually encounter: loading, partial response, timeout, rate limit, refusal, tool failure and reconnect.
- Load-test the backend, set spend and rate controls, and create an incident path for provider or infrastructure outages.
Use ChatKit’s advanced architecture as a reference
Even if you do not render ChatKit, its advanced-integration documentation is the current reference point for thinking about a custom server, authentication boundary and orchestration layer. A custom UI is the most flexible option, but every feature that ChatKit would have supplied becomes your maintenance responsibility.
Widgets, actions and themes: going beyond plain text
ChatKit supports widgets, actions and themes for branded, interactive experiences. A widget can present structured information or controls; an action can request a server-side operation; a theme can align the chat surface with your site.
- Use widgets when users need cards, choices or structured output rather than a paragraph of text.
- Use actions for explicit user intent such as requesting an account operation, but verify authorization and input on the server before doing anything durable.
- Use themes to match typography, colors and spacing while preserving readable contrast and keyboard access.
Interactive controls increase the security surface. A visually harmless button can still trigger a data-changing request, so the server—not the widget—must be the final authority.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Authentication and security pitfalls
Putting an API key in frontend code
Anyone can inspect JavaScript, source maps or network requests delivered to a browser. A key embedded there can be copied and used outside your site. Keep it in a server-side secret store and return only a short-lived client secret for the current ChatKit session.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Creating sessions for unauthenticated requests
If your endpoint mints sessions before checking identity, attackers can automate session creation or cross account boundaries. Authenticate first, then derive the unique user value from the verified account context.
Best Value
Trusting action parameters
Chat text and widget payloads are user-controlled input. Re-check object ownership, roles, amounts, tenant IDs and allowed state transitions on the server. Use idempotency for actions that might be retried after a timeout.
Leaking sensitive data into logs
Conversation transcripts, prompts, tool arguments and client secrets can all be sensitive. Redact credentials, minimize personal data and define retention before enabling verbose debugging in production.
Ignoring expiry and outages
Client secrets expire, scripts can fail to load and upstream requests can time out. Provide clear retry and re-authentication states, and make sure a failed tool call cannot leave a partially completed account change.
Lifecycle planning for 2026
OpenAI’s current ChatKit guidance says existing Agent Builder-hosted workflows are in a transition window scheduled to end on November 30, 2026. New projects should plan around advanced ChatKit integrations rather than building a dependency on a hosted workflow that is approaching that date. If you already use an Agent Builder-hosted workflow, inventory its identifiers, session route and frontend mount, then schedule a migration and test period before the shutdown date.
Migration checklist
- Identify every site and environment that mounts the legacy hosted workflow.
- Record the workflow, user-identity mapping and server session code currently in use.
- Select hosted advanced ChatKit, self-hosted ChatKit or a custom API UI based on your data and control requirements.
- Recreate authentication, session creation and action authorization in a staging environment.
- Test existing conversations, widgets, themes, tool calls, expiry and failure recovery.
- Release behind a feature flag, monitor errors and complete the cutover before November 30, 2026.
Decision guide: speed versus control
Choose hosted ChatKit when
- Your priority is the fastest path to a usable embedded chat.
- You can use OpenAI’s hosted workflow model.
- Your team wants to focus on product behavior rather than operating the chat surface.
Choose self-hosted ChatKit when
- Custom authentication, data residency or on-premises deployment is a requirement.
- You need bespoke orchestration but still want ChatKit’s embeddable surface.
- You have the people and processes to deploy, monitor and secure the integration.
Choose vanilla JavaScript when
- The site is static or uses ordinary JavaScript.
- You want the web component without adding React.
Choose React when
- The product already uses React and its component lifecycle.
- You want ChatKit represented as a typed, reusable application component.
Choose a custom API UI when
- The chat must look and behave unlike a standard embedded surface.
- Your product requires custom storage, policy, tool orchestration or conversation controls.
- You accept the larger engineering and long-term maintenance burden.
Practical launch checklist
- Decide hosted ChatKit, self-hosted ChatKit or a custom API before choosing the frontend wrapper.
- Authenticate users before session creation and send a unique user value.
- Keep permanent API credentials on the server.
- Return only a short-lived client secret to browser code.
- Validate every widget action and tool call on the server.
- Define retention, deletion, logging and data-residency rules.
- Test secret expiry, duplicate mounts, retries, rate limits, script failures and upstream outages.
- Include keyboard navigation, readable contrast, responsive layout and a non-chat fallback for users who cannot load the widget.
- For legacy Agent Builder-hosted workflows, complete migration planning before November 30, 2026.
Bottom line
For most sites, start with hosted ChatKit and mount it through vanilla JavaScript or React according to your frontend stack. Move to self-hosted ChatKit when authentication, residency or infrastructure control is non-negotiable. Build a custom OpenAI API UI only when the product needs behavior and ownership that an embeddable ChatKit surface cannot provide. In every case, the secure pattern is the same: authenticate on your server, create the session there, give the browser a short-lived client secret and treat all browser-supplied actions as untrusted.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
