OpenClawChat

Web-based chat UI channel for OpenClaw. Embeddable widget with streaming, markdown rendering, and tool visibility.

OpenClawChat is a web-based chat UI channel plugin for OpenClaw that provides an embeddable chat widget with streaming responses, markdown rendering, and tool execution visibility. Designed for developers who want to expose their OpenClaw agent as a chat interface on websites, internal tools, or custom applications without building a UI from scratch. The plugin registers as a channel in OpenClaw's channel system, meaning it follows the same session routing, message handling, and delivery patterns as Telegram, WhatsApp, or any other channel. Messages sent through the OpenClawChat widget flow through the gateway, get processed by the configured AI model, and stream back with full markdown rendering and visibility into tool calls. This makes it possible to build customer-facing AI chatbots, internal support tools, or documentation assistants that are powered by your OpenClaw agent's full capabilities. As a community-maintained plugin with the @openclawchat/channel npm package, it complements OpenClaw's built-in WebChat (which is a native SwiftUI/gateway UI for personal use) by providing an embeddable, customizable web component. The widget approach means you can drop it into any webpage with a script tag or import it into React/Vue/Svelte applications. It's marked as featured in ClawPedia due to its potential for making OpenClaw accessible to end users who don't use messaging apps. Best suited for developers embedding AI chat on websites or building custom frontends for OpenClaw agents. Not recommended as a primary personal channel — use Telegram, WhatsApp, or the built-in WebChat for that. The 0 weekly downloads likely reflects very recent publication or a different distribution method.

Tags: ui, chat, web, channel

Use Cases

Embeddable AI chatbot on company websites for customer support
Internal tools with AI assistant capabilities accessible via browser
Documentation sites with an AI-powered 'Ask a Question' widget
Custom web applications that need a chat interface to OpenClaw agents
Demo/showcase interface for OpenClaw agent capabilities

Tips

Use CORS allowlisting to restrict which domains can connect to your OpenClaw gateway through the widget
Add authentication in your application layer before exposing the chat widget to end users
Disable tool visibility for customer-facing deployments — they don't need to see internal tool calls
Test with the built-in WebChat first to verify your agent works correctly before adding the embeddable widget
Consider OpenClaw Studio for internal management and OpenClawChat for external-facing use
Monitor the npm package page for version updates — early-stage plugins evolve quickly

Known Issues & Gotchas

Don't confuse this with OpenClaw's built-in WebChat — OpenClawChat is an embeddable widget plugin, WebChat is the native gateway UI
CORS must be configured correctly if the widget is on a different domain than the OpenClaw gateway
The 0 download count may mean the package is unpublished, pre-release, or distributed through a different channel — verify availability before planning around it
Tool visibility in the widget may expose sensitive operations — disable for public-facing deployments if needed
The 'latest' version tag instead of a specific version number suggests the package may not follow standard versioning yet
No built-in rate limiting on the widget side — implement your own for public deployments

Alternatives

OpenClaw WebChat (built-in)
OpenClaw Studio
openclaw-node + custom UI
Telegram/WhatsApp channels

Community Feedback

WebChat is a native chat UI for the gateway. Uses the same sessions and routing rules as other channels. Deterministic routing: replies always go back to WebChat.
— OpenClaw Docs

Now you can chat with OpenClaw through the web dashboard, but the REAL magic is chatting through your regular messaging apps!
— Reddit r/AiForSmallBusiness

chat.inject appends an assistant note to the session transcript and broadcasts a chat event for UI-only updates — no agent run, no channel delivery.
— OpenClaw Docs (Control UI)

Frequently Asked Questions

How is OpenClawChat different from the built-in WebChat?

The built-in WebChat is a native SwiftUI/gateway chat UI designed for personal use (macOS/iOS app or Control UI tab). OpenClawChat is an embeddable web widget you can add to any website, making OpenClaw accessible to your users without them needing the OpenClaw app.

Why does this plugin show 0 weekly downloads?

The package may be very recently published, in pre-release, or distributed through a method other than standard npm install (like a CDN script tag). The 'latest' version tag and 'featured' status suggest it's an endorsed project that may still be in early rollout.

Can I customize the appearance of the chat widget?

The widget supports theming and positioning configuration. You can adjust colors, position (bottom-right, bottom-left), and visibility of tool calls. For deep customization, consider building a custom UI with openclaw-node instead.

Is this suitable for customer-facing deployments?

It can be, with proper configuration. Disable tool visibility so end users don't see internal operations, add CORS restrictions, implement rate limiting, and handle authentication in your application layer. The widget itself doesn't include auth.

Do I need a separate server for the widget?

No. The OpenClawChat channel plugin runs on the OpenClaw gateway itself (on a configurable port). The widget JavaScript is served directly from this endpoint. Your website just needs to include the script tag pointing to your OpenClaw host.

Configuration Examples

Basic widget setup

# Install:
openclaw plugins install @openclawchat/channel

# Configuration (openclaw.yaml):
channels:
  openclawchat:
    enabled: true
    port: 8090

Embed on a website

<!-- Add to your HTML: -->
<script src="https://your-openclaw-host:8090/widget.js"></script>
<script>
  OpenClawChat.init({
    endpoint: 'https://your-openclaw-host:8090',
    theme: 'light',
    position: 'bottom-right'
  });
</script>

Production configuration with CORS

channels:
  openclawchat:
    enabled: true
    port: 8090
    corsOrigins:
      - "https://your-website.com"
    toolVisibility: false
    rateLimit:
      maxPerMinute: 20

Installation

openclaw plugins install @openclawchat/channel