← Обзор / ai-search / configuration / retrieval / public-endpoint

UI-сниппеты

Вы можете легко добавить AI Search на свой сайт с помощью Библиотека UI-сниппетов Cloudflare AI Search ↗, который предоставляет готовые к продакшену настраиваемые веб-компоненты.

Библиотека с открытым исходным кодом доступна по адресу github.com/cloudflare/ai-search-snippet ↗.

Доступные компоненты

Библиотека сниппетов предоставляет четыре веб-компонента. Каждый компонент подключается к вашему экземпляру AI Search с помощью api-url атрибут, который должен указывать на URL-адрес вашего публичного эндпойнта.

Компонент	Описание
`<search-bar-snippet>`	Встроенная строка поиска, которая показывает результаты в раскрывающемся списке
`<search-modal-snippet>`	Модальное окно поиска, которое открывается с помощью `Cmd/Ctrl+K` сочетание клавиш
`<chat-bubble-snippet>`	Плавающий чат-пузырь в углу страницы
`<chat-page-snippet>`	Полноэкранный интерфейс чата с историей переписки

Дополнительные варианты оформления и настройки см. на search.ai.cloudflare.com ↗.

Предварительные требования

UI-сниппеты подключаются к вашему экземпляру AI Search через публичную конечную точку. Перед использованием сниппетов включите эту конечную точку.

Перейдите в AI Search в Cloudflare dashboard.
Перейдите в AI Search ↗
Выберите свой экземпляр AI Search.
Перейдите в Настройки > Публичная конечная точка.
Включите Включить публичную конечную точку.
Скопируйте URL-адрес публичной конечной точки. Вы будете использовать его как api-url атрибут в ваших сниппетах.

Использовать с HTML

Добавьте тег script в свой HTML-файл (например, index.html). Замените <PUBLIC_ENDPOINT_ID> с ID публичной конечной точки вашего экземпляра AI Search, который можно найти в Настройки > Публичная конечная точка.
```
<script
	type="module"
	src="https://<PUBLIC_ENDPOINT_ID>.search.ai.cloudflare.com/assets/v0.0.25/search-snippet.es.js"
></script>
```

Добавьте компонент со своим api-url.

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

Перед тестированием, настроить CORS чтобы разрешить свой локальный origin. Затем откройте HTML-файл в браузере и протестируйте его.

Полный пример HTML

В следующем примере показана полная HTML-страница с панелью поиска. Когда пользователь вводит запрос в панели поиска, результаты появляются в раскрывающемся списке ниже.

<!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>

Использовать с фреймворком

Откройте свой проект React и установите пакет:
```
npm install @cloudflare/ai-search-snippet
```
В файле компонента (например, src/App.tsx), импортируйте пакет:
```
import "@cloudflare/ai-search-snippet";
```

Добавьте компонент в свой JSX:

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

Перед тестированием, настроить CORS чтобы разрешить свой локальный origin. Затем запустите сервер разработки:
```
npm run dev
```

Пакет включает типы TypeScript и работает с React, Next.js и другими React-фреймворками.

Откройте свой проект Vue и установите пакет:
```
npm install @cloudflare/ai-search-snippet
```

В файле компонента (например, src/App.vue), импортируйте пакет и добавьте компонент:

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

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

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

Перед тестированием, настроить CORS чтобы разрешить свой локальный origin. Затем запустите сервер разработки:
```
npm run dev
```

Настройте компонент

Каждый компонент принимает атрибуты, которые управляют его поведением. К распространённым атрибутам относятся:

Attribute	Описание
`api-url`	Обязательно. URL-адрес публичной конечной точки вашего экземпляра.
`placeholder`	Текст подсказки для поля ввода.
`max-results`	Максимальное количество результатов для запроса.
`theme`	`light`, `dark`, или `auto` (по умолчанию), чтобы соответствовать системной теме.
`hide-branding`	Скройте брендинг Cloudflare.
`translations`	Переопределение пользовательских строк для локализации компонента.

Чат-компоненты (<chat-bubble-snippet> и <chat-page-snippet>) также принимают chat-query-rewrite и таким образом переписывать последующие сообщения в самостоятельные запросы.

Полный список атрибутов и интерактивный редактор, который сгенерирует для вас код на HTML, React или Vue, можно найти с помощью playground сниппетов ↗.

Настройка внешнего вида

Стилизуйте компоненты с помощью пользовательских свойств CSS, каждое из которых имеет префикс --search-snippet-. Задайте их на компоненте или на родительском элементе:

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

playground ↗ показывает все доступные переменные и в реальном времени отображает предпросмотр изменений.

Настройте CORS для локального тестирования

При локальном тестировании (например, http://localhost:3000), вам нужно разрешить ваш локальный origin в настройках публичной конечной точки.

Перейдите в AI Search в Cloudflare dashboard.
Перейдите в AI Search ↗
Выберите свой экземпляр AI Search.
Перейдите в Настройки > Публичная конечная точка.
В разделе Авторизованные хосты, добавьте свой локальный URL (например, http://localhost:3000) или * чтобы разрешить все origin во время тестирования.
Выберите Save.

При развёртывании замените * с вашим продакшен-origin, чтобы другие сайты не могли встраивать ваши компоненты поиска. Разрешённые origin это механизм браузера, а не механизм контроля доступа, поэтому он не останавливает прямой запрос от curl или скрипт. Чтобы ограничить круг пользователей, которые могут отправлять запросы к эндпойнту, см. Cloudflare Access.