Does this skill support Hotwire and Turbo?

Yes, it includes specific listeners for 'turbo:load' to ensure the ChatKit widget re-initializes correctly during Turbo-driven page transitions.

Can I use this for both self-hosted and hosted OpenAI ChatKit?

Absolutely. The skill provides patterns for both self-hosted backends and OpenAI's hosted infrastructure via client secrets.

How does theme synchronization work?

It uses a MutationObserver to watch for changes in the 'data-theme' attribute on the document root, instantly updating the ChatKit widget to match the application's visual mode.

What configuration options are supported?

You can configure API endpoints, domain keys, upload limits, allowed file types, initial thread IDs, and custom header titles through standardized data attributes.

Is it easy to add file upload support?

Yes, the bootstrap provides specific data attributes for upload URLs and validation constraints that the ChatKit component uses natively to handle attachments.

ChatKit Rails Bootstrap

Name: ChatKit Rails Bootstrap
Author: rbarazi

byrbarazi

0•

デザインツール

Integrates and configures OpenAI's ChatKit widget within Ruby on Rails applications using data-driven initialization.

This skill streamlines the process of embedding the OpenAI ChatKit custom element into Rails views, providing standardized patterns for backend connectivity, file upload handling, and theme synchronization. It automates the setup of data attributes for API configuration, ensures seamless integration with Turbo navigation, and manages the hand-off between self-hosted and hosted modes, allowing developers to quickly deploy sophisticated AI chat interfaces with minimal boilerplate and consistent styling across their application.

主な機能

01Standardized Rails partials for ChatKit initialization

02Automated theme synchronization with app-wide dark/light modes

03Robust support for Turbo Drive and Turbo Frame navigation

04Simplified configuration for file uploads and MIME type restrictions

05Dual-mode support for both self-hosted and OpenAI-hosted infrastructures

060 GitHub stars

ユースケース

01Embedding a persistent AI chat widget in a Rails application sidebar or dashboard

02Setting up standalone, full-page AI agent interfaces with custom branding

03Implementing file upload capabilities within a chat interface for document analysis

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add rbarazi/agent-skills chatkit-frontend-bootstrap

For use in Claude.ai and ChatGPT

Download Skill