Adding Kapa AI script tag

[fellyph]

This pull request adds a new AI assistant widget to the WordPress Playground documentation site by updating the Docusaurus configuration. The widget is integrated via a script and includes custom branding, bot protection, and messaging.

Integration of the AI assistant widget:

• Added a new entry to the scripts array in docusaurus.config.js to load the Kapa AI widget, including configuration options for project branding, modal titles, and example questions.
• Added the Kapa script to a custom plugin to make it possible to load the current locale
• Map Playground locales to Kapa locales
• Added i18n
• Translated in ES

How to test it?

• From top folder, run the command npm run build:docs, then npm run dev:docs
• Check the button on top right

Switching to different locales by using the locale dropdown is not possible on localhost. To test another locale, do this:

cd packages/docs/site
npm run start -- --locale es # es, for example

And be sure the Kapa UI is in Spanish:

[akirk]

Is there a way to preview this?

[fellyph]

I have included the script to test it

[zaerl]

Is there a way to preview this?

Not online, AFAIK. Offline by running npm run dev:docs is enough. It is working despite the website-id.

[akirk]

I run into this error:

Module not found: Error: Can't resolve './model.json' in 'packages/docs/site/src'
client (webpack 5.99.5) compiled with 1 error

I'd like to suggest to replace the search box instead of adding another button.

[zaerl]

I'd like to suggest to replace the search box instead of adding another button.

This is a good idea. The UI is a bit too crowded with that new button.

[adamziel]

I'd like to suggest to replace the search box instead of adding another button.

I'm not convinced about removing the search box – isn't that what people habitually look for?

[zaerl]

I'm not convinced about removing the search box – isn't that what people habitually look for?

It is possible to integrate Kapa in the search bar, without removing it. So we can bundle the two things together.

[zaerl]

Can't resolve './model.json'

Run npx nx build docs-site; it will resolve this issue.

[zaerl]

By making some experiments, I've seen that we can indeed "swizzle" the Algolia default SearchBar component by running

npm run swizzle @docusaurus/theme-search-algolia SearchBar

This, however, can bring us to two results:

By ejecting it, we will have the entire React component recreated in the directory. It's an unsafe operation, because the component can change in the future. Additionally, it doesn't allow you to modify the internal DocSearchModal component where the button is inserted in the example. Docusaurus does not use react-instantsearch directly (i.e., the <InstantSearch /> component).

By not ejecting it, Docusaurus creates a wrapper around <SearchBar {...props} /> which is not touched. In this mode, we can try to inject that button at runtime. But it's not a very elegant solution.

I will check if the <SearchBar /> can help us customize the results without adding or replacing too much code, and be sure future updates don't break it. The button will just need to open the Kapa model with the searched query, and nothing more.

[akirk]

Thanks for the assessment! I thought it might be much easier. Is it possible to just put the "Ask AI" button from @fellyph's screenshot to the top right next to the search bar? I think the thing that mostly disliked about the proposed solution is that we spread out the action points from left and top now also to bottom right.

[zaerl]

We can add this here, possibly attracting the user's attention until they don't use it. By hiding the other button.

Registrazione.schermo.2025-10-08.alle.17.59.17.mov

[fellyph]

We can add to the homepage a message about the new Ask AI button

[adamziel]

I like the top bar button!

[akirk]

This is great. Is it easy to make it a button and move it to the right edge?

[zaerl]

I've added i18n, so it is localizable. The Spanish localization is already ok.

[zaerl]

This is great. Is it easy to make it a button and move it to the right edge?

We can swizzle the headbar because <SearchBar>, dark mode, and locales are hardcoded on the right. Let me try.

[zaerl]

@akirk, it was easier than I thought. No need to swizzle the entire headbar, but the search element. We can have a blue-style button on the right.

Registrazione.schermo.2025-10-09.alle.12.57.39.mov

[akirk]

Nice! Let's ship it!