> 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 asks for it the first time. * 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 uses the Chat SDK. 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, the first time only. 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 asks these questions in order. It skips a question when your request already answers it or only one choice is left. | Question | Choices | | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | | What should the app include? | Chat, Voice and video calls, or both. To add calls, see [Add voice and video calls](/plugins/client/add-voice-and-video-calls.md#create-a-new-app-with-calls). | | How should the chat screens be built? | Chat UIKit, with prebuilt screens you can theme, or your own screens on the Chat SDK | | Which platform should the app run on? | React, React Native, iOS, or Android | | Which iOS UI framework? | UIKit or SwiftUI. Asked for iOS only. | | Which Android UI toolkit? | Views or Jetpack Compose. Asked for Android only. | | Which Sendbird plan will this app use? | Starter, Pro, Enterprise, or Free trial or not decided yet. Optional. | | Which chat features should the app have? | Channel list, Conversation, and Invite members | | Anything else the app should do? | Free text. Optional. | For example, "Create a new app in this folder with a channel list and conversation screens, using the Chat SDK" answers the screen question, so the plugin builds your own screens on the Chat SDK without asking. ### 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 each chat feature you picked. ## 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 a second test user * Sends messages both ways * Shows you screenshots This check needs plugin version 0.1.75 or later. The test users it signs in stay in your app, because the plugin can't delete them, so 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).