AI-Powered Copy Suggestion

[bttf]

A new 'AI-powered Copy Suggestion' feature for the Visual Editor.

Upon selecting an HTML element, we detect if the innerHTML contains human-readable text, and offer a way to transform the text based on a list of tones (e.g. 'concise', 'humorous'). The user then has the ability to edit this suggestion before either applying the change or throwing it away.

This is supported by a new endpoint on the backend: https://github.com/growthbook/growthbook/pull/1307

Changes:

• Adds AIEditorSection component (a higher-order VisualEditorSection component)
• Adds AICopySuggestor component, which houses main functionality of feature
• Adds IDrop component for tooltip helpers
• Prompt 'AI-Powered Copy Suggestion' feature only when human readable text is detected, implemented with memo var humanReadableText
• Adds transformCopy API method to interface w/ GB API

Screen captures

New section in the Visual Editor pane, collapsed by default

Tooltip

Expanded

Hover-over action

Loading state

New generated copy

Generated copy, applied

Error state

"Peek out" behavior

Happy path

[linear[bot]]

GB-230 Visual Editor - AI-powered suggestions for copy

Use GPT to allow suggesting copy for websites using the visual editor