diff --git a/chat-call.mdx b/chat-call.mdx index 82330b640..b85b12834 100644 --- a/chat-call.mdx +++ b/chat-call.mdx @@ -6,18 +6,36 @@ canonical: "https://cometchat.com/docs" --- + + {/* Hero Section */} -
-
+
+

Chat & Messaging

- Add real-time chat and calls to your app in minutes. Choose the approach that fits your needs. -

+ Production-ready messaging for web and mobile, ready to drop into your stack. +

+

Building with an AI agent? Install this skill and start building instantly.

+ +
+ +```bash +npx @cometchat/skills add +``` + +
+
diff --git a/ui-kit/android/getting-started.mdx b/ui-kit/android/getting-started.mdx index 77b6feac1..849a13c85 100644 --- a/ui-kit/android/getting-started.mdx +++ b/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) | @@ -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 ` 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/): diff --git a/ui-kit/android/overview.mdx b/ui-kit/android/overview.mdx index 462c31ccf..47f1ca77e 100644 --- a/ui-kit/android/overview.mdx +++ b/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) | @@ -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 ` 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 diff --git a/ui-kit/angular/getting-started.mdx b/ui-kit/angular/getting-started.mdx index 09eb326d2..8b7212aaa 100644 --- a/ui-kit/angular/getting-started.mdx +++ b/ui-kit/angular/getting-started.mdx @@ -3,6 +3,16 @@ title: "Getting Started" description: "Getting Started — CometChat documentation." --- + + +| 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) | + + + ## 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 +--- + +## 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 ` 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**. diff --git a/ui-kit/angular/overview.mdx b/ui-kit/angular/overview.mdx index 0503bdc31..57ad6b1b5 100644 --- a/ui-kit/angular/overview.mdx +++ b/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) + + +| 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) | + + + 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. @@ -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 ` 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 diff --git a/ui-kit/flutter/getting-started.mdx b/ui-kit/flutter/getting-started.mdx index 5ee3ac06f..1e58549c3 100644 --- a/ui-kit/flutter/getting-started.mdx +++ b/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) | @@ -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 ` 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/): diff --git a/ui-kit/flutter/overview.mdx b/ui-kit/flutter/overview.mdx index d73a14dab..6f5dfc714 100644 --- a/ui-kit/flutter/overview.mdx +++ b/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) | @@ -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 ` 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 diff --git a/ui-kit/ios/getting-started.mdx b/ui-kit/ios/getting-started.mdx index 02c21791f..d5a2ce9be 100644 --- a/ui-kit/ios/getting-started.mdx +++ b/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) | @@ -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 ` 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/): diff --git a/ui-kit/ios/overview.mdx b/ui-kit/ios/overview.mdx index 588cf3fee..b12e44b7d 100644 --- a/ui-kit/ios/overview.mdx +++ b/ui-kit/ios/overview.mdx @@ -35,6 +35,7 @@ description: "Integrate chat functionality into iOS applications with prebuilt, | Peer Dependencies | CometChatSDK >= 4.0.0 | | Platforms | iOS 13.0+, iPadOS 13.0+, Mac Catalyst 13.0+ | | Language | Swift 5.0+ | +| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) | | License | MIT | --- @@ -52,6 +53,37 @@ The CometChat UI Kit for iOS provides a seamless solution to integrate chat func --- +## Integrate with AI Coding Agents + +Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to add chat to any iOS 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 ` 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 iOS project structure, navigation pattern, 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 (which files it will create, modify, and leave untouched), and waits for your approval before writing code. Credentials are saved via `Secrets.swift` or `.xcconfig`. + +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 diff --git a/ui-kit/react-native/expo-integration.mdx b/ui-kit/react-native/expo-integration.mdx index d8fcbed46..7cab22bc9 100644 --- a/ui-kit/react-native/expo-integration.mdx +++ b/ui-kit/react-native/expo-integration.mdx @@ -16,6 +16,7 @@ description: "Add CometChat to an Expo app using development builds in 5 steps: | Auth Key | Dev/testing only. Use Auth Token in production | | Expo Go | Not supported — use development builds | | Other frameworks | [React Native CLI](/ui-kit/react-native/react-native-cli-integration) | +| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) | @@ -27,6 +28,30 @@ Expo Go is not supported. The CometChat UI Kit requires custom native modules, s --- +## 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 ` 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 Expo setup (managed workflow + Expo Router), env prefix (`EXPO_PUBLIC_`), 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 screens, nav, and components before proposing a placement, shows the plan, and waits for your approval before writing code. + +After the first integration, re-run `/cometchat` to access the iteration menu: theme presets, 40+ features, component customization, push notifications, 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/): diff --git a/ui-kit/react-native/overview.mdx b/ui-kit/react-native/overview.mdx index 43cc3382e..a04fb302a 100644 --- a/ui-kit/react-native/overview.mdx +++ b/ui-kit/react-native/overview.mdx @@ -13,6 +13,7 @@ description: "Prebuilt React Native components for chat, voice, and video callin | Calling | Optional — `@cometchat/calls-sdk-react-native` | | Localization | Built-in localization support | | Source | [GitHub](https://github.com/cometchat/cometchat-uikit-react-native/tree/v5) | +| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) | @@ -32,6 +33,39 @@ Auth Key is for development/testing only. In production, generate Auth Tokens on --- +## Integrate with AI Coding Agents + +Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to add chat to any React Native 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 ` 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 framework (Expo or bare React Native), 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 screens, nav, and components before proposing a placement (stack, tab, modal, or bottom sheet), shows the plan (which files it will create, modify, and leave untouched), and waits for your approval before writing code. + +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 +- **Add another placement** — modal / bottom sheet / extra tab +- **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 +- **Set up push notifications** — APNs + FCM end-to-end +- **Run diagnostics** — verify, drift detection, symptom-to-cause lookup + +--- + ## Get Started Pick your framework and follow the step-by-step integration guide: diff --git a/ui-kit/react-native/react-native-cli-integration.mdx b/ui-kit/react-native/react-native-cli-integration.mdx index faccea709..1f46a0a6a 100644 --- a/ui-kit/react-native/react-native-cli-integration.mdx +++ b/ui-kit/react-native/react-native-cli-integration.mdx @@ -16,6 +16,7 @@ description: "Add CometChat to a React Native CLI app in 5 steps: create project | Auth Key | Dev/testing only. Use Auth Token in production | | Calling | Optional. Install `@cometchat/calls-sdk-react-native` to enable | | Other frameworks | [Expo](/ui-kit/react-native/expo-integration) | +| AI Skills | `npx @cometchat/skills add` — [GitHub](https://github.com/cometchat/cometchat-skills) | @@ -23,6 +24,30 @@ This guide walks you through adding CometChat to a React Native CLI app. By the --- +## 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 ` 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 React Native setup, navigation library, 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 screens, nav, and components before proposing a placement (stack, tab, modal, or bottom sheet), shows the plan, and waits for your approval before writing code. + +After the first integration, re-run `/cometchat` to access the iteration menu: theme presets, 40+ features, component customization, push notifications, 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/): diff --git a/ui-kit/react/overview.mdx b/ui-kit/react/overview.mdx index dcd739c92..0b2b7717d 100644 --- a/ui-kit/react/overview.mdx +++ b/ui-kit/react/overview.mdx @@ -28,7 +28,7 @@ The CometChat React UI Kit provides prebuilt, customizable components for adding ## Integrate with AI Coding Agents -Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to add chat to any React 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. +Use [CometChat Skills](https://github.com/cometchat/cometchat-skills) to add chat to any React 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. One slash — `/cometchat` — works for React, Next.js, React Router, Astro, Expo, bare React Native, Angular, Android, Flutter, and iOS. Works with Claude Code, Cursor, Codex, VS Code Copilot, Windsurf, Cline, Kiro, and [30+ more agents](https://github.com/cometchat/cometchat-skills).