A minimal Copilot Studio webchat built with React (Composer pattern) and published as a <chat-widget> web component. Drop a single <script> tag into any page to embed a chat interface.

Built on top of copilot-widget.

Your backend needs to exchange the Direct Line secret for a token. See copilot-widget/server for helpers.

<script type="module" src="https://your-cdn.example.com/webchat-widget.js"></script>

<chat-widget
  token-endpoint="/api/copilot/token"
  style="width: 400px; height: 600px;"
></chat-widget>

That's it. The script auto-registers the <chat-widget> custom element.

Style via CSS custom properties on the element:

chat-widget {
  --chat-user-bg: #00543e;
  --chat-user-color: #ffffff;
  --chat-bot-bg: #f5f5f5;
  --chat-bot-color: #1a1a1a;
  --chat-border: #e0e0e0;
  --chat-radius: 12px;
  --chat-font: "Inter", system-ui, sans-serif;
  --chat-font-size: 14px;
}

npm install
npm run dev        # Watch mode
npm run build      # Production build
npm run typecheck  # Type check

The build produces a single self-contained dist/webchat-widget.js (ESM) that includes React and all dependencies — no external imports needed at runtime.

Open demo.html in a browser (serve via any static file server). Update the token-endpoint to point at your backend.

CopilotProvider          ← manages DirectLine connection & token
  └─ Composer            ← WebChat's <Composer> (no default UI)
       └─ ChatUI         ← minimal custom messages + input
            ↓
    <chat-widget>        ← custom element wrapper (Shadow DOM)

MIT