🤖

Bring Your Own Chatbot (BYOC) Demo

This demo shows how websites can integrate with your own AI chatbot instead of embedding their own AI. Click the chat button in the corner to try it!

← Back to Demos

📋 How BYOC Works

1
Website Declares MCP Server

This page has <link rel="mcp-server" href="http://localhost:3001/mcp"> in its <head>. The browser can detect this and show an indicator (like RSS did).

2
User Clicks "Chat with AI"

Website requests permission via agent.requestPermissions() then creates a chat session with window.ai.createTextSession().

3
Browser Asks for Permission

Your browser shows a permission prompt listing the tools the website wants to provide. You decide to allow or deny.

4
AI Responds with Website Context

If you allow, the AI assistant responds using session.promptStreaming() with knowledge of the shop's products.

Welcome to Acme Shop

Find the perfect products with help from your AI assistant. Click the chat button to get personalized recommendations!

🎧
Wireless Headphones Pro
$149.99
⭐⭐⭐⭐⭐ (128 reviews)
⌚
Smart Watch Series X
$299.99
⭐⭐⭐⭐ (89 reviews)
💻
Ergonomic Laptop Stand
$59.99
⭐⭐⭐⭐⭐ (256 reviews)
⌨️
Mechanical Keyboard RGB
$129.99
⭐⭐⭐⭐ (64 reviews)
📷
HD Webcam 4K
$89.99
⭐⭐⭐⭐⭐ (192 reviews)
🔌
USB-C Hub 7-in-1
$49.99
⭐⭐⭐⭐ (156 reviews)