openai-chatkit-frontend-embed-skill_skill

This skill helps you embed and configure ChatKit frontend in TS/JS apps, supporting hosted workflows or custom backends with secure auth and uploads.

Python

1

GitHub Stars

3

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill zeeshan080/ai-native-robotics --skill openai-chatkit-frontend-embed-skill

examples.md15.9 KB
reference.md9.8 KB
SKILL.md4.8 KB

Overview

This skill helps you integrate and embed OpenAI ChatKit UI into TypeScript or JavaScript frontends (Next.js, React, or vanilla). It focuses on frontend wiring: configuring api.url, auth headers, domainKey, uploadStrategy, and troubleshooting blank or stuck ChatKit widgets. Use this skill when you need a secure, maintainable ChatKit frontend integration that connects to either OpenAI-hosted workflows or your own backend.

How this skill works

I inspect your frontend code and ChatKit initialization to ensure the UI is pointed at the correct API endpoint and receives valid auth tokens. I verify the api.url, custom fetch wrapper, uploadStrategy, and domainKey are set for either hosted workflow mode (workflowId + client token) or custom-backend mode (api.url + fetch + direct upload). I also walk through common debug checks for CORS, domain allowlists, missing tokens, and broken upload endpoints.

When to use it

Adding a ChatKit chat widget to a Next.js, React, or vanilla site
Connecting ChatKit to your own backend (Agents SDK) instead of hosted workflows
Configuring api.url, custom fetch headers, uploadStrategy, or domainKey
Debugging blank widget, stuck loading spinner, or missing messages
Ensuring client tokens and domain allowlist are correct and secure

Best practices

Prefer custom-backend pattern: frontend talks to your backend which validates users and proxies to the agent
Never store long-lived API keys in the frontend; use short-lived client tokens issued by your server
Isolate ChatKit config in a single module (api.url, fetch wrapper, uploadStrategy, domainKey)
Inject auth via custom fetch headers using the app's existing auth system
Use uploadStrategy.type = 'direct' and a backend upload endpoint to validate files and scan content

Example use cases

Next.js app: mount ChatKit component and fetch a short-lived client token from /api/chatkit/token
React SPA: configure api.url to your backend and add Authorization header in fetch wrapper
Vanilla site: embed ChatKit script and set domainKey plus custom upload URL for file attachments
Troubleshoot blank widget by checking console for CORS, 401/403, wrong domainKey, or stale workflowId
Add action buttons by wiring frontend events to your backend action endpoints and returning ChatKit-compatible responses

FAQ

If you want OpenAI to host the workflow and orchestration, use hosted workflow mode with a workflowId and short-lived client token. If you need custom auth, user validation, or control over tools, default to custom-backend mode and set api.url.

Why is my ChatKit widget blank?

Common causes are missing/expired client token, wrong domainKey, CORS blocking the api.url, or a failing upload endpoint. Check network requests and the console for 401/403/CORS errors and verify your backend token endpoint.