AACSearch / руководство
Интерфейс магазина (aacsearch-ui)
Поиск, автодополнение, палитра ⌘K, чат поддержки, голосовой и фото-поиск, рекомендации — в React или на любой HTML-странице.
aacsearch-ui — UI-пакет платформы: виджеты React InstantSearch поверх
API арендатора, чат на assistant-ui, подключённый к API ассистентов, компоненты shadcn/ui
и бандл без фреймворка для сайтов без React. Все компоненты обращаются к API через
сгенерированный TypeScript SDK с одним поисковым ключом и одним идентификатором сессии,
поэтому события, рекомендации и ассистент видят одного и того же посетителя.
React
import { AACSearchExperience, AACSupportChat, defineAACSearchConfig } from "aacsearch-ui/experience";
const config = defineAACSearchConfig({
apiUrl: "https://api.aacsearch.com/v1",
apiKey: NEXT_PUBLIC_SEARCH_KEY, // a search key — never a full one
collection: "products",
queryBy: "name,brand,description",
locale: "ru",
currency: "RUB",
facets: [{ attribute: "category.lvl0", type: "hierarchical" }, { attribute: "brand" }, { attribute: "price", type: "range" }],
recommendations: { trending: "trending", similar: "similar", personal: "for-you" },
semantic: { vectorField: "embedding" },
image: { vectorField: "image_embedding" },
voice: { language: "ru" },
assistant: { assistantId: "asst_…" },
});
export default function Page() {
return (
<>
<AACSearchExperience config={config} />
<AACSupportChat config={config} />
</>
);
}Один раз добавьте @import "aacsearch-ui/globals.css"; и @source "../node_modules/aacsearch-ui/src";
в таблицу стилей Tailwind 4 вашего приложения.
Любой сайт
<script type="module" src="https://cdn.aacsearch.com/aacsearch-ui.js"></script>
<aacsearch-app api-url="https://api.aacsearch.com/v1" api-key="SEARCH_KEY" collection="products"
query-by="name,brand" facets="brand,category" price-field="price" lang="ru" currency="RUB"
trending-model="trending" similar-model="similar" voice vector-field="image_embedding"
assistant-id="asst_…"></aacsearch-app>
<aacsearch-chat api-url="…" api-key="SEARCH_KEY" collection="products" assistant-id="asst_…"></aacsearch-chat>
<aacsearch-recommendations api-url="…" api-key="SEARCH_KEY" collection="products" kind="recently-viewed"></aacsearch-recommendations>На страницах корзины и оформления заказа отправляйте события, которые замыкают цикл:
window.AACSearchUI.track(config, { type: "purchase", value: 12990, currency: "RUB", objects: [{ id: "42", price: 12990, quantity: 1 }] });Облегчённый aac-search.js (автодополнение, страница поиска, рекомендации, без
React) предоставляет тот же API AACSearch.mount* и AACSearch.track.
За что платит поисковый ключ
Ассистент, голосовой ввод, поиск по фото и семантический фолбэк — это AI-операции: они оплачиваются кредитами вашей организации и ограничены для каждой сессии посетителя — см. ключи, области доступа и кредиты. Когда в кошельке заканчиваются средства, виджеты не ломаются, а переходят в ограниченный режим: поиск продолжает работать, а ассистент сообщает, что недоступен.
Языки
Все строки, которые видит посетитель, берутся из словарей пакета (встроены ru и
en; передайте messages, чтобы добавить другой язык или переопределить подписи).
Локаль определяет форматирование чисел и валют, чипы подсказок ассистента
и язык распознавания голоса.