Build a Paywall
Build paywalls with an AI agent using the Superwall Framework, or edit them in the visual editor with AI chat and Editor MCP.
The recommended way to build paywalls with AI is the Superwall Framework. Your agent writes the paywall as code in your repo, you preview it in the studio, and you push it to Superwall when it's ready.
Recommended: the Superwall Framework
With the Superwall Framework, a paywall is a small React app that lives in your repo. Agents already know how to write that kind of code, so you can describe a paywall in plain English and have it built for you.
- Preview everything before it ships. The studio shows your paywall on iPhone, Android, and iPad, in light and dark mode, in every language, with and without a free trial. You pick what happens on every purchase.
- Prices come from the store. Products, prices, and trials come from the App Store, Google Play, or Stripe, so an agent can't hardcode a wrong price.
- No app update needed. Pushed paywalls go live on the next app open, and you A/B test them in campaigns like any other paywall.
- Start from what you have. An agent can rebuild an existing editor paywall as code, or turn a screen from your app into a paywall.
Pushing a paywall needs Superwall for Agents enabled on each app. To get access, contact support@superwall.com.
Build with an AI agent
A plain-language guide to building, previewing, and shipping paywalls by chatting with an agent. No code required.
Framework quickstart
Set up a project, preview your first paywall in the studio, and push it to Superwall.
Migrate from the editor
Rebuild a paywall from the visual editor as code and compare the two side by side.
Framework overview
How the Framework works and when to use it.
Other ways to build with AI
| You want to | Use |
|---|---|
| Edit a paywall in the visual editor by chatting | AI Chat Builder |
| Edit the paywall open in the editor from Claude Code, Codex, or Cursor | Editor MCP |
| Create a visual editor paywall from a template without opening the dashboard | The plugin or Superwall MCP |
In the visual editor
Open a paywall and click AI Chat in the editor sidebar. Describe the change, attach reference images if you have them, and the AI Chat Builder makes draft edits for you to review. There's nothing to set up.
From your own agent, in the editor
To keep working in Claude Code, Codex, or Cursor, connect your agent to the paywall open in your browser with Editor MCP. Open AI Chat in the editor, click the agent connection pill, and follow the pairing steps. Your agent can then edit text, styles, products, variables, tap behaviors, and more while you watch.
From a template
With the plugin or Superwall MCP connected, ask your agent to create a paywall. It can start from a template or from scratch, attach products, and set up a campaign to show it. For example: "Create a paywall from a template for my iOS app with the annual and monthly products, and show it on the onboarding_complete placement."
How is this guide?