[opensourcedex]

BotFramework-WebChat is a free, open source ai interaction & interfaces project written in HTML and released under MIT. It has 1,785 GitHub stars, 1,601 forks and 523 open issues, and was last pushed 3 days ago. On this registry it ranks #100 of 135 tracked projects in AI Interaction & Interfaces, with 5 head-to-head comparisons available.

What is BotFramework-WebChat?

Bot Framework Web Chat is an MIT-licensed, highly-customizable web-based chat client, published on npm as botframework-webchat, that lets web developers embed a conversational interface into their own sites and connect it to bots built with the Microsoft Bot Framework v4 SDK.

What it is

Bot Framework Web Chat is the client component of the Microsoft Bot Framework, described in its own README as "a highly-customizable web-based client for the Bot Framework v4 SDK." It sits in the AI & Machine Learning category, under AI Interaction & Interfaces, and is written primarily in HTML. The Bot Framework SDK v4 enables developers to model conversation and build sophisticated bot applications, and Web Chat is the piece that renders that conversation inside a web page rather than inside a vendor-hosted channel or widget.

The concrete problem it solves is control of the chat surface. Teams that already run a Bot Framework v4 bot need a front end they own, and Web Chat supplies that front end as a component imported into their own application. It replaces the default, unbrandable chat chrome typical of hosted channels: theming, adaptive card rendering, file upload behaviour, and the security posture of the page are all things the developer sets. The README notes that the Bot Framework SDK was archived on GitHub in December 2025, while this Web Chat component specifically is not archived and remains available under the licences covered in the readme.

Key capabilities

  • Exports as both ES Modules (named exports) and CommonJS (named and unnamed exports), introduced in version 4.17.0.
  • Supports livestreaming bot responses, with version 4.19.0 adding an informative message to the livestreaming experience; details live in docs/LIVESTREAMING.md.
  • Theme pack support lets developers pack all customization into a single package and publish it to npm.
  • An experimental Fluent UI theme pack, imported as FluentThemeProvider from botframework-webchat-fluent-theme, targets a native Copilot user experience with intended parity between white-label and Fluent UI styling.
  • File upload flow lets the end user add a message and confirm before the file is sent, with opt-out through sendAttachmentOn: 'send'.
  • Content Security Policy support, documented in docs/CONTENT_SECURITY_POLICY.md, which the README recommends enabling to protect conversations.
  • Renders HTML-in-Markdown, with the sanitizer and accessibility fixer ported to operate at the HTML level.

Who uses it and how

  • Web developers embedding conversational UI into existing applications by importing ReactWebChat from botframework-webchat.
  • Teams building enterprise-grade conversational AI on the Microsoft Bot Framework stack.
  • Bot authors who need livestreamed responses ahead of SDK support, following LIVESTREAMING.md to construct those responses.
  • Developers who want white-label or Copilot-style branding from one codebase, packaging either as a theme pack.
  • Security-conscious deployments that enable CSP, as the README advises.

Getting started

Install and use the npm package botframework-webchat, then import the component with import ReactWebChat from 'botframework-webchat'. The README advises selecting minor versions with the ~ tilde range, which carries new features and fixes, and major versions with the ^ caret range, which may contain breaking changes.

How it compares

The facts provide no list of paid products that this project replaces, and they name no comparable open-source chat clients. Within this registry it stands alone.

When to use it — and when not to

A self-hoster must operate the bot side themselves: Web Chat is a client component, and the facts name no hosted option, database, or storage layer that ships with it. Anyone starting fresh should weigh the upstream Bot Framework SDK, archived on GitHub in December 2025, even though this component itself is not archived. The repository also carries 523 open issues, so teams expecting a quiet backlog should look elsewhere.

project readme (upstream, from github) — read inline

Bot Framework Web Chat

Click here to find out what is new in Web Chat

Bot Framework Web Chat

npm version Build Status

This repository contains code for the Bot Framework Web Chat component. The Bot Framework Web Chat component is a highly-customizable web-based client for the Bot Framework v4 SDK. The Bot Framework SDK v4 enables developers to model conversation and build sophisticated bot applications.

This repository is part of the Microsoft Bot Framework - a comprehensive framework for building enterprise-grade conversational AI experiences.

Web Chat supports Content Security Policy (CSP). Web developers are recommended to enable CSP to improve security and protect conversations. You can read more about CSP in this article.

Note: The Bot Framework SDK was archived on GitHub on December 2025. This Web Chat component specifically is not archived, and still is available on GitHub as under the related licences covered in this readme.

Version notes

This section points out important version notes. For further information, please see the related links and check the CHANGELOG.md

Our achievements

Notes: web developers are advised to use ~ (tilde range) to select minor versions, which contains new features and/or fixes. Use ^ (caret range) to select major versions, which may contains breaking changes.

4.19.0 notable changes

4.18.0 notable changes

In this release, we are focusing on performance improvements, including memory and load time optimizations.

4.17.0 notable changes

Support livestreaming response

Bots can now livestream their responses. Before Bot Framework SDK support this feature, bot authors can follow the details in LIVESTREAMING.md to construct the livestream responses.

Debut of ES Modules

Web Chat now exports as ES Modules (named exports) along with CommonJS (named and unnamed exports).

Improvement to file upload experience

End-user can now add a message and confirm before uploading their file to the bot. To opt-out of the new experience, pass sendAttachmentOn: 'send' in style options.

Theme pack support

We are excited to add theme pack support. Developers can now pack all their customization in a single package and publish it to NPM.

Experimental Fluent UI theme pack

We are excited to announce Fluent UI theme pack is in the work and is currently in experimental phase. This theme pack is designed for web developers who want to bring a native Copilot user experience to their customers.

We will continue to add new features and support both white-label experience and Fluent UI experience with the same level of parity.

You can wrap Web Chat with `` to try out the new experience.

import ReactWebChat from 'botframework-webchat';
import { FluentThemeProvider } from 'botframework-webchat-fluent-theme';

export default function MyComponent() {
   return (
      <FluentThemeProvider>
         <ReactWebChat />
      </FluentThemeProvider>
   );
}
Support HTML-in-Markdown

Web Chat will now render HTML-in-Markdown. We have ported our sanitizer and accessibility fixer to work on HTML level. Both Markdown and HTML-in-Markdown will receive the same treatment and meet our security and accessibility requirements.

You can turn off this option by setting styleOptions.markdownRenderHTML to false.

4.16.1 notable changes

Web Chat now supports Adaptive Cards schema up to 1.6. Some features in Adaptive Cards are in preview or designed to use outside of Bot Framework. Web Chat does not support these features.

4.16.0 notable changes

Starting from 4.16.0, Internet Explorer is no longer supported. After more than a year of the Internet Explorer 11 officially retirement, we decided to stop supporting Internet Explorer. This will help us to bring new features to Web Chat. 4.15.9 is the last version which supports Internet Explorer in limited fashion.

4.12.1 patch: New style property adaptiveCardsParserMaxVersion

Web Chat 4.12.1 patch includes a new style property allowing developers to choose the max Adaptive Cards schema version. See PR #3778 for code changes.

To specify a different max version, you can adjust the style options, shown below:

window.WebChat.renderWebChat(
   {
      directLine,
      store,
      styleOptions: {
         adaptiveCardsParserMaxVersion: '1.2'
      }
   },
   document.getElementById('webchat')
);
  • Web Chat will apply the maximum schema available according to the Adaptive Cards version (as of this patch, schema 1.3) by default.
  • An invalid version will revert to Web Chat's default.

Visual focus changes to transcript in Web Chat 4.12.0

A new accessibility update has been added to Web Chat from PR #3703. This change creates visual focus for the transcript (bold black border) and aria-activedescendent focused activity (black dashed border) by default. Where applicable, transcriptVisualKeyboardIndicator... values will also be applied to carousel (CarouselFilmStrip.js) children. This is done in order to match current default focus styling for Adaptive Cards, which may be a child of a carousel.

To modify these styles, you can change the following props via styleOptions:

  transcriptActivityVisualKeyboardIndicatorColor: DEFAULT_SUBTLE,
  transcriptActivityVisualKeyboardIndicatorStyle: 'dashed',
  transcriptActivityVisualKeyboardIndicatorWidth: 1,
  transcriptVisualKeyboardIndicatorColor: 'Black',
  transcriptVisualKeyboardIndicatorStyle: 'solid',
  transcriptVisualKeyboardIndicatorWidth: 2,

The above code shows the default values you will see in Web Chat.

API refactor into new package in Web Chat 4.11.0

The Web Chat API has been refactored into a separate package. To learn more, check out the API refactor summary.

Direct Line Speech support in Web Chat 4.7.0

Starting from Web Chat 4.7.0, Direct Line Speech is supported, and it is the preferred way to provide an integrated speech functionality in Web Chat. We are working on closing feature gaps between Direct Line Speech and Web Speech API (includes Cognitive Services and browser-provided speech functionality).

Upgrading to 4.6.0

Starting from Web Chat 4.6.0, Web Chat requires React 16.8.6 or up.

Although we recommend that you upgrade your host app at your earliest convenience, we understand that host app may need some time before its React dependencies are updated, especially in regards to huge applications.

If your app is not ready for React 16.8.6 yet, you can follow the hybrid React sample to dual-host React in your app.

Speech changes in Web Chat 4.5.0

There is a breaking change on behavior expectations regarding speech and input hint in Web Chat. Please refer to the section on input hint behavior before 4.5.0 for details.

Migrating from Web Chat v3 to v4

View migration docs to learn about migrating from Web Chat v3.

How to use

First, create a bot using Azure Bot Service. Once the bot is created, you will need to [obtain the bot's Web Chat secret](https://docs.microsoft.com/en-us/azure/bot-service/bot-service-channel-connect-webchat?vi

readme truncated — read the full docs on github

Frequently asked questions

Is BotFramework-WebChat free to use?

BotFramework-WebChat is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does BotFramework-WebChat do?

A highly-customizable web-based client for Azure Bot Services.

What is BotFramework-WebChat written in?

BotFramework-WebChat is primarily written in HTML. Its source is publicly available at https://github.com/microsoft/BotFramework-WebChat, and it has 1,785 GitHub stars.