Verified:GitHub

cometchat-customization

Customize CometChat React UI kit with view-slot overrides and message templates.

Updated May 28, 2026

Search Tags:#component composition #ui kit #cometchat #message templates #event subscriptions #react customization #request builder filtering

Ready to run

npx skills add https://github.com/MAX5271/CometChat --skill cometchat-customization-max5271

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: cometchat-customization
Source: https://github.com/MAX5271/CometChat/tree/main/.claude/skills/cometchat-customization
Command: npx skills add https://github.com/MAX5271/CometChat --skill cometchat-customization-max5271

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Customize how your CometChat React chat experience looks and behaves when the default UI kit setup is not enough, so you can tailor message rendering, layouts, filters, UI states, and interaction behavior to your product requirements.

Core Features & Use Cases

Custom UI composition and view slots: Inject custom header, subtitle, empty/loading/error states, action menus, and message templates through the React UI kit customization APIs.
Data shaping via request builders: Filter conversations, messages, users, or groups using the corresponding RequestBuilder instances instead of writing ad-hoc UI logic.
Interaction and realtime hooks: Add click/callback behavior and subscribe to CometChat event topics to drive toasts, unread counters, or other UI updates.

Quick Start

Tell the assistant: "I already have /cometchat working—customize the message bubble and filter conversations to only show X, using the official UI kit props and events."

Frequently Asked Questions about cometchat-customization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I customize CometChat React UI kit message bubbles?▼

Customize CometChat React UI kit message bubbles by applying view-slot overrides and message template configuration APIs. Inject custom header, subtitle, empty states, and action menus through the UI composition customization points rather than modifying default components directly.

Can I filter CometChat conversations using request builders instead of UI logic?▼

Filter CometChat conversations using RequestBuilder instances to shape data for users, messages, and groups. Apply request-builder filtering to constrain lists deterministically instead of writing ad-hoc client-side logic to hide unwanted conversation items.

How do I subscribe to CometChat events for realtime UI updates?▼

Subscribe to CometChat event topics to wire interaction and realtime hooks for UI updates. Attach click and callback behaviors to drive toasts, unread counters, and event-driven UI behavior for conversations, calls, and group interactions.

Does this approach require validating CometChat integration readiness first?▼

Validating Phase A CometChat integration readiness is required before customizing the React UI kit. Confirm deterministic framework initialization is complete, then query the CometChat docs MCP for canonical prop, builder, event, and selector signatures to ensure correct overrides.

What is the best way to override CometChat UI kit headers and loading states?▼

The best way to override CometChat UI kit headers and loading states is through component composition APIs. Inject custom header, subtitle, empty, loading, and error view slots using official UI kit props, followed by deterministic code changes and skills-cli verification.