Algolia search/side panel

[swastik7805]

Description

This PR integrates the Algolia Ask AI Sidepanel (<DocSearchSidepanel />) into the MetaMask documentation, adding a floating "Ask AI" button that enables users to query Algolia's AI directly from the docs.

Key changes include:

• Algolia Sidepanel Integration: Added the @docsearch/react Sidepanel component to src/theme/Root.tsx to globally render the floating button. Dynamically mapped credentials from themeConfig.algolia.
• UI/Styling Tweaks: Override deafult styles of Ask-AI Sidepanel in src/scss/theme/_doc-search.scss to fix Sidepanel specific regressions—such as oversized textareas, misaligned submit icons, and transparent backgrounds. Tailored the chat UI to follow MetaMask's design tokens.
• Prevent SSR hydration errors by wrapping DocSearchSidepanel with useIsBrowser.
• Fix Sidepanel CSS overrides bleeding into the main search modal.

Feature Requested

Algolia Ask AI floating button feature

Fixes #2756 proposed by @bgravenorst

Preview

Algolia-Ask-Ai.mp4

Checklist

• If this PR updates or adds documentation content that changes or adds technical meaning, it has received an approval from an engineer or DevRel from the relevant team.
• If this PR updates or adds documentation content, it has received an approval from a technical writer.

External contributor checklist

• I've read the contribution guidelines.
• I've created a new issue (or assigned myself to an existing issue) describing what this PR addresses.

---

Note

Medium Risk
Adds a new third-party UI surface rendered globally from Root.tsx and applies broad CSS overrides, which could impact rendering/styling across the site and cause SSR/hydration issues if misconfigured.

Overview
Integrates Algolia’s Ask AI sidepanel into the docs by adding @docsearch/react/@docsearch/css and conditionally rendering <DocSearchSidepanel /> from src/theme/Root.tsx when themeConfig.algolia includes an assistantId (guarded by useIsBrowser).

Extends src/scss/theme/_doc-search.scss with targeted overrides for the floating “Ask AI” launcher and sidepanel UI (chat input/layout, typography, related sources, dark/light theming) to match MetaMask design tokens and avoid style bleed into the main DocSearch modal.

^{Reviewed by Cursor Bugbot for commit 553d40f. Bugbot is set up for automated code reviews on this repo. Configure here.}

[vercel]

@swastik7805 is attempting to deploy a commit to the Consensys Team on Vercel.

A member of the Team first needs to authorize it.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​docsearch/​css@​4.2.0 ⏵ 4.6.2	+1		+1
	@​docsearch/​react@​4.2.0 ⏵ 4.6.2	-1		+1

View full report

[swastik7805]

@bgravenorst @alexandratran @AyushBherwani1998 @yashovardhan hey guys, i have successfully integrated the Algolia Ask Ai sidepanel.Tested it out and resolved SSG error builds and styling css bleed as suggessted by cursorbot.

PR is not updated and ready for review.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
metamask-docs	Ready	Preview, Comment	Apr 12, 2026 11:59pm

[cursor]

Translations prop incorrectly nested inside panel prop

Medium Severity

The translations configuration is passed nested inside the panel prop, but according to the DocSearchSidepanel API, translations is a separate top-level prop, not a sub-property of panel. The panel prop accepts layout options like variant, side, width, etc. As a result, the custom introductionText string is silently ignored and the sidepanel displays default text instead of the intended "Have a question about integrating with MetaMask?" message.

 

^{Reviewed by Cursor Bugbot for commit b2101a3. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

There are 2 total unresolved issues (including 1 from previous review).

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 553d40f. Configure here.}

[bgravenorst]

Thanks for your contribution @swastik7805 🚀