UI snippets

Last updated Aug 6, 2026 You can add AI Search easily into your website using the Cloudflare AI Search UI snippet library ↗︎, which provides production-ready, customizable web components.

The library is open source at 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
<search-bar-snippet> An inline search bar that displays results in a dropdown
<search-modal-snippet> A search modal that opens with Cmd/Ctrl+K keyboard shortcut
<chat-bubble-snippet> A floating chat bubble in the corner of the page
<chat-page-snippet> A full-page chat interface with conversation history

For advanced styling and configuration, visit 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 ↗
  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 <PUBLIC_ENDPOINT_ID> with your AI Search instance's public endpoint ID, which you can find in your AI Search instance's Settings > Public Endpoint.

```html

```

  1. Add a component with your api-url.

```html <search-bar-snippet api-url="https://.search.ai.cloudflare.com/" placeholder="Search..."

```

  1. Before testing, configure CORS 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.

<!doctype html>
<html>
    <head>
        <script
            type="module"
            src="https://<PUBLIC_ENDPOINT_ID>.search.ai.cloudflare.com/assets/v0.0.25/search-snippet.es.js"
        ></script>
    </head>
    <body>
        <search-bar-snippet
            api-url="https://<PUBLIC_ENDPOINT_ID>.search.ai.cloudflare.com/"
            placeholder="Search..."
            max-results="10"
        ></search-bar-snippet>
    </body>
</html>

Use with a framework

  1. Open your React project and install the package:

bash npm install @cloudflare/ai-search-snippet

  1. In your component file (for example, src/App.tsx), import the package:

tsx import "@cloudflare/ai-search-snippet";

  1. Add a component to your JSX:

tsx export default function App() { return ( <search-bar-snippet api-url="https://<PUBLIC_ENDPOINT_ID>.search.ai.cloudflare.com/" placeholder="Search..." /> ); }

  1. Before testing, configure CORS 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

  1. In your component file (for example, src/App.vue), import the package and add the component:

```vue

```

  1. Before testing, configure CORS 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 (<chat-bubble-snippet> and <chat-page-snippet>) 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 ↗︎.

Customize the appearance

Style the components with CSS custom properties, all prefixed with --search-snippet-. Set them on the component or a parent element:

search-bar-snippet {
    --search-snippet-primary-color: #f6821f;
    --search-snippet-border-radius: 12px;
}

The playground ↗︎ 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 ↗
  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.

When you deploy, replace * with your production origin so that other sites cannot embed your search components. Allowed origins are a browser control, not an access control, so this does not stop a direct request from curl or a script. To restrict who can query the endpoint, refer to Cloudflare Access.

Was this helpful?

YesNo

On this page

UI snippets - 图1Docs

{"@context":"https://schema.org","@type":"TechArticle","@id":"https://developers.cloudflare.com/ai-search/configuration/retrieval/public-endpoint/embed-search-snippets/#page","headline":"UI snippets","description":"Add AI Search to your website using pre-built, customizable web components for search and chat.","url":"https://developers.cloudflare.com/ai-search/configuration/retrieval/public-endpoint/embed-search-snippets/","inLanguage":"en","image":"https://developers.cloudflare.com/ai-search/configuration/retrieval/public-endpoint/embed-search-snippets/og.png?v=f7e449bfe724e482","dateModified":"2026-08-06","publisher":{"@type":"Organization","name":"Cloudflare","description":"One platform for your apps, agents, and workforce. Build, secure, and scale without managing infrastructure","url":"https://www.cloudflare.com/","sameAs":["https://github.com/cloudflare","https://www.linkedin.com/company/cloudflare","https://x.com/cloudflare"],"logo":{"@type":"ImageObject","url":"https://developers.cloudflare.com/logo.svg"},"address":{"@type":"PostalAddress","streetAddress":"101 Townsend St","addressLocality":"San Francisco","addressRegion":"CA","postalCode":"94107","addressCountry":"US"},"contactPoint":[{"@type":"ContactPoint","contactType":"Customer Support","url":"https://support.cloudflare.com/","availableLanguage":["English"]},{"@type":"ContactPoint","contactType":"Sales","url":"https://www.cloudflare.com/contact/","availableLanguage":["English"]}]},"isPartOf":{"@type":"WebSite","@id":"https://developers.cloudflare.com/#website","name":"Cloudflare Docs","url":"https://developers.cloudflare.com/"}}

description: Expose several AI Search instances through a single public endpoint scoped to a namespace. title: Namespace public endpoints image: https://developers.cloudflare.com/ai-search/configuration/retrieval/public-endpoint/namespace/og.png?v=f40ee0336faa3652

Skip to content

Documentation Index
Fetch the complete documentation index at: https://developers.cloudflare.com/ai-search/llms.txt
Use this file to discover all available pages before exploring further.