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>

Open your React project and install the package:
Terminal window
```
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:
Terminal window
```
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:
Terminal window
```
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:
Terminal window
```
npm run dev
```

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.