Skip to content

feat(examples): prompt suggestions on PDP (PoC)#7059

Draft
aymeric-giraudet wants to merge 1 commit into
masterfrom
poc/prompt-suggestions-pdp
Draft

feat(examples): prompt suggestions on PDP (PoC)#7059
aymeric-giraudet wants to merge 1 commit into
masterfrom
poc/prompt-suggestions-pdp

Conversation

@aymeric-giraudet

Copy link
Copy Markdown
Contributor

Summary

  • PoC for a widget that turns a single product hit into 3 short, click-worthy prompts on the PDP. Clicking one opens the Chat widget and submits the prompt.
  • Lives entirely inside examples/react/query-suggestions/ (no package source changes). New self-contained <PromptSuggestions> React component plus minimal edits to Product.tsx to mount <Chat> on the PDP and render the suggestions under the product title.
  • Reuses the existing openChat() utility from instantsearch.js/lib/chat (with referer: 'prompt-suggestions') and mirrors the request/response shape of connectFilterSuggestions (POST /agent-studio/1/agents/{agentId}/completions?...&stream=false, parses data.parts[1].text as a JSON array of strings).
  • The Algolia Agent Studio agent it talks to is 46520bcb-1f38-4ceb-9511-af5648089e4b. Recommended system + agent prompts to paste into the dashboard live at examples/react/query-suggestions/prompt-suggestions-agent.md.

Test plan

  • Paste the system + agent prompts from prompt-suggestions-agent.md into agent 46520bcb-1f38-4ceb-9511-af5648089e4b (Agent Studio) and save.
  • yarn workspace example-react-instantsearch-query-suggestions dev, click any product on the search page to land on /products.html?pid=….
  • 3 skeleton chips appear under the product title, then resolve to 3 distinct suggestions specific to the product.
  • Click a chip → Chat opens on the PDP and submits the suggestion as the user message.
  • Network tab: one POST to agent-studio/1/agents/46520bcb…/completions?...&stream=false per PDP load; chat completions carry the x-algolia-referer: prompt-suggestions header.
  • Navigate between products: previous fetch is aborted, new suggestions load fresh.
  • Verify graceful behavior when the agent ID is invalid (section silently hides; PDP otherwise unaffected).

Out of scope

No InstantSearch widget registration, no caching, no telemetry beyond the existing referer header, no i18n on the fallback strings. If we promote this past PoC the natural next step is mirroring the connectFilterSuggestions / FilterSuggestions / UI-component split and exporting from react-instantsearch.

Add a self-contained PromptSuggestions React component to the
query-suggestions example. On the PDP it sends the product hit to an
Algolia Agent Studio agent, renders the returned 3 strings as chips,
and on click opens the Chat widget with the prompt prefilled via the
existing `openChat` utility (`referer: 'prompt-suggestions'`).

System and agent prompts for the suggestions agent are documented in
`examples/react/query-suggestions/prompt-suggestions-agent.md`.
@codacy-production

Copy link
Copy Markdown

Not up to standards ⛔

🔴 Issues 1 critical

Alerts:

⚠ 1 issue (≤ 0 issues of at least high severity)

Results:
1 new issue

Category Results
Security 1 critical

View in Codacy

🟢 Metrics 16 complexity

Metric Results
Complexity 16

View in Codacy

TIP This summary will be updated as you push new changes.

@pkg-pr-new

pkg-pr-new Bot commented May 27, 2026

Copy link
Copy Markdown
More templates

algoliasearch-helper

npm i https://pkg.pr.new/algolia/instantsearch/algoliasearch-helper@7059

instantsearch-ui-components

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch-ui-components@7059

instantsearch.css

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch.css@7059

instantsearch.js

npm i https://pkg.pr.new/algolia/instantsearch/instantsearch.js@7059

react-instantsearch

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch@7059

react-instantsearch-core

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-core@7059

react-instantsearch-nextjs

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-nextjs@7059

react-instantsearch-router-nextjs

npm i https://pkg.pr.new/algolia/instantsearch/react-instantsearch-router-nextjs@7059

vue-instantsearch

npm i https://pkg.pr.new/algolia/instantsearch/vue-instantsearch@7059

commit: 8959536

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant