microsoft/BotFramework-WebChat
A highly-customizable web-based client for Azure Bot Services.
What is Bot Framework Web Chat?
Bot Framework Web Chat is a ready‑to‑use, highly‑customizable web UI that lets you embed a Microsoft Bot Framework bot into any website. It sits on top of the Bot Framework Direct Line (and Direct Line Speech) channels, handling the UI, activity rendering, file upload, speech, adaptive cards, and other conversation features while you focus on the bot’s logic.
Who would use it?
- Web developers who want to add a chat window to a site without building a UI from scratch.
- Bot creators on Azure Bot Service who need a secure, embeddable front‑end.
- Product teams that want to theme the chat (including a Fluent UI theme) or replace parts of the UI with React components.
Core capabilities (as described in the README)
| Feature | What it means |
|---|---|
| Direct Line integration | Connects the UI to a bot via a token (generated from the bot’s secret). |
| Direct Line Speech | Built‑in speech‑to‑text / text‑to‑speech using Azure Speech Services. |
| Livestreaming responses | Bots can stream partial replies as they are generated. |
| Adaptive Cards v1.6 | Renders rich card UI; version can be limited via adaptiveCardsParserMaxVersion. |
| Theme packs | Publish a whole set of style customizations as an NPM package; experimental Fluent UI theme pack mimics Copilot‑style look. |
| HTML‑in‑Markdown | Markdown can contain safe HTML; can be disabled with styleOptions.markdownRenderHTML. |
| Accessibility | Visual focus indicators, ARIA support, and a dedicated accessibility guide. |
| Customization | Via CDN bundle (simple CSS/JS) or React package (full component recomposition, custom renderers, Redux DevTools). |
| Browser support | Modern browsers (latest two versions of Chrome, Edge, Firefox). IE 11 support dropped after v4.16. |
| Security | Encourages Content‑Security‑Policy; recommends token‑based auth instead of exposing the bot secret. |
How to get started (quick steps from the README)
- Create a bot in Azure Bot Service.
- Obtain the Web Chat secret from the Azure portal and exchange it for a Direct Line token.
- Add the script (or install the NPM package) to your page.
- Call
WebChat.renderWebChat({ directLine: WebChat.createDirectLine({ token }) }, element)(or use the React<ReactWebChat>component). - Optionally customize colors, sizes, CSS, or replace components via the React API.
Where to find more information
- CHANGELOG.md – detailed version‑by‑version changes.
- docs/ – API reference, migration guide, accessibility, localization, telemetry, and speech docs.
- samples/ – ready‑made examples for CDN bundle, React host, ES5 bundle, and custom theme packs.
- NPM – package
botframework-webchat(full‑feature bundle) andbotframework-webchat-fluent-themefor the Fluent UI theme.
TL;DR
Bot Framework Web Chat is a Microsoft‑maintained, production‑grade web client for Azure Bot Framework bots. It provides out‑of‑the‑box UI, speech, adaptive cards, theming, and deep React‑level customization, all while encouraging secure token‑based authentication and modern browser usage.
Related
- Project
- Project
- Project
- Project