← Přehled / ai-search / how-to

Přidejte na web vyhledávání

Tento tutoriál vytvoří instanci AI Search, která zaindexuje váš web, a poté do frontendu vašeho webu přidá funkční vyhledávací panel, chatovací bublinu a vyhledávací modální okno. Používá přitom Úryvky UI, předpřipravené webové komponenty, které se připojí k veřejnému koncovému bodu vaší instance, takže vyhledávání přidáte jen několika řádky kódu na straně frontendu.

Co vytvoříte: Instance AI Search, která indexuje váš web, spolu s vyhledávacím panelem, chatovací bublinou a vyhledávacím modálním oknem, jež se přidají do frontendu vašeho webu a dotazují se na tento obsah.

1. Zaregistrujte si účet Cloudflare ↗.
2. Nainstalujte Node.js ↗.

Tento tutoriál přidá vyhledávání do existující aplikace React. Pokud začínáte nový projekt, nejprve si ho vytvořte pomocí Průvodce frameworkem React, poté postupujte podle dalších kroků. Úryvky kódu jsou webové komponenty nezávislé na frameworku, takže stejný postup funguje i v jiných frameworcích nebo v čistém HTML, jak je ukázáno v Úryvky UI.

Vytvořte instanci pomocí Wrangler CLI. Chcete-li zaindexovat web, který vlastníte, připojte ho jako zdroj dat, aby ho AI Search automaticky procházela a indexovala:

npx wrangler ai-search create my-search --type web-crawler --source <YOUR_DOMAIN>

Nahraďte <YOUR_DOMAIN> s doménou onboardovaný do vašeho účtu Cloudflare. Chcete-li vytvořit instanci bez zdroje dat a nahrávat soubory sami, spusťte npx wrangler ai-search create my-search --type builtin a přidejte obsah z dashboard.

Kontrola průběhu indexování:

npx wrangler ai-search stats my-search

Jakmile indexování dokončí, můžete dotaz otestovat z příkazové řádky:

npx wrangler ai-search search my-search --query 'What is this site about?'

Úryvky UI se připojují k vaší instanci prostřednictvím jejího veřejného endpointu.

V projektu svého webu nainstalujte Knihovna úryvků UI pro AI Search:

npm i @cloudflare/ai-search-snippet

Naimportujte knihovnu snippetů do jedné ze svých komponent a přidejte značky tam, kde se má zobrazit vyhledávání. Jednorázový import balíčku zaregistruje komponenty v prohlížeči. Následující příklad přidává vyhledávací panel, plovoucí bublinu chatu a vyhledávací modální okno, které se otevře pomocí Cmd/Ctrl+K do kořenové komponenty aplikace. Nahraďte <PUBLIC_ENDPOINT_ID> s ID veřejného endpointu z kroku dva.

import type { CSSProperties } from "react";
import "@cloudflare/ai-search-snippet";

export default function App() {
	return (
		<div>
			<search-bar-snippet
				api-url="https://<PUBLIC_ENDPOINT_ID>.search.ai.cloudflare.com/"
				placeholder="Search..."
				max-results={50}
				max-render-results={10}
				show-url="true"
				show-date="true"
			/>
			<chat-bubble-snippet
				api-url="https://<PUBLIC_ENDPOINT_ID>.search.ai.cloudflare.com/"
				style={
					{
						"--search-snippet-primary-color": "#F6821F",
					} as CSSProperties
				}
			/>
			<search-modal-snippet
				api-url="https://<PUBLIC_ENDPOINT_ID>.search.ai.cloudflare.com/"
				placeholder="Search documentation..."
				shortcut="k"
				show-url="true"
				show-date="true"
			/>
		</div>
	);
}

Balíček úryvků obsahuje typové deklarace pro své třídy, ale neříká TypeScriptu, že <search-bar-snippet> a ostatní značky jsou platné prvky JSX. Vývojový server Vite neprovádí kontrolu typů, takže aplikace běží i bez tohoto kroku, ale přidání souboru s deklaracemi udržuje .tsx typové kontroly a editory, aby nehlásily chyby u vlastních značek.

Vytvořte deklarační soubor, například src/ai-search-snippet.d.ts:

import type { HTMLAttributes } from "react";

// Register the snippet web components as valid JSX elements. The index
// signature allows their custom attributes (such as api-url and placeholder).
type SnippetElement = HTMLAttributes<HTMLElement> & {
	[attribute: string]: unknown;
};

declare module "react" {
	namespace JSX {
		interface IntrinsicElements {
			"search-bar-snippet": SnippetElement;
			"chat-bubble-snippet": SnippetElement;
			"search-modal-snippet": SnippetElement;
		}
	}
}

Tím se značky typují volně, takže je povolen libovolný atribut. Přísnější typy pro jednotlivé komponenty najdete v Deklarace React dema ↗ v repozitáři úryvků.

Veřejný endpoint používá CORS k řízení toho, které weby ho mohou volat. Přidejte origin, na kterém váš web během místního vývoje běží, aby se prohlížeč mohl k endpointu dostat. Aplikace Vite běží na http://localhost:5173.

Spusťte svůj vývojový server:

npm run dev

Otevřete svůj web v prohlížeči (aplikace Vite běží na http://localhost:5173). Napište do vyhledávacího pole a výsledky uvidíte v rozbalovací nabídce, klikněte na chatovací bublinu v rohu a položte otázku, nebo stiskněte Cmd/Ctrl+K a otevřete tak vyhledávací modální okno. Úplný přehled komponent, atributů a možností vzhledu najdete v Úryvky UI.

Úryvky fungují všude, kde je váš web dostupný. Jakmile web nasadíte na produkční doménu, vraťte se do Nastavení > Veřejný koncový bod a přidejte tento origin do Autorizovaní hostitelé (jako v kroku pět), aby prohlížeč mohl v produkčním prostředí endpoint kontaktovat.