MARKETPLACE
PLUGINS
OPENAI CHATKIT
OpenAI ChatKit logo

OpenAI ChatKit

Published December 2025
   •    Updated today

Plugin details

Integrate OpenAI's ChatKit framework to build AI-powered chat experiences with client tool calling integration, and UI customization
Access these in your Bubble workflows:

Message - Last user message
Response - Last AI response
Current Thread ID - Conversation ID
Is Response Streaming - Is AI typing?
Widget Type - Type of widget clicked
Widget Data - Data from widget (JSON)
Client Tool Name - Tool AI is calling
Error Message - Any errors


Events You Can Trigger On

message_sent - User sent a message
response_received - AI finished responding
widget_interaction - User clicked a widget
client_tool_called - AI needs help
error_occurred - Something went wrong
session_started - Chat is ready

Actions You Can Trigger

Send Message - Send text as if user typed it
Set Thread ID - Switch conversations
Clear Chat - Start fresh conversation
Load Studio Config - Update theme/styling
Return Client Tool Result - Send data back to AI (advanced)

Free

For everyone

stars   •   0 ratings
21 installs  
This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

Branimir logo
Branimir
Joined 2018   •   7 Plugins
View contributor profile

Instructions

ChatKit for Bubble - Quick Start Guide 🚀 Setup (3 Steps)

Step 1: Create a Session
⚠️ Important: This API call must happen in a Backend Workflow (never expose your OpenAI API key on the frontend!)
Call OpenAI:
Endpoint: https://api.openai.com/v1/chatkit/sessions
Method: POST
Headers:

Authorization: Bearer YOUR_API_KEY
Content-Type: application/json
OpenAI-Beta: chatkit_beta=v1

Body:
json{
 "workflow": {"id": "wf_YOUR_WORKFLOW_ID"},
 "user": "bubble-user-123"
}
Save the client_secret from the response - you'll need it next!

Step 2: Add ChatKit Element

Drag ChatKit element onto your page
Set Client Secret = the client_secret from Step 1
Set Config JSON = Paste the entire code from ChatKit Studio Playground (with TypeScript) OR just the JSON. Both work! Sets theme, greeting, prompts, etc


Step 3: Whitelist Your Domain
Go to OpenAI → Security → Domain Allowlist
Add your Bubble app's domain

✅ Done!
Your ChatKit widget is now live and ready to use.

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
AI   •   Chat   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble