UI snippets

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.

Go to AI Search in the Cloudflare dashboard.
Go to AI Search ↗
Select your AI Search instance.
Go to Settings > Public Endpoint.
Turn on Enable Public Endpoint.
Copy the public endpoint URL. You will use this as the api-url attribute in your snippets.

Use with HTML

Add the script tag to your HTML file (for example, index.html). Replace <INSTANCE_ID> with your AI Search instance's public endpoint ID, which you can find in your AI Search instance's Settings > Public Endpoint.
```
<script
	type="module"
	src="https://<INSTANCE_ID>.search.ai.cloudflare.com/assets/v0.0.25/search-snippet.es.js"
></script>
```

Add a component with your api-url.

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

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://<INSTANCE_ID>.search.ai.cloudflare.com/assets/v0.0.25/search-snippet.es.js"
		></script>
	</head>
	<body>
		<search-bar-snippet
			api-url="https://<INSTANCE_ID>.search.ai.cloudflare.com/"
			placeholder="Search..."
			max-results="10"
		></search-bar-snippet>
	</body>
</html>

Use with a framework

Open your React project and install the package:
```
npm install @cloudflare/ai-search-snippet
```
In your component file (for example, src/App.tsx), import the package:
```
import "@cloudflare/ai-search-snippet";
```

Add a component to your JSX:

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

Before testing, configure CORS to allow your local origin. Then run your development server:
```
npm run dev
```

The package includes TypeScript types and works with React, Next.js, and other React frameworks.

Open your Vue project and install the package:
```
npm install @cloudflare/ai-search-snippet
```

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

<template>
	<search-bar-snippet :api-url="apiUrl" placeholder="Search..." />
</template>

<script setup>
import "@cloudflare/ai-search-snippet";

const apiUrl = "https://<INSTANCE_ID>.search.ai.cloudflare.com/";
</script>

Before testing, configure CORS to allow your local origin. Then run your development server:
```
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.

Go to AI Search in the Cloudflare dashboard.
Go to AI Search ↗
Select your AI Search instance.
Go to Settings > Public Endpoint.
Under Authorized hosts, add your local URL (for example, http://localhost:3000) or * to allow all origins during testing.
Select Save.