🤖 SMI Chat Web Component

AI-Powered Conversational Assistant

Cloudflare Pages CDN

📱 Live Demo

Try the SMI Chat web component below. This is a fully functional AI chat interface powered by the SMI agent, deployed via Cloudflare Pages CDN.

🚀 Quick Start

Add the SMI Chat component to your website in three simple steps:

1. Include the script from CDN

<script src="https://smi-chat.pages.dev/smi-chat.umd.js"></script>

2. Add the web component

<smi-chat
  chat-url="https://your-smi-agent.com/chat"
  intro="How can I help you today?">
</smi-chat>

3. Customize with CSS (optional)

<style>
  smi-chat {
    --bg-primary: #ffffff;
    --btn-bg-primary: #667eea;
    width: 100%;
    max-width: 600px;
    height: 600px;
  }
</style>

✨ Features

🎨 Shadow DOM

Complete style isolation - won't interfere with your existing CSS

⚡ Real-time Streaming

SSE-powered streaming for instant AI responses

🔒 Security Built-in

XSS protection with DOMPurify and HTTPS enforcement

🌍 Global CDN

Deployed on Cloudflare's network for sub-100ms latency

📱 Responsive

Works perfectly on desktop, tablet, and mobile devices

🎯 Zero Dependencies

Just drop in - no React, Vue, or framework required

⚙️ Configuration

Available attributes for the <smi-chat> element:

Attribute Required Description
chat-url ✅ Yes URL of your SMI agent chat endpoint
intro ❌ No Welcome message shown to users
pre-prompt ❌ No System context for the AI assistant