Docs/skills v4

chat-call.mdx

@@ -6,18 +6,36 @@ canonical: "https://cometchat.com/docs"
 ---
 
 
+<style>{`
+  .hero-skills-code pre,
+  .hero-skills-code div {
+    background-color: #000 !important;
+    max-width: fit-content !important;
+  }
+`}</style>
+
 {/* Hero Section */}
 
-<div className="relative w-full flex items-center justify-center h-80 overflow-hidden">
-<div className="absolute inset-0 bg-primary dark:bg-primary-light opacity-[0.05]"/>
+<div className="relative w-full flex items-center justify-center h-96 overflow-hidden">
+<div className="absolute inset-0 bg-primary dark:bg-primary-light opacity-[0.05] pointer-events-none"/>
 
 <div className="max-w-[70rem] mx-auto px-5"> 
   <Columns cols={2} className="items-center gap-x-12">
     <div className="flex flex-col justify-center h-full text-center md:text-left">
       <h1 className="text-gray-700 dark:text-white text-[2.2rem] font-semibold">Chat & Messaging</h1>
       <p className="text-lg text-gray-600">
-        Add real-time chat and calls to your app in minutes. Choose the approach that fits your needs.
-      </p> 
+        Production-ready messaging for web and mobile, ready to drop into your stack.
+      </p>
+      <p className="text-sm text-gray-600 dark:text-gray-400 mt-5 mb-2"><strong>Building with an AI agent?</strong> Install this skill and start building instantly.</p>
+
+<div className="hero-skills-code">
+
+```bash
+npx @cometchat/skills add
+```
+
+</div>
+
     </div>
     <div className="flex flex-col items-center justify-center h-full">
       <img 

sdk/javascript/authentication-overview.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Authentication"
-sidebarTitle: "Overview"
+sidebarTitle: "Authentication"
 ---
 
 ## Create User

sdk/javascript/setup-sdk.mdx

@@ -1,6 +1,6 @@
 ---
 title: "Setup"
-sidebarTitle: "Overview"
+sidebarTitle: "Setup"
 ---
 
 <Note>

ui-kit/android/getting-started.mdx

@@ -16,6 +16,7 @@ description: "Install, configure, and launch the CometChat Android UI Kit in you
 | Theme | Set `CometChatTheme.DayNight` as parent theme in `themes.xml` |
 | Calling | Optional. Add `com.cometchat:calls-sdk-android` to enable voice/video |
 | Min SDK | Android 7.0 (API 24) |
+| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
 
 </Accordion>
 
@@ -27,6 +28,30 @@ This guide walks you through adding CometChat to an Android app. By the end you'
 
 ---
 
+## Integrate with AI Coding Agents
+
+Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. Your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+
+```bash
+npx @cometchat/skills add
+```
+
+Use `--ide <name>` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` for all supported IDEs.
+
+Then in your IDE:
+
+```
+/cometchat add chat to my app
+```
+
+The skill detects your Android project structure, build system (Gradle/Kotlin DSL), and existing auth system. It onboards you to CometChat directly in the terminal — signup, login, and app creation all via the CLI. It reads your Activities, Fragments, and navigation before proposing a placement, shows the plan, and waits for your approval before writing code. Credentials are saved to `local.properties` and accessed via `BuildConfig`.
+
+After the first integration, re-run `/cometchat` to access the iteration menu: theme presets, 40+ features, component customization, production auth, user management, and diagnostics.
+
+Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
+
+---
+
 ## Prerequisites
 
 You need three things from the [CometChat Dashboard](https://app.cometchat.com/):

ui-kit/android/overview.mdx

@@ -17,6 +17,7 @@ description: "Prebuilt Android Views for chat, voice, and video calling. Support
 | Calling | Optional — `com.cometchat:calls-sdk-android` |
 | Localization | 19 languages built-in |
 | Source | [GitHub](https://github.com/cometchat/cometchat-uikit-android) |
+| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
 
 </Accordion>
 
@@ -28,6 +29,37 @@ The CometChat Android UI Kit provides prebuilt, customizable Views for adding ch
 
 ---
 
+## Integrate with AI Coding Agents
+
+Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to add chat to any Android project through your AI coding agent. The skill takes an AI-first approach — your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+
+Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
+
+```bash
+npx @cometchat/skills add
+```
+
+Use `--ide <name>` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` to install for all supported IDEs.
+
+Then in your IDE:
+
+```
+/cometchat add chat to my app
+```
+
+The skill detects your project structure, build system, and existing auth system. It onboards you to CometChat directly in the terminal — signup, login, and app creation all via the CLI. It reads your Activities, Fragments, and navigation before proposing a placement, shows the plan (which files it will create, modify, and leave untouched), and waits for your approval before writing code. Credentials are saved to `local.properties` and accessed via `BuildConfig`.
+
+After the first integration, re-run `/cometchat` anytime to pick from the iteration menu:
+
+- **Customize look & feel** — theme presets (slack / whatsapp / imessage / discord / notion) or your own brand color
+- **Add a feature** — 40+ features including calls, reactions, polls, AI smart replies, file sharing, presence
+- **Customize a component** — custom message bubbles, headers, composer actions, empty/loading states
+- **Set up production auth** — replace the dev Auth Key with a server-side token endpoint
+- **Set up user management** — server endpoints for creating/updating/deleting CometChat users
+- **Run diagnostics** — verify, drift detection, symptom-to-cause lookup
+
+---
+
 ## Try It
 
 <CardGroup>

ui-kit/angular/getting-started.mdx

@@ -3,6 +3,16 @@ title: "Getting Started"
 description: "Getting Started — CometChat documentation."
 ---
 
+<Accordion title="AI Integration Quick Reference">
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-angular` |
+| Peer deps | `@cometchat/uikit-elements`, `@cometchat/uikit-resources`, `@cometchat/uikit-shared` |
+| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
+
+</Accordion>
+
 ## Start your first conversation
 
 The CometChat UI Kit for Angular simplifies the process of integrating in-app chat functionality with essential messaging features. With a collection of prebuilt UI components, it offers seamless theming options, including light and dark themes, various fonts, colors, and extensive customization possibilities.
@@ -13,6 +23,32 @@ Supporting both one-to-one and group conversations, the CometChat UI Kit for Ang
   <img src="/images/849be39e-intro_web_screens-d1702576c4ab3f961a1937dcbca01a8b.png" />
 </Frame>
 
+---
+
+## Integrate with AI Coding Agents
+
+Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. Your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+
+```bash
+npx @cometchat/skills add
+```
+
+Use `--ide <name>` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` for all supported IDEs.
+
+Then in your IDE:
+
+```
+/cometchat add chat to my app
+```
+
+The skill detects your Angular version, router setup, and existing auth system. It onboards you to CometChat directly in the terminal — signup, login, and app creation all via the CLI. It reads your routes, modules, and components before proposing a placement (route or modal), shows the plan, and waits for your approval before writing code. Credentials are saved to `src/environments/environment.ts`.
+
+After the first integration, re-run `/cometchat` to access the iteration menu: theme presets, 40+ features, component customization, production auth, user management, and diagnostics.
+
+Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
+
+---
+
 ## Prerequisites
 
 Before installing **UI Kit** for Angular, you need to create a CometChat application on the CometChat Dashboard, which comprises everything required in a chat service including users, groups, calls & messages. You will require the `App ID`, `AuthKey`, and `Region` of your CometChat application when initializing the **UI Kit**.

ui-kit/angular/overview.mdx

@@ -7,6 +7,17 @@ description: "Overview of Overview in CometChat."
 🚀 **CometChat Angular UI Kit v5 is now available in beta!** It features a completely revamped component architecture and improved theming. [Try the v5 Beta →](/ui-kit/angular/v5/overview)
 </Note>
 
+<Accordion title="AI Integration Quick Reference">
+
+| Field | Value |
+| --- | --- |
+| Package | `@cometchat/chat-uikit-angular` |
+| Peer deps | `@cometchat/uikit-elements`, `@cometchat/uikit-resources`, `@cometchat/uikit-shared` |
+| Source | [GitHub](https://github.com/cometchat-pro/cometchat-chat-sample-app-angular/tree/v4) |
+| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
+
+</Accordion>
+
 CometChat's **UI Kit** for Angular, you can effortlessly build a chat app equipped with all the essential messaging features, along with customizable options tailored to your application requirements. This **UI Kit** comprises prebuilt UI components organized into smaller modules and components, each configurable to meet your specific needs.
 
 <Frame>
@@ -23,3 +34,34 @@ Before you begin, it's essential to grasp the fundamental concepts and features
 The Angular UI Kit offers pre-built components for easy integration into Angular applications, built on top of the [JavaScript Chat SDK](/sdk/javascript/overview) Installing it also includes the core SDK functionalities.
 
 To begin, please follow the [Getting Started](/ui-kit/angular/getting-started) guide.
+
+---
+
+## Integrate with AI Coding Agents
+
+Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to add chat to any Angular project through your AI coding agent. The skill takes an AI-first approach — your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+
+Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
+
+```bash
+npx @cometchat/skills add
+```
+
+Use `--ide <name>` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` to install for all supported IDEs.
+
+Then in your IDE:
+
+```
+/cometchat add chat to my app
+```
+
+The skill detects your Angular version, router setup, and existing auth system. It onboards you to CometChat directly in the terminal — signup, login, and app creation all via the CLI. It reads your routes, modules, and components before proposing a placement (route or modal), shows the plan (which files it will create, modify, and leave untouched), and waits for your approval before writing code. Credentials are saved to `src/environments/environment.ts`.
+
+After the first integration, re-run `/cometchat` anytime to pick from the iteration menu:
+
+- **Customize look & feel** — theme presets (slack / whatsapp / imessage / discord / notion) or your own brand color
+- **Add a feature** — 40+ features including calls, reactions, polls, AI smart replies, file sharing, presence
+- **Customize a component** — custom message bubbles, headers, composer actions, empty/loading states
+- **Set up production auth** — replace the dev Auth Key with a server-side token endpoint
+- **Set up user management** — server endpoints for creating/updating/deleting CometChat users
+- **Run diagnostics** — verify, drift detection, symptom-to-cause lookup

ui-kit/flutter/getting-started.mdx

@@ -15,6 +15,7 @@ description: "Add CometChat to a Flutter app in 5 steps: create project, install
 | Auth Key | Dev/testing only. Use Auth Token in production |
 | Calling | Optional. Install `cometchat_calls_uikit` to enable |
 | Platforms | iOS 13.0+, Android API 24+ (with calling) |
+| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
 
 </Accordion>
 
@@ -26,6 +27,30 @@ This guide walks you through adding CometChat to a Flutter app. By the end you'l
 
 ---
 
+## Integrate with AI Coding Agents
+
+Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. Your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+
+```bash
+npx @cometchat/skills add
+```
+
+Use `--ide <name>` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` for all supported IDEs.
+
+Then in your IDE:
+
+```
+/cometchat add chat to my app
+```
+
+The skill detects your Flutter project structure, navigation setup, and existing auth system. It onboards you to CometChat directly in the terminal — signup, login, and app creation all via the CLI. It reads your routes, screens, and widgets before proposing a placement (route, modal sheet, or tab), shows the plan, and waits for your approval before writing code. Credentials are saved as a Dart const file or via `--dart-define`.
+
+After the first integration, re-run `/cometchat` to access the iteration menu: theme presets, 40+ features, component customization, production auth, user management, and diagnostics.
+
+Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
+
+---
+
 ## Prerequisites
 
 You need three things from the [CometChat Dashboard](https://app.cometchat.com/):

ui-kit/flutter/overview.mdx

@@ -18,6 +18,7 @@ description: "Prebuilt Flutter widgets for chat, voice, and video calling. Works
 | Flutter | 3.0+ recommended |
 | Localization | Built-in support |
 | Source | [GitHub](https://github.com/cometchat/cometchat-uikit-flutter/tree/v5/chat_uikit) |
+| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
 
 </Accordion>
 
@@ -29,6 +30,37 @@ The CometChat Flutter UI Kit provides prebuilt, customizable widgets for adding
 
 ---
 
+## Integrate with AI Coding Agents
+
+Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to add chat to any Flutter project through your AI coding agent. The skill takes an AI-first approach — your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+
+Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
+
+```bash
+npx @cometchat/skills add
+```
+
+Use `--ide <name>` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` to install for all supported IDEs.
+
+Then in your IDE:
+
+```
+/cometchat add chat to my app
+```
+
+The skill detects your Flutter project structure, navigation setup, and existing auth system. It onboards you to CometChat directly in the terminal — signup, login, and app creation all via the CLI. It reads your routes, screens, and widgets before proposing a placement (route, modal sheet, or tab), shows the plan (which files it will create, modify, and leave untouched), and waits for your approval before writing code. Credentials are saved as a Dart const file or via `--dart-define`.
+
+After the first integration, re-run `/cometchat` anytime to pick from the iteration menu:
+
+- **Customize look & feel** — theme presets (slack / whatsapp / imessage / discord / notion) or your own brand color
+- **Add a feature** — 40+ features including calls, reactions, polls, AI smart replies, file sharing, presence
+- **Customize a component** — custom message bubbles, headers, composer actions, empty/loading states
+- **Set up production auth** — replace the dev Auth Key with a server-side token endpoint
+- **Set up user management** — server endpoints for creating/updating/deleting CometChat users
+- **Run diagnostics** — verify, drift detection, symptom-to-cause lookup
+
+---
+
 ## Try It
 
 <CardGroup> 

ui-kit/ios/getting-started.mdx

@@ -17,6 +17,7 @@ description: "Add CometChat to an iOS app in 5 steps: create project, install, i
 | Auth Key | Dev/testing only. Use Auth Token in production |
 | Calling | Optional. Install `CometChatCallsSDK 4.2.2` to enable |
 | Dependencies | `CometChatSDK 4.1.0` (installed automatically) |
+| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) |
 
 </Accordion>
 
@@ -28,6 +29,30 @@ This guide walks you through adding CometChat to an iOS app. By the end you'll h
 
 ---
 
+## Integrate with AI Coding Agents
+
+Skip the manual steps — use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to integrate via your AI coding agent. Your agent has a short conversation with you to understand your project and chat requirements, then writes production-grade integration code tailored to the files you already have.
+
+```bash
+npx @cometchat/skills add
+```
+
+Use `--ide <name>` to target a specific IDE (e.g. `--ide cursor`), or `--ide all` for all supported IDEs.
+
+Then in your IDE:
+
+```
+/cometchat add chat to my app
+```
+
+The skill detects your iOS project structure, navigation pattern (UIKit or SwiftUI), and existing auth system. It onboards you to CometChat directly in the terminal — signup, login, and app creation all via the CLI. It reads your view controllers, navigation, and components before proposing a placement, shows the plan, and waits for your approval before writing code. Credentials are saved via `Secrets.swift` or `.xcconfig`.
+
+After the first integration, re-run `/cometchat` to access the iteration menu: theme presets, 40+ features, component customization, production auth, user management, and diagnostics.
+
+Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).
+
+---
+
 ## Prerequisites
 
 You need three things from the [CometChat Dashboard](https://app.cometchat.com/):