[AI Search] Add interactive indexing and querying diagrams

[aninibread]

Summary

Screenshots (optional)

Documentation checklist

• Is there a changelog entry (guidelines)? If you don't add one for something awesome and new (however small) — how will our customers find out? Changelogs are automatically posted to RSS feeds, the Discord, and X.
• The change adheres to the documentation style guide.
• If a larger change - such as adding a new page- an issue has been opened in relation to any incorrect or out of date information that this PR fixes.
• Files which have changed name or location have been allocated redirects.

[cloudflare-docs-bot]

Review

⚠️ 2 warnings, 💡 1 suggestion found in commit 55aa219.

Code Review

This code review is in beta and may not always be helpful — use your judgment.

Suggestions (1)

File	Issue
src/components/AiSearchQueryingDiagram.astro line 643	Misleading CSS comment — The comment claims the a.asqd-cap rule styles "the query input, the endpoint outputs", but the query input (.asqd-start) is still a <div> and is not matched by a.asqd-cap. Fix: Update the comment to describe only the endpoint output caps, or wrap the start cap in an <a> if it is intended to be clickable.

Conventions

Checks PR title, description, and redirect checklist.

Warnings (2)

File	Issue
PR	Product or area identified — The title "Anni/ais diagram" does not name a recognizable product, feature, or docs content area. Fix: Rewrite the title to identify the affected docs area, e.g. prefix with a product tag like [AI Gateway] or a type prefix like docs:.
PR	Description explains the work — The description contains only the empty PR template; the Summary section and checklist items are unfilled. Fix: Fill in the Summary section with a brief, human-written explanation of what the diagram adds or changes.

Style Guide Review

_{No style-guide issues found.}

Redirects

_{No missing redirect entries found.}

Commands

Only codeowners can run commands. Post a comment with the command to trigger it.

Command	Description
/review	Runs a review now. Incremental if a prior review exists, full if not.
/full-review	Re-reviews the entire PR diff from scratch, ignoring incremental history. Useful after a rebase, when you want a fresh review, or if the bot gets out of sync and reports issues that no longer exist.
/ignore-review-limit	Permanently lifts the 2-review automatic limit for this PR. Future pushes will trigger reviews as normal.
/disable-auto-review	Stops automatic reviews from triggering on future pushes to this PR. Codeowners can still run /review or /full-review manually.

[github-actions]

This pull request requires reviews from CODEOWNERS as it changes files that match the following patterns:

Pattern	Owners
*.astro	@cloudflare/content-engineering, @kodster28
*.ts	@cloudflare/content-engineering, @kodster28
/src/content/docs/ai-search/	@rita3ko, @irvinebroque, @aninibread, @G4brym, @mchenco, @cloudflare/product-owners

[ask-bonk]

Build passes (pnpm run check, lint, format:core:check). Code is well-structured.

Issues needing action:

• PR title — Anni/ais diagram is vague and doesn't follow commit conventions. Suggest: [AI Search] Add interactive indexing and querying diagrams.
• PR description — Body is empty (template placeholders only). A brief summary and filled checklist help reviewers.

Minor cleanup (non-blocking):

• AiSearchQueryingDiagram.astro skips step numbers 2 and 3. Consider renumbering sequentially to avoid confusion for future maintainers.

Posted 1 inline suggestion.

[ask-bonk]

Remove unused attribute:

Suggested change

	data-keyword={String(keyword)}
	data-loop={String(loop)}

[ask-bonk]

Done.

Summary of this PR review for #31884:

What changed	4 files: 2 new interactive Astro diagram components (AiSearchIndexingDiagram, AiSearchQueryingDiagram), re-exported from src/components/index.ts, and embedded in the how-ai-search-works.mdx concept page.
Labels applied	documentation, docs engine
Build status	✅ Passes (pnpm run check, lint, format:core:check)

Issues flagged:

1. PR title (Anni/ais diagram) — does not follow commit conventions. Suggested: [AI Search] Add interactive indexing and querying diagrams.
2. PR description — completely empty; only template placeholders remain.
3. Minor cleanup — AiSearchQueryingDiagram.astro skips step numbers 2 and 3 in its animation sequence.
4. Inline suggestion — removed an unused data-keyword DOM attribute from AiSearchIndexingDiagram.astro (the prop is consumed server-side by Astro, so the attribute is dead code in the custom element).

github run

[github-actions]

Preview URL: https://55aa2194.preview.developers.cloudflare.com
Preview Branch URL: https://anni-ais-diagram.preview.developers.cloudflare.com

Files with changes (up to 15)

Original Link	Updated Link
https://developers.cloudflare.com/ai-search/concepts/how-ai-search-works/	https://anni-ais-diagram.preview.developers.cloudflare.com/ai-search/concepts/how-ai-search-works/