Ai Search Snippet

🔍 Search Snippet Library

A production-ready, self-contained TypeScript Web Component library providing both search and chat interfaces with streaming support. Zero dependencies, fully customizable, and framework-agnostic.

✨ Features

• 🎨 Fully Customizable - 20+ CSS variables for complete theme control
• ⚡ Zero Dependencies - Self-contained with everything bundled
• 📱 Responsive Design - Works seamlessly on all devices
• 🎭 Framework Agnostic - Native Web Components work everywhere
• ♿ Accessible - WCAG 2.1 AA compliant with ARIA support
• 🚀 Streaming Support - Real-time streaming responses with low latency
• 🌓 Dark Mode - Automatic theme switching based on system preferences
• 📦 Tiny Bundle - Optimized for minimal size (< 50KB gzipped)
• 🔒 Secure - XSS protection with HTML sanitization
• ⚙️ TypeScript - Full type definitions included

🚀 Quick Start

**Note:** This library requires an active AI Search endpoint in your Cloudflare Dashboard. Make sure to enable and configure your AI Search service before using these components.

Installation

npm install @cloudflare/ai-search-snippet
# or
yarn add @cloudflare/ai-search-snippet

Basic Usage

**Note:** Replace `` with your Cloudflare AI Search endpoint hash (you can find it in the Cloudflare Dashboard).

/search.ai.cloudflare.com/search-snippet.es.js"
>


/search.ai.cloudflare.com/"
  placeholder="Search..."
  max-results="50"
  max-render-results="10"
  show-url="true"
  show-date="true"
>



/search.ai.cloudflare.com/"
  placeholder="Search documentation..."
  max-results="50"
  max-render-results="10"
  show-url="true"
  show-date="true"
>