diff --git a/src/assets/Inline/copy.svg b/src/assets/Inline/copy.svg
new file mode 100644
index 0000000000..78bd1c2d9e
--- /dev/null
+++ b/src/assets/Inline/copy.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/Inline/library.svg b/src/assets/Inline/library.svg
new file mode 100644
index 0000000000..6b8c1659a8
--- /dev/null
+++ b/src/assets/Inline/library.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/Inline/retry.svg b/src/assets/Inline/retry.svg
new file mode 100644
index 0000000000..4fea54e9bc
--- /dev/null
+++ b/src/assets/Inline/retry.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/Inline/send.svg b/src/assets/Inline/send.svg
new file mode 100644
index 0000000000..82b25fc289
--- /dev/null
+++ b/src/assets/Inline/send.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/Inline/sparkle.svg b/src/assets/Inline/sparkle.svg
new file mode 100644
index 0000000000..c3cfe39afa
--- /dev/null
+++ b/src/assets/Inline/sparkle.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/Inline/stop.svg b/src/assets/Inline/stop.svg
new file mode 100644
index 0000000000..ed4a12feba
--- /dev/null
+++ b/src/assets/Inline/stop.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/assets/Inline/thumbs-down.svg b/src/assets/Inline/thumbs-down.svg
new file mode 100644
index 0000000000..3d3a99cd77
--- /dev/null
+++ b/src/assets/Inline/thumbs-down.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/Inline/thumbs-up.svg b/src/assets/Inline/thumbs-up.svg
new file mode 100644
index 0000000000..edf45b1e8a
--- /dev/null
+++ b/src/assets/Inline/thumbs-up.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/assets/shared/video/ai-editor-push-yearly.mp4 b/src/assets/shared/video/ai-editor-push-yearly.mp4
new file mode 100644
index 0000000000..6ac2f03ca7
Binary files /dev/null and b/src/assets/shared/video/ai-editor-push-yearly.mp4 differ
diff --git a/src/assets/shared/video/ai-editor-refine.mp4 b/src/assets/shared/video/ai-editor-refine.mp4
new file mode 100644
index 0000000000..66397d6d5a
Binary files /dev/null and b/src/assets/shared/video/ai-editor-refine.mp4 differ
diff --git a/src/assets/shared/video/ai-editor-restyle.mp4 b/src/assets/shared/video/ai-editor-restyle.mp4
new file mode 100644
index 0000000000..7fa8dd89b7
Binary files /dev/null and b/src/assets/shared/video/ai-editor-restyle.mp4 differ
diff --git a/src/assets/shared/video/ai-editor-social-proof.mp4 b/src/assets/shared/video/ai-editor-social-proof.mp4
new file mode 100644
index 0000000000..0062a5da5f
Binary files /dev/null and b/src/assets/shared/video/ai-editor-social-proof.mp4 differ
diff --git a/src/components/AIPromo.astro b/src/components/AIPromo.astro
new file mode 100644
index 0000000000..f99c4575d0
--- /dev/null
+++ b/src/components/AIPromo.astro
@@ -0,0 +1,259 @@
+---
+/**
+ * Spotlight card pointing at an AI capability from a related article.
+ *
+ * Shaped like the discover cards on the docs home page — icon tile, heading,
+ * body, call to action — rather than like a callout, because it is an invitation
+ * to go somewhere rather than an aside about the current page.
+ *
+ * The whole card is the link, so the body must NOT contain a link of its own —
+ * nested anchors are invalid HTML. Write the body as plain prose and let `cta`
+ * carry the call to action.
+ *
+ *
+ * Tell the AI Editor to "give the paywall a dark, premium feel" ...
+ *
+ */
+interface Props {
+ /**
+ * Doc id to link to. Defaults to the AI Editor, which is every current call
+ * site — pass it only when pointing at a different AI feature.
+ */
+ id?: string;
+ /** Absolute URL, when the target is not a doc. Ignored if `id` is set. */
+ href?: string;
+ /** The bold lead line. Keep it to one short sentence. */
+ title: string;
+ /** Call-to-action text at the foot of the card. */
+ cta?: string;
+ className?: string;
+}
+
+const {
+ id = 'flow-ai-editor',
+ href,
+ title,
+ cta = 'Explore the AI Editor',
+ className,
+} = Astro.props;
+
+// Same resolution as Button.astro, so doc ids behave identically across components.
+const baseUrl = import.meta.env.BASE_URL.replace(/\/+$/, '') || '/docs';
+const finalHref = id ? `${baseUrl}/${id}` : href;
+---
+
+
+
+
+
+
+ {/* Divs, not spans: MDX wraps slot content in
diff --git a/src/components/DocVideo.astro b/src/components/DocVideo.astro
new file mode 100644
index 0000000000..78557d540a
--- /dev/null
+++ b/src/components/DocVideo.astro
@@ -0,0 +1,134 @@
+---
+/**
+ * Inline demo video — the motion equivalent of .
+ *
+ * Use it instead of an animated GIF: same silent autoplaying loop, a fraction of
+ * the bytes. Videos load and start with the page — deliberately native `autoplay`
+ * rather than JS-driven playback, because Astro's ClientRouter swaps the DOM on
+ * navigation and script-timed playback is unreliable across those transitions.
+ *
+ * Videos live in src/assets/shared/video/. Resolution is by filename, so the id
+ * needs no path:
+ *
+ * An optional poster (same base name, .webp) sits next to the video and shows
+ * before playback starts. Without one the frame is empty until the video loads.
+ */
+interface Props {
+ id: string;
+ width?: string;
+ /** Describes the demo for screen readers. Required in practice — a silent loop says nothing on its own. */
+ alt?: string;
+ /** Poster filename in src/assets/shared/video/. Shown before playback starts. */
+ poster?: string;
+ /** Shows native controls and suppresses autoplay. For anything longer than a short loop. */
+ controls?: boolean;
+ className?: string;
+}
+
+const { id, width = '700px', alt, poster, controls = false, className } = Astro.props;
+
+// `?url` emits the file into _astro/ with a content hash, so updating a demo
+// busts its own cache. Files served from public/ would keep the same URL and
+// need a rename instead.
+const allVideos = import.meta.glob('/src/assets/**/*.{mp4,webm}', {
+ eager: true,
+ query: '?url',
+ import: 'default',
+});
+
+// Scoped to the video folder on purpose: a second eager glob over every image in
+// src/assets would repeat the ~2000-entry scan ZoomImage already does.
+const allPosters = import.meta.glob('/src/assets/shared/video/**/*.{webp,png,jpg,jpeg}', {
+ eager: true,
+ query: '?url',
+ import: 'default',
+});
+
+const filenameOf = (value: string) => value.split('/').pop() || value;
+
+const resolve = (map: Record, wanted: string) => {
+ const target = filenameOf(wanted);
+ for (const [path, url] of Object.entries(map)) {
+ if (filenameOf(path) === target) return url;
+ }
+ return undefined;
+};
+
+const videoSrc = resolve(allVideos, id);
+const posterSrc = poster ? resolve(allPosters, poster) : undefined;
+
+const numericWidth = parseInt(width.replace('px', ''), 10) || 700;
+---
+
+{videoSrc ? (
+
+) : (
+
+ Video not found: {id}
+
+)}
+
+
+
+
diff --git a/src/components/mdxComponents.ts b/src/components/mdxComponents.ts
index 15b66f45b5..555d8759af 100644
--- a/src/components/mdxComponents.ts
+++ b/src/components/mdxComponents.ts
@@ -18,6 +18,7 @@ import CustomDocCardList from './CustomDocCardList.astro';
import Details from './Details.astro';
import InlineTooltip from './InlineTooltip.astro';
import ZoomImage from './ZoomImage.astro';
+import DocVideo from './DocVideo.astro';
import Button from './Button.astro';
import Inline from './Inline.astro';
import MDXImage from './MDXImage.astro';
@@ -25,6 +26,7 @@ import SDKv4 from './SDKv4.astro';
import SDKv3 from './SDKv3.astro';
import MethodPromo from './MethodPromo.astro';
import SkillPromo from './SkillPromo.astro';
+import AIPromo from './AIPromo.astro';
import ProductMap from './ProductMap.astro';
export const mdxComponents = {
@@ -36,6 +38,7 @@ export const mdxComponents = {
Details,
InlineTooltip,
ZoomImage,
+ DocVideo,
MDXImage,
Button,
Inline,
@@ -43,6 +46,7 @@ export const mdxComponents = {
SDKv3,
MethodPromo,
SkillPromo,
+ AIPromo,
ProductMap,
img: MDXImage,
};
diff --git a/src/content/docs/guides/flow-builder/adapty-flow-builder.mdx b/src/content/docs/guides/flow-builder/adapty-flow-builder.mdx
index 3c44aef609..0a3856386b 100644
--- a/src/content/docs/guides/flow-builder/adapty-flow-builder.mdx
+++ b/src/content/docs/guides/flow-builder/adapty-flow-builder.mdx
@@ -18,6 +18,7 @@ In Adapty, you can create flows in a visual no-code editor.
- **Create paywalls, onboardings, and more**: Create dynamic single- or multi-screen flows.
- **Full-featured flow templates**: Start the flow with a [professionally designed template](paywall-builder-templates).
- **Flexible design**: Recreate complex screens visually: no code required.
+- **[AI Editor](flow-ai-editor)**: Describe a change in plain language and watch it land on the screen — restyle, rewrite, or rearrange without touching a property.
- **Native rendering**: The Adapty SDK renders flows natively without web views to ensure a seamless user experience.
- **Update without redeploying**: Change copy, design, or logic any time. Updates reach your users without an app release.
@@ -70,6 +71,7 @@ These are just the most common patterns. Flows are built from flexible, reusable
- **[Variables](onboarding-variables)** — use variable values in text or to enable trigger-based flow logic.
- **[Conditional navigation](onboarding-navigation-branching)** — branch the flow based on user input.
- **[Quizzes and inputs](builder-inputs-and-forms)** — collect and process user input.
+- **[AI Editor](flow-ai-editor)** — describe a change in plain language and the AI applies it to the screen you're on.
- **[Dark mode](paywall-dark-mode)** — style elements to match the device theme.
- **[Localization](add-flow-remote-config-locale)** — manual or AI-enabled.
diff --git a/src/content/docs/guides/flow-builder/builder-styling.mdx b/src/content/docs/guides/flow-builder/builder-styling.mdx
index 2d54213984..7ae97c9209 100644
--- a/src/content/docs/guides/flow-builder/builder-styling.mdx
+++ b/src/content/docs/guides/flow-builder/builder-styling.mdx
@@ -13,6 +13,10 @@ The **Design** tab in the right panel controls each element's visual appearance.
For sizing, spacing, and positioning, see [Layout and positioning](manage-paywall-ui-elements).
:::
+
+ Tell the AI Editor to "give the paywall a dark, premium feel" and it restyles every element at once — fills, corners, type, and spacing.
+
+
## Visibility
diff --git a/src/content/docs/guides/flow-builder/builder-ui.mdx b/src/content/docs/guides/flow-builder/builder-ui.mdx
index 9aa683fa84..7259489329 100644
--- a/src/content/docs/guides/flow-builder/builder-ui.mdx
+++ b/src/content/docs/guides/flow-builder/builder-ui.mdx
@@ -156,6 +156,7 @@ The left panel changes its functionality based on which button is active. You ca
* [Styles](#saved-styles)
* [Variables](#variables)
* [Localization](#localization)
+* [AI Editor](#ai-editor)
### Screens and Layers
@@ -247,3 +248,14 @@ The Localization view allows you to manage the translatable content in your flow
* **Import** or **Export** content to translate it in bulk outside Adapty.
+
+### AI Editor
+
+:::link
+Main article: [AI Editor](flow-ai-editor)
+:::
+
+The sparkle button opens the AI Editor chat.
+
+Describe a change in plain language, and Adapty rewrites, restyles, or rearranges the screen you're looking at. Adapty then tells you what changed, and one click takes it back.
+
diff --git a/src/content/docs/guides/flow-builder/flow-ai-editor.mdx b/src/content/docs/guides/flow-builder/flow-ai-editor.mdx
new file mode 100644
index 0000000000..97d05a48a4
--- /dev/null
+++ b/src/content/docs/guides/flow-builder/flow-ai-editor.mdx
@@ -0,0 +1,98 @@
+---
+title: "AI Editor"
+description: "Describe a change in plain language and the AI Editor applies it to your flow screen — restyle, rewrite, and rearrange without touching a single property."
+metadataTitle: "AI Editor | Flow Builder | Adapty Docs"
+keywords: ['ai editor', 'ai', 'flows', 'flow builder', 'paywall', 'prompts']
+---
+
+The AI Editor is a chat panel inside the flow builder. Describe a change in plain language, and Adapty rewrites, restyles, or rearranges the screen you're looking at. Adapty then tells you what changed, and one click takes it back.
+
+You can adjust the result by hand, keep prompting, or undo all the changes.
+
+
+
+## How it works
+
+- **Open the AI Editor**: Click the sparkle button in the left panel.
+- **One chat per screen**: The panel header names the screen being edited, and each prompt applies only to that screen. Switch screens from the dropdown, and the preview follows.
+- **Shared prompt history**: Anyone on the team who opens a flow screen sees the prompts you sent — pick up where a colleague left off instead of repeating their work.
+- **Get inspired**: Open the **Prompts library** and select a prompt category — Visual, Content, Layout, or Products. The [prompt ideas](#prompt-ideas) on this page show what the editor can do.
+- **One prompt, one undo step**: The AI applies every change from a prompt at once, and **Undo** reverts all of them together.
+- **Adjust past prompts**: To adjust a prompt you already sent, click **Retry** . The flow editor brings it back into the input box.
+- **Nothing ships until you publish**: Your changes reach users only after you [save and publish](builder-save-publish) the flow.
+
+## Prompt ideas
+
+Try these prompts to see how the AI Editor can help you iterate. You can always undo the changes.
+
+### Test a new visual direction
+
+**Prompt:** `Give the paywall a dark, premium feel`
+
+The AI rewrites copy, changes element styling, and applies a new color theme — in a single prompt. Try a new visual direction for your flow, then keep it or undo it.
+
+### Build trust with a ratings and testimonials section
+
+**Prompt:** `Add a social proof section with star rating and short testimonials`
+
+The AI adds a container, a star rating, and testimonial cards above the purchase button — all new elements, not a restyle. Ask for a section that isn't on the screen yet and the AI builds it.
+
+
+
+### Make a dense screen scannable in one prompt
+
+**Prompt:** `Shorten all the text`
+
+The AI shortens every text element on the screen at once and keeps the meaning of each. Trim a whole screen in one prompt instead of editing elements one by one.
+
+### Keep the CTA on screen with a sticky footer
+
+**Prompt:** `Add a sticky footer with the main subscribe button`
+
+The AI creates a footer pinned to the bottom of the screen and moves the subscribe button into it. Name a mobile layout pattern and the AI builds it for you.
+
+### Make a discount unmissable with a strikethrough price
+
+**Prompt:** `Show the original price crossed out on the discounted plan`
+
+The AI finds the plan with an offer, crosses out its original price, and shows the discounted one beside it. The same result [built by hand](strikethrough-price) takes several steps.
+
+### Push users toward your best plan in one sentence
+
+**Prompt:** `Push users towards the yearly plan`
+
+Name the outcome and the AI picks the mechanisms. It preselects the yearly card, adds a **Best Value** badge, and rewrites the plan label to reinforce the offer — three coordinated changes, applied together or not at all.
+
+
+
+### Make the CTA dominate without picking a color or size
+
+**Prompt:** `Make the subscribe button the most prominent element`
+
+The AI raises the button's contrast, increases its size, and adds space around it — without you naming a single value. Describe the outcome you want and let the AI decide the numbers.
+
+### Shrink an annual price to a daily cost
+
+**Prompt:** `Break down the annual plan price to a daily cost`
+
+Adapty already calculates a per-day price for every subscription, and the AI adds it beneath the annual price. Per-week, per-month, and per-year prices are available too.
+
+### Keep refining without starting over
+
+**Prompt:** `Softer background, and move the trial line closer to the button`
+
+The chat remembers the screen and your last prompt, so a follow-up needs no repetition. Refine until the screen looks right — each prompt is its own undo step.
+
+
+
+## What the AI editor can't do
+
+The AI Editor restyles, rewrites, and rearranges the screen it's pointed at. It can't:
+
+- **Edit multiple screens at once**: Switch the active screen and prompt again.
+- **Generate or fetch media**: Add [images and video](custom-media) yourself, then ask the AI to place or restyle them.
+- **Create custom variables or conditional logic**: The AI writes built-in [product variables](onboarding-variables) such as price per day into your copy. Custom variables and branching are yours to set up.
+- **Set up actions**: Connect [navigation, purchases, and links](onboarding-actions) manually.
+- **Choose which products you offer**: The AI restyles the product cards already on the screen. Assign products to the [Products element](paywall-product-block) yourself.
+
+Adapty may lift these limits in future releases.
\ No newline at end of file
diff --git a/src/content/docs/version-3.0/manage-paywall-ui-elements.mdx b/src/content/docs/version-3.0/manage-paywall-ui-elements.mdx
index a930eaf125..2b2dd037ef 100644
--- a/src/content/docs/version-3.0/manage-paywall-ui-elements.mdx
+++ b/src/content/docs/version-3.0/manage-paywall-ui-elements.mdx
@@ -15,6 +15,9 @@ The container decides the elements' direction (vertical or horizontal), alignmen
For visual properties like fill, borders, and effects, see [Styles and appearance](builder-styling).
:::
+
+ Ask the AI Editor for a "Most Popular" badge, a sticky footer, or a whole new social proof section — it builds the containers for you.
+
diff --git a/src/content/docs/version-3.0/onboarding-text.mdx b/src/content/docs/version-3.0/onboarding-text.mdx
index f54a26dcca..3d1ca5d7b6 100644
--- a/src/content/docs/version-3.0/onboarding-text.mdx
+++ b/src/content/docs/version-3.0/onboarding-text.mdx
@@ -6,6 +6,10 @@ metadataTitle: "Text | Flow Builder | Adapty Docs"
Add titles, paragraphs, or lists with a single click, style them to match your brand, and use [dynamic variables](onboarding-variables) to personalize content for each user.
+
+ Ask the AI Editor to rewrite your copy, mention the free trial, or shorten every text element on the screen at once.
+
+
## Set up text styles
The **Styles** panel includes pre-configured text styles: H1, H2, H3, Button Label, Body, Caption, and Small Label. Click any style to edit its font family, weight, size, alignment, decoration, and other properties.
diff --git a/src/content/docs/version-3.0/paywall-product-block.mdx b/src/content/docs/version-3.0/paywall-product-block.mdx
index 9c3ad87600..aebac7033b 100644
--- a/src/content/docs/version-3.0/paywall-product-block.mdx
+++ b/src/content/docs/version-3.0/paywall-product-block.mdx
@@ -8,6 +8,10 @@ import ZoomImage from '@site/src/components/ZoomImage';
To set up purchases on a screen, add a purchase button and configure its **Purchase** action. The action can target a specific product or whichever product the user selects from a Products element on the screen.
+
+ Ask the AI Editor to break the annual plan down to a daily cost, cross out the old price, or mark the best value. It restyles the product cards on this screen — never your catalog or prices.
+
+