> For the complete documentation index, see [llms.txt](https://tools.docs.sendbird.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://tools.docs.sendbird.com/plugins/client/add-chat.md). # Add Chat Add Sendbird Chat to an existing app, or create a new chat app, with the Sendbird Client plugin. You describe the chat you want, and the plugin writes the code. It uses the Chat SDK for your own screens or Chat UIKit for prebuilt screens. ## Before you begin * Install the Sendbird Client plugin and open your app project in Claude Code or Codex. See [How to use the plugin](/plugins/client.md#how-to-use-the-plugin). * Have your Sendbird App ID ready. The plugin can also find it, for example from the Sendbird app you selected in Sendbird CLI. See [Give the plugin your App ID](/plugins/client.md#give-the-plugin-your-app-id). * Check how your app's users can sign in during development. Until your server issues tokens, the app connects to Sendbird with the user ID only. This works when your app's token policy is `0`, which allows reading and writing without a token, and the user has never been issued a token. To check the policy with Sendbird CLI, run the following command and look at the **Token policy** value: ```bash sendbird --profile prod app auth-policy get ``` If you connect with the user ID only, sign in with a new user ID. Users created with `--issue-access-token true`, such as the CLI tutorial users, already have a token. If the policy isn't `0`, [issue a test token](/readme/commands/command-reference.md#issue-a-test-users-access-token) for a test user, and ask the plugin to connect with that token during development. For production, see [Connect users with server-issued tokens](#connect-users-with-server-issued-tokens). ## Add Chat to an existing app ### Choose the Chat SDK or Chat UIKit Choose one of the two before you ask. Chat UIKit runs on the Chat SDK, so you don't need both. * **Chat SDK:** You build your own screens, and the plugin sets up the SDK and the screens you name. * **Chat UIKit:** You get prebuilt channel list, conversation, and member list screens that you can theme. If you don't say which, the plugin chooses one and tells you which one it used and why. To compare the two for your platform first, ask "Should I use Chat UIKit or build my own chat screens?" ### Ask like this The plugin doesn't always add a chat screen, so name the screens you need in your request. To use the Chat SDK, type: ``` Add Sendbird chat to this app with a channel list and a chat screen. ``` To use Chat UIKit, type: ``` Set up Sendbird UIKit with a channel list screen. ``` To start the same setup with a command, enter `/sendbird-client:setup --product chat`, or `--product uikit` for Chat UIKit. In Codex, start the command with `$` instead of `/`. ### What the plugin asks * Your App ID, only when it can't find one. See [Give the plugin your App ID](/plugins/client.md#give-the-plugin-your-app-id). * Anything it can't tell from your project, such as which UI framework to use when a project mixes two. ### What you get * The Chat SDK, or Chat UIKit if you asked for it, installed with the package manager your project already uses. On iOS, the plugin uses Swift Package Manager, or CocoaPods only when your project already has a Podfile. * Initialization and connection code where your app starts up. If your app has a sign-out function, the plugin disconnects there too. * The screens you named in your request. * A list of the changes and a short checklist of what to do next. ## Create a new chat app ### Ask like this Open an empty folder in Claude Code or Codex and type: ``` Create a new Sendbird chat app in this folder. ``` To start the same setup with a command, enter `/sendbird-client:setup new-app`. In Codex, start the command with `$` instead of `/`. ### What the plugin asks The plugin reads what to build from your request and uses defaults for the rest. It asks only the questions your request doesn't answer, in its own words, where Sendbird UIKit means Chat UIKit. It asks the first two together, then the iOS or Android question: | Question | Choices | | ------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | | How should the chat screens be built: with Sendbird UIKit, which has ready-made chat screens, or as your own screens on the Chat SDK? | **Sendbird UIKit: ready-made chat screens you can theme** or **My own screens on the Chat SDK** | | Which platform should the app run on? | **React (web)**, **React Native**, **iOS**, or **Android** | | Which iOS UI framework should the app use (Apple's UIKit or SwiftUI, separate from Sendbird UIKit)? | **UIKit** or **SwiftUI**. Asked for iOS only. | | Which Android UI toolkit? | **Views (XML)** or **Jetpack Compose**. Asked for Android only. | Everything else uses a default: the app has sign-in, a channel list, and a conversation screen. To add more, name it in your request, for example an Invite members screen or [voice and video calls](/plugins/client/add-voice-and-video-calls.md#create-a-new-app-with-calls). The plugin's answer lists the defaults it used. If the plugin can't find your App ID, it also asks for it before it writes any file. See [Give the plugin your App ID](/plugins/client.md#give-the-plugin-your-app-id). For example, "Create a new React chat app in this folder using the Chat SDK" answers the first two questions, so the plugin asks neither. ### What you get Sign-in is always included. * **Chat UIKit:** The app starts with Chat UIKit screens for sign-in, connection, the channel list, a channel, and sign-out. * **Your own screens on the Chat SDK:** The app starts from a basic app for your platform, with every screen built on the Chat SDK. The plugin then adds the default chat features and any others you named in your request. ## Run the app Run the app with your platform's tools. For an existing app, run it the way you usually do. For example, for a new React app: ```bash npm install npm run dev ``` Open the address the terminal shows, such as `http://localhost:5173`, enter a user ID such as `alice`, and select **Sign in**. Use a user ID that can sign in, as described in [Before you begin](#before-you-begin). ## Check that chat works To have the plugin build and run your app and test it for you, ask: ``` Check that the Sendbird chat really works in this app. ``` When you agree to the build, the plugin: * Launches the app * Signs in two new test users, and connects a third to check that the first one is online * Sends messages both ways * Shows you screenshots The check works only when your app connects with a user ID and no token, and your Sendbird app allows that. See [Before you begin](#before-you-begin). The plugin saves the results and screenshots in `.sendbird-client/run-check/`. The test users, their channel, and their messages stay in your Sendbird app, because the check doesn't delete them. Run the check on a test app. To test it yourself, sign in as a test user and send a message from your chat screen. A message needs a channel. If your app has no way to start one yet, ask the plugin: ``` Make a 1:1 chat room with another user's ID. ``` To check from the Sendbird side with Sendbird CLI, list the Group channels, then list the messages in your channel. Replace `` with the channel's `channel_url` from the first command, and `` with the user ID you signed in with, without the angle brackets: ```bash sendbird --profile prod chat channel list --type group sendbird --profile prod chat message list --type group --id --as-user --allow-guest ``` If the user has a token, leave out `--allow-guest`. Your message appears in the list. ## What you do yourself ### Connect users with server-issued tokens In production, each app user connects to Sendbird with an access token or session token that your server issues. Your server decides which kind to use; the app passes either one to Sendbird the same way. The App ID only identifies your Sendbird app; it doesn't sign users in. The plugin writes the app code that requests and uses the token, but not the server side. 1. Set up your server to issue a token for the signed-in user. 2. Tell the plugin your server's token endpoint. For example, if your endpoint is `/api/sendbird-token`, ask: ``` Connect Sendbird Chat with a session token from our server at /api/sendbird-token. Add the client code to request and refresh the token and clear it on sign-out. ``` 3. Review the generated connection, token refresh, and sign-out code. Then ask the plugin to check the integration. Don't paste real tokens or server keys into the conversation. ### Set up Sendbird Dashboard and server settings The plugin writes only client code. Set up these items yourself: * Push certificates * App settings * Platform API calls When a request needs one of them, the plugin tells you what to set and links the docs. ## Keep building Ask in the same session, one request at a time: | What you want | Ask | | -------------------------- | ------------------------------------------------------------------------------ | | Open a 1-to-1 chat | "Make a 1:1 chat room with another user's ID." | | Send photos and files | "Let users attach photos and files to messages." | | Typing and read status | "Show when the other person is typing, and whether they've read my message." | | Unread count | "Show the unread message count on a badge." | | Dark mode and brand colors | "Support dark mode and apply our brand color." | | Voice and video calls | See [Add voice and video calls](/plugins/client/add-voice-and-video-calls.md). | For more requests, see [Run a skill with a command](/plugins/client.md#run-a-skill-with-a-command).