--- title: UI snippets description: You can add AI Search easily into your website using the Cloudflare AI Search UI snippet library, which provides production-ready, customizable web components. image: https://developers.cloudflare.com/dev-products-preview.png --- [Skip to content](#%5Ftop) Was this helpful? YesNo [ Edit page ](https://github.com/cloudflare/cloudflare-docs/edit/production/src/content/docs/ai-search/configuration/retrieval/embed-search-snippets.mdx) [ Report issue ](https://github.com/cloudflare/cloudflare-docs/issues/new/choose) Copy page # 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**. ``` ``` 2. Add a component with your `api-url`. ``` ``` 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. ``` ``` Explain Code ## Use with a framework * [ React ](#tab-panel-5131) * [ Vue ](#tab-panel-5132) 1. Open your React project and install the package: Terminal window ``` npm install @cloudflare/ai-search-snippet ``` 2. In your component file (for example, `src/App.tsx`), import the package: ``` import "@cloudflare/ai-search-snippet"; ``` 3. Add a component to your JSX: ``` 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: Terminal window ``` 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: Terminal window ``` npm install @cloudflare/ai-search-snippet ``` 2. In your component file (for example, `src/App.vue`), import the package and add the component: ``` ``` 3. Before testing, [configure CORS](#configure-cors-for-local-testing) 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. 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":"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"}}]} ```