{"id":14070181,"url":"https://github.com/sendbird/chat-ai-widget","last_synced_at":"2025-04-05T17:09:30.450Z","repository":{"id":176471639,"uuid":"657562438","full_name":"sendbird/chat-ai-widget","owner":"sendbird","description":"Build AI Chatbot in minutes with Sendbird Chatbot Widget.","archived":false,"fork":false,"pushed_at":"2025-03-10T06:55:06.000Z","size":30159,"stargazers_count":32,"open_issues_count":1,"forks_count":18,"subscribers_count":12,"default_branch":"develop","last_synced_at":"2025-03-17T21:49:46.931Z","etag":null,"topics":["chatbot","chatgpt","gemini","genai-chatbot","gpt-powered-chatbot","llama2","widget"],"latest_commit_sha":null,"homepage":"https://sendbird.github.io/chat-ai-widget/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sendbird.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-23T10:36:13.000Z","updated_at":"2025-03-13T05:28:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"f574c402-2e16-4a28-a321-95d4c86a8335","html_url":"https://github.com/sendbird/chat-ai-widget","commit_stats":{"total_commits":509,"total_committers":10,"mean_commits":50.9,"dds":0.5481335952848723,"last_synced_commit":"2dc3269032d5703f33b50888f3fb78d362fdbed5"},"previous_names":["sendbird/chat-ai-widget"],"tags_count":112,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sendbird%2Fchat-ai-widget","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sendbird%2Fchat-ai-widget/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sendbird%2Fchat-ai-widget/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sendbird%2Fchat-ai-widget/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sendbird","download_url":"https://codeload.github.com/sendbird/chat-ai-widget/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369953,"owners_count":20927928,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chatbot","chatgpt","gemini","genai-chatbot","gpt-powered-chatbot","llama2","widget"],"created_at":"2024-08-13T07:07:32.502Z","updated_at":"2025-04-05T17:09:30.422Z","avatar_url":"https://github.com/sendbird.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./screenshot/logo.png\" width=\"300px\" \u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://img.shields.io/github/last-commit/sendbird/chat-ai-widget?style=flat\u0026logo=git\u0026logoColor=white\u0026color=0080ff\" alt=\"last-commit\"\u003e\n\t\u003cimg src=\"https://img.shields.io/github/languages/top/sendbird/chat-ai-widget?style=flat\u0026color=0080ff\" alt=\"repo-top-language\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\t\t\u003cem\u003eDeveloped with the software and tools below.\u003c/em\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/React-61DAFB.svg?style=flat\u0026logo=React\u0026logoColor=black\" alt=\"React\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/TypeScript-3178C6.svg?style=flat\u0026logo=TypeScript\u0026logoColor=white\" alt=\"TypeScript\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/JavaScript-F7DF1E.svg?style=flat\u0026logo=JavaScript\u0026logoColor=black\" alt=\"JavaScript\"\u003e\n  \u003cimg src=\"https://img.shields.io/badge/Vite-646CFF.svg?style=flat\u0026logo=Vite\u0026logoColor=white\" alt=\"Vite\"\u003e\n\t\u003cbr\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/Prettier-F7B93E.svg?style=flat\u0026logo=Prettier\u0026logoColor=black\" alt=\"Prettier\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/HTML5-E34F26.svg?style=flat\u0026logo=HTML5\u0026logoColor=white\" alt=\"HTML5\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/styledcomponents-DB7093.svg?style=flat\u0026logo=styled-components\u0026logoColor=white\" alt=\"styledcomponents\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/ESLint-4B32C3.svg?style=flat\u0026logo=ESLint\u0026logoColor=white\" alt=\"ESLint\"\u003e\n\t\u003cimg src=\"https://img.shields.io/badge/GitHub%20Actions-2088FF.svg?style=flat\u0026logo=GitHub-Actions\u0026logoColor=white\" alt=\"GitHub%20Actions\"\u003e\n\u003c/p\u003e\n\u003chr\u003e\n\n## What is this for?\nThis is a Sendbird Chat AI Widget implemented on top of [React UiKit](https://github.com/sendbird/sendbird-uikit-react).\n\n\u003e **NOTE:** Proper utilization through code build is available starting from the \"AI Chatbot Pro\" plan or higher of [the Sendbird AI Chatbot pricing plan](https://sendbird.com/pricing).\n\n\n## Demo\n- [Live Demo](https://sendbird.github.io/chat-ai-widget/)\n- [Sendbird Documentation](https://sendbird.com/docs)\n\n## How to use\n1. Prepare Sendbird **Application ID** and **Bot ID**. Here's how you can get them:\n   - **Application ID**: If you don't have an account, sign up on the [Sendbird Dashboard](https://dashboard.sendbird.com/) and create a new application.\n     \u003cimg src=\"https://static.sendbird.com/docs/sendbird-app-id@2x.png\" alt=\"sendbird-app-id\"\u003e\n\n   - **Bot ID**: If you don't have a bot, create one on the Sendbird Dashboard under **AI Chatbot \u003e Manage Bots \u003e Create Bot**.\n     \u003cimg src=\"https://static.sendbird.com/docs/sendbird-ai-chatbot-id@2x.png\" alt=\"sendbird-ai-chatbot-id\"\u003e\n\n   - You can also find your application ID and bot ID in the Sendbird Dashboard under **AI Chatbot \u003e Manage Bots \u003e Bot Settings \u003e Add to My Website**.\n\n2. Install the library:\n   ```bash\n   # With npm\n   npm install @sendbird/chat-ai-widget\n   # Or if you're using yarn\n   yarn add @sendbird/chat-ai-widget\n   ```\n\n3. Add the import statement and \u003cChatAiWidget /\u003e component to your code:\n\n   ```jsx\n    import { ChatAiWidget } from \"@sendbird/chat-ai-widget\";\n    import \"@sendbird/chat-ai-widget/dist/style.css\";\n\n    const App = () =\u003e {\n      return (\n        \u003cChatAiWidget\n          applicationId=\"AE8F7EEA-4555-4F86-AD8B-5E0BD86BFE67\" // Your Sendbird Application ID\n          botId=\"khan-academy-bot\" // Your Bot ID\n        /\u003e\n      );\n    };\n\n    export default App;\n    ```\n    \u003e Not using React in your environment? You can also load this Chat AI Widget component from an HTML file on your website. Please refer to [js-example.html](./js-example.html) for an example.\n  \n\n\n## Run locally\n\n```bash\nyarn install:deps\nyarn dev\n```\n\n - If you want to change applicationId and botId when running locally, modify the following variables in `.env`:\n   ```\n   # Vite prefix is required for Vite to load the env variables\n   # Plz modify below two env variables on your needs\n   VITE_CHAT_WIDGET_APP_ID=AE8F7EEA-4555-4F86-AD8B-5E0BD86BFE67\n   VITE_CHAT_WIDGET_BOT_ID=khan-academy-bot\n   ```\n\n## Customization\nYou can customize the UI of the ChatBot by using the `ChatAiWidget` component. The following are the props that can be used to customize the UI.\n\n```jsx\nimport { ChatAiWidget } from \"@sendbird/chat-ai-widget\";\nimport '@sendbird/chat-ai-widget/dist/style.css';\n\nconst App = () =\u003e {\n  return (\n    \u003cChatAiWidget\n      applicationId=\"Your Sendbird application ID\"\n      botId=\"Your Sendbird bot ID\"\n      // more available props can be found in the next section\n    /\u003e\n  );\n};\n\nexport default App;\n```\n\n### Available props\n| Prop Name               | Type                                  | Required | Default Value | Description                                                                                                    |\n|-------------------------|---------------------------------------|----------|------------|----------------------------------------------------------------------------------------------------------------|\n| `applicationId`         | `string`                              | Yes      | N/A        | Your Sendbird application ID                                                                                   |\n| `botId`                 | `string`                              | Yes      | N/A        | Your Sendbird bot ID                                                                                           |                                                                                       |\n| `userNickName`          | `string`                              | No       | N/A        | The nickname of the user                                                                                       |                                                                   |\n| `enableEmojiFeedback`   | `boolean`                             | No       | `true`     | Enables emoji feedback functionality.                                                                          |\n| `enableMention`         | `boolean`                             | No       | `true`     | Enables mention functionality.                                                                                 |\n| `deviceType`      | `'desktop' \\| 'mobile'`                     | No       | N/A     | Device type to be used in the widget                                                   |\n| `stringSet`             | `{ [key: string]: string }`           | No       | N/A        | Customizable string set. Available string sets can be found [here](https://github.com/sendbird/sendbird-uikit-react/blob/main/src/ui/Label/stringSet.ts). |\n| `customRefreshComponent` | `{ icon: string, style: React.CSSProperties, width: string, height: string, onClick: () =\u003e void }` | No       | N/A        | Customizable refresh component. You can set properties such as `icon`, `style`, `width`, `height`, and `onClick`. |\n| `userId`                | `string`                              | No       | N/A     | User ID to be used in the widget connect. Must be used with `sessionToken` and `configureSession`. The example usage can be found [here](./custom-session-guide.md). |\n| `sessionToken`          | `string`                              | No       | N/A     | Session token to be used in the widget connect. Must be used with `userId` and `configureSession`. The example usage can be found [here](./custom-session-guide.md). |\n| `configureSession`      | `() =\u003e SessionHandler`                | No       | N/A     | Session configuration function. Must be used with `userId` and `sessionToken`. The example usage can be found [here](./custom-session-guide.md). |\n| `autoOpen`              | `boolean`                             | No       | N/A     | Determines whether the chatbot widget automatically opens when the browser window is opened. This property is being ignored in mobile view.                  |\n| `enableResetHistoryOnConnect`        | `boolean` | No       | `false`    | Determines whether the chatbot widget history is reset when the user connects. |\n| `messageInputControls.blockWhileBotResponding` | `boolean \\| number` | No | N/A | Allows to control enabled/disabled state of the message input for waiting for the bot's reply mesage. If number value is given, a timer will be set to force unblock the message input. |\n| `dateLocale` | `Locale` | No | `enUS` | Locale value to be applied to string values of message timestamp and date separator. Locale values must be imported from `date-fns`.                                                    |\n| `enableHideWidgetForDeactivatedUser` | `boolean` | No       | `false`    | Determines whether the chatbot widget is hidden when the user is deactivated.                                                                                                           |\n| `enableWidgetExpandButton` | `boolean` | No | `false` | Determines whether the expand button is displayed in the chatbot widget. |\n| `messageStackDirection` | `'top' \\| 'bottom'` | No | `'bottom'` | Determines direction at which message stack starts in the message list. |\n\n## For internal contributors\n- [Release guide](./release-guide.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsendbird%2Fchat-ai-widget","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsendbird%2Fchat-ai-widget","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsendbird%2Fchat-ai-widget/lists"}