--- title: UI snippets description: Add AI Search to your website using pre-built, customizable web components for search and chat. image: https://edgetunnel-b2h.pages.dev/dev-products-preview.png --- > Documentation Index > Fetch the complete documentation index at: https://edgetunnel-b2h.pages.dev/ai-search/llms.txt > Use this file to discover all available pages before exploring further. [Skip to content](#%5Ftop) # UI snippets You can add AI Search easily into your website using the [Cloudflare AI Search UI snippet library ↗](https://search.ai.cloudflare.com/), which provides production-ready, customizable web components. The library is open source at [github.com/cloudflare/ai-search-snippet ↗](https://github.com/cloudflare/ai-search-snippet). ## Available components The snippet library provides four web components. Each component connects to your AI Search instance using the `api-url` attribute, which should point to your public endpoint URL. | Component | Description | | ---------------------- | ----------------------------------------------------------- | | | An inline search bar that displays results in a dropdown | | | A search modal that opens with Cmd/Ctrl+K keyboard shortcut | | | A floating chat bubble in the corner of the page | | | A full-page chat interface with conversation history | For advanced styling and configuration, visit [search.ai.cloudflare.com ↗](https://search.ai.cloudflare.com/). ## Prerequisites UI snippets connect to your AI Search instance through a public endpoint. You need to enable this endpoint before using the snippets. 1. Go to **AI Search** in the Cloudflare dashboard. [ Go to **AI Search** ](https://dash.cloudflare.com/?to=/:account/ai/ai-search) 2. Select your AI Search instance. 3. Go to **Settings** \> **Public Endpoint**. 4. Turn on **Enable Public Endpoint**. 5. Copy the public endpoint URL. You will use this as the `api-url` attribute in your snippets. ## Use with HTML 1. Add the script tag to your HTML file (for example, `index.html`). Replace `` with your AI Search instance's public endpoint ID, which you can find in your AI Search instance's **Settings** \> **Public Endpoint**. ```html ``` 2. Add a component with your `api-url`. ```html ``` 3. Before testing, [configure CORS](#configure-cors-for-local-testing) to allow your local origin. Then open the HTML file in your browser to test. ### Full HTML example The following example shows a complete HTML page with a search bar. When a user types in the search bar, results appear in a dropdown below. ```html ``` ## Use with a framework * [ React ](#tab-panel-7219) * [ Vue ](#tab-panel-7220) 1. Open your React project and install the package: ```bash npm install @cloudflare/ai-search-snippet ``` 2. In your component file (for example, `src/App.tsx`), import the package: ```tsx import "@cloudflare/ai-search-snippet"; ``` 3. Add a component to your JSX: ```tsx export default function App() { return ( ); } ``` 4. Before testing, [configure CORS](#configure-cors-for-local-testing) to allow your local origin. Then run your development server: ```bash npm run dev ``` The package includes TypeScript types and works with React, Next.js, and other React frameworks. 1. Open your Vue project and install the package: ```bash npm install @cloudflare/ai-search-snippet ``` 2. In your component file (for example, `src/App.vue`), import the package and add the component: ```vue ``` 3. Before testing, [configure CORS](#configure-cors-for-local-testing) to allow your local origin. Then run your development server: ```bash npm run dev ``` ## Configure a component Each component accepts attributes that control its behavior. Common attributes include: | Attribute | Description | | ------------- | ----------------------------------------------------------- | | api-url | Required. Your instance's public endpoint URL. | | placeholder | Placeholder text for the input. | | max-results | Maximum number of results to request. | | theme | light, dark, or auto (default) to follow the system theme. | | hide-branding | Hide the Cloudflare branding. | | translations | Override the user-facing strings to localize the component. | The chat components (`` and ``) also accept `chat-query-rewrite` to rewrite follow-up messages into standalone queries. For the complete list of attributes and a live editor that generates the HTML, React, or Vue code for you, use the [snippet playground ↗](https://search.ai.cloudflare.com/). ## Customize the appearance Style the components with CSS custom properties, all prefixed with `--search-snippet-`. Set them on the component or a parent element: ```css search-bar-snippet { --search-snippet-primary-color: #f6821f; --search-snippet-border-radius: 12px; } ``` The [playground ↗](https://search.ai.cloudflare.com/) lists every available variable and previews your changes live. ## Configure CORS for local testing When testing locally (for example, `http://localhost:3000`), you need to allow your local origin in the public endpoint settings. 1. Go to **AI Search** in the Cloudflare dashboard. [ Go to **AI Search** ](https://dash.cloudflare.com/?to=/:account/ai/ai-search) 2. Select your AI Search instance. 3. Go to **Settings** \> **Public Endpoint**. 4. Under **Authorized hosts**, add your local URL (for example, `http://localhost:3000`) or `*` to allow all origins during testing. 5. Select **Save**. ```json {"@context":"https://schema.org","@type":"TechArticle","@id":"https://edgetunnel-b2h.pages.dev/ai-search/configuration/retrieval/embed-search-snippets/#page","headline":"UI snippets · Cloudflare AI Search docs","description":"Add AI Search to your website using pre-built, customizable web components for search and chat.","url":"https://edgetunnel-b2h.pages.dev/ai-search/configuration/retrieval/embed-search-snippets/","inLanguage":"en","image":"https://edgetunnel-b2h.pages.dev/dev-products-preview.png","dateModified":"2026-07-08","publisher":{"@type":"Organization","name":"Cloudflare","url":"https://www.cloudflare.com/"},"isPartOf":{"@type":"WebSite","@id":"https://edgetunnel-b2h.pages.dev/#website","name":"Cloudflare Docs","url":"https://edgetunnel-b2h.pages.dev/"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"/directory/","name":"Directory"}},{"@type":"ListItem","position":2,"item":{"@id":"/ai-search/","name":"AI Search"}},{"@type":"ListItem","position":3,"item":{"@id":"/ai-search/configuration/","name":"Configuration"}},{"@type":"ListItem","position":4,"item":{"@id":"/ai-search/configuration/retrieval/","name":"Retrieval"}},{"@type":"ListItem","position":5,"item":{"@id":"/ai-search/configuration/retrieval/embed-search-snippets/","name":"UI snippets"}}]} ```