← Přehled / ai-search / configuration / retrieval / public-endpoint

Úryvky UI

AI Search můžete do svého webu snadno přidat pomocí Knihovna fragmentů uživatelského rozhraní Cloudflare AI Search ↗, který poskytuje produkčně připravené, přizpůsobitelné webové komponenty.

Knihovna je k dispozici jako open source na github.com/cloudflare/ai-search-snippet ↗.

Dostupné komponenty

Knihovna úryvků poskytuje čtyři webové komponenty. Každá komponenta se připojuje k vaší instanci AI Search pomocí api-url atribut, který by měl odkazovat na URL adresu vašeho veřejného endpointu.

Komponenta	Popis
`<search-bar-snippet>`	Vložený vyhledávací panel, který zobrazuje výsledky v rozbalovací nabídce
`<search-modal-snippet>`	Modální okno vyhledávání, které se otevře pomocí `Cmd/Ctrl+K` klávesová zkratka
`<chat-bubble-snippet>`	Plovoucí bublina chatu v rohu stránky
`<chat-page-snippet>`	Rozhraní chatu na celou stránku s historií konverzace

Pokročilé možnosti stylování a konfigurace najdete na search.ai.cloudflare.com ↗.

Předpoklady

Úryvky UI se připojují k vaší instanci AI Search přes veřejný koncový bod. Před použitím úryvků musíte tento koncový bod povolit.

Přejděte na AI Search na Cloudflare dashboardu.
Přejděte na AI Search ↗
Vyberte svou instanci AI Search.
Přejděte na Nastavení > Veřejný koncový bod.
Zapněte Povolte veřejný endpoint.
Zkopírujte adresu URL veřejného endpointu. Použijete ji jako api-url atribut ve vašich úryvcích.

Použití s HTML

Přidejte tag skriptu do souboru HTML (například index.html). Nahraďte <PUBLIC_ENDPOINT_ID> s ID veřejného endpointu vaší instance AI Search, které najdete v Nastavení > Veřejný koncový bod.
```
<script
	type="module"
	src="https://<PUBLIC_ENDPOINT_ID>.search.ai.cloudflare.com/assets/v0.0.25/search-snippet.es.js"
></script>
```

Přidejte komponentu s vaším api-url.

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

Před testováním konfigurace CORS abyste povolili svůj lokální origin. Poté otevřete HTML soubor v prohlížeči a otestujte ho.

Úplný příklad HTML

Následující příklad ukazuje úplnou stránku HTML s vyhledávacím panelem. Když uživatel začne psát do vyhledávacího panelu, výsledky se zobrazí v rozbalovací nabídce pod ním.

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

Použití s frameworkem

Otevřete svůj projekt React a nainstalujte balíček:
```
npm install @cloudflare/ai-search-snippet
```
V souboru komponenty (například src/App.tsx), naimportujte balíček:
```
import "@cloudflare/ai-search-snippet";
```

Přidejte komponentu do svého JSX:

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

Před testováním konfigurace CORS abyste povolili svůj lokální origin. Poté spusťte svůj vývojový server:
```
npm run dev
```

Balíček obsahuje typy TypeScript a funguje s React, Next.js a dalšími frameworky založenými na Reactu.

Otevřete svůj projekt Vue a nainstalujte balíček:
```
npm install @cloudflare/ai-search-snippet
```

V souboru komponenty (například src/App.vue), naimportujte balíček a přidejte komponentu:

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

Před testováním konfigurace CORS abyste povolili svůj lokální origin. Poté spusťte svůj vývojový server:
```
npm run dev
```

Nakonfigurujte komponentu

Každá komponenta přijímá atributy, které řídí její chování. Mezi běžné atributy patří:

Attribute	Popis
`api-url`	Povinné. Adresa URL veřejného endpointu vaší instance.
`placeholder`	Zástupný text pro vstupní pole.
`max-results`	Maximální počet výsledků, o které lze požádat.
`theme`	`light`, `dark`, nebo `auto` (výchozí), který se řídí systémovým motivem.
`hide-branding`	Skryjte branding Cloudflare.
`translations`	Přepsání uživatelsky viditelných řetězců za účelem lokalizace komponenty.

Chatové komponenty (<chat-bubble-snippet> a <chat-page-snippet>) také akceptuje chat-query-rewrite a přepisovat tak navazující zprávy na samostatné dotazy.

Úplný seznam atributů a živý editor, který za vás vygeneruje kód HTML, React nebo Vue, najdete pomocí playground úryvků ↗.

Přizpůsobení vzhledu

Komponenty stylujte pomocí vlastních vlastností CSS, které všechny mají předponu --search-snippet-. Nastavte je na komponentě nebo na nadřazeném prvku:

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

playground ↗ zobrazuje všechny dostupné proměnné a v reálném čase zobrazuje náhled vašich změn.

Nakonfigurujte CORS pro místní testování

Při místním testování (například http://localhost:3000), musíte povolit svůj lokální origin v nastavení veřejného endpointu.

Přejděte na AI Search na Cloudflare dashboardu.
Přejděte na AI Search ↗
Vyberte svou instanci AI Search.
Přejděte na Nastavení > Veřejný koncový bod.
V části Autorizovaní hostitelé, přidejte svou lokální adresu URL (například http://localhost:3000) nebo * abyste při testování povolili všechny origins.
Vyberte Save.

Při nasazení nahraďte * s vaším produkčním originem, aby ostatní weby nemohly vaše vyhledávací komponenty vkládat. Povolené originy jsou mechanismem prohlížeče, nikoli mechanismem řízení přístupu, takže to nezabrání přímému požadavku z curl nebo skript. Chcete-li omezit, kdo smí endpoint dotazovat, přečtěte si Cloudflare Access.