At a glance
- Steps
- Copy to Webflow on the Build preview → ⌘V in the Webflow Designer.
- Where the button shows
- In AI Studio's Build mode (aistudio.google.com). Deployed apps have no button: use FlowPaste icon → Capture the full page.
- What Build mode makes
- A React frontend by default, plus a Node.js server for API calls, databases and npm packages.
- AI Studio's own export
- Download a ZIP, or sync with a GitHub repository both ways.
- Can Webflow run the app?
- No. Gemini API calls, Firebase sign-in and data need a server; Webflow hosts websites. Only the design comes across.
- Best split
- Marketing pages on Webflow (www), the Gemini-powered app on Cloud Run (app subdomain).
- Plan
- Each copy counts as a capture: 3 a day on Free, unlimited on Pro.
Why an AI Studio app can't be imported into Webflow
Google AI Studio's Build mode is aimed at people building with the Gemini API. You describe an app, and AI Studio writes it with "a live preview of your app appearing on the right-hand side". Google's docs describe two parts: "a web frontend (React is the default)" and "a Node.js runtime that allows for secure API calls, database connections, and npm package usage". It can also set up Firebase for data and Google sign-in.
That's a real app, and Webflow isn't an app host. The Designer can't import code, and the ZIP you can download is source that needs Node.js and a GEMINI_API_KEY to run. What Webflow is good at is the website around the app: the landing page, pricing, docs and blog that people find before they sign in.
FlowPaste copies those pages from the live preview, after React has rendered them. FlowPaste reads the page the way your browser shows it: the elements, every CSS rule that applies to them, the media queries and the hover states. It then writes Webflow's own clipboard format, so ⌘V (Ctrl+V) in the Designer creates real elements with named classes. AI Studio's chat, Code tab and toolbar aren't copied, only your page.
“Regardless of where your site is hosted today, migrating to Webflow will be a rebuild, not a transfer.”
Webflow Help Center
Ways to do it, compared
| Method | Editable in Webflow | Responsive | Time for one page | Best for |
|---|---|---|---|---|
| Download the ZIP (or ask for one plain HTML file), then Convert | Yes | Yes | 10–20 minutes | When you want to strip app code before it reaches Webflow |
| Code Embed element | No. The code stays code | Only if the code is | Minutes | Widgets and scripts you won't edit |
| Rebuild by hand in the Designer | Yes | Yes, if you build it | 2–6 hours | Small pages, or a full redesign |
| Keep everything on Cloud Run | Only by prompting or editing code | Yes | None | Internal tools with no marketing site |
| FlowPaste: Copy to Webflow on the Build preview | Yes: native elements and classes | Yes: tablet and mobile breakpoints | Under a minute per page | Landing and marketing pages for a Gemini app |
The ZIP is a full React and Node.js project. FlowPaste's Convert tab renders React it's given, but a multi-file app with a server is easier to copy from the running preview.
How to copy a Google AI Studio page into Webflow
Time: about 3 minutes per page. You need: the FlowPaste Chrome extension, your app open in AI Studio's Build mode, a Webflow site open in the Designer.
Open your app in Build mode
Go to aistudio.google.com, open Build and pick your app. Wait for the live preview on the right to finish loading.
TipIf you only need a marketing page, ask AI Studio to add one to your app ("add a landing page that explains the app"). It's quicker than designing it again in Webflow.
Go to the screen you want
Click through the preview to the page or screen you want. Routing between pages doesn't come across, so each page is a separate copy.
Click Copy to Webflow
FlowPaste's button sits at the bottom right of the preview. The main click copies the whole page, every section in order.
TipTo copy one part, open the arrow menu and choose Pick a section. Hover the page, press ↑ for a bigger area, and click.
For a deployed app, use Capture the full page
Apps deployed to Cloud Run get a public URL but no Copy to Webflow button. Open the URL, click the FlowPaste icon and choose Capture the full page. Capture an element works for one section.
Paste in the Webflow Designer
Click the Body or the element to paste into and press ⌘V (Ctrl+V). A whole page pastes section by section.
Add fonts, connect images, check breakpoints
Add the fonts FlowPaste lists in Site settings → Fonts. Connect your site in FlowPaste → Account → Webflow images so images upload to Assets. Click through tablet and mobile.
What comes across
| In your AI Studio app | In Webflow | Notes |
|---|---|---|
| React components | Sections and Div Blocks with classes | Named from structure: hero-heading, feature-card |
| Utility classes (if the app uses Tailwind) | Compiled into named classes | No long utility lists on each element |
| Responsive rules | Tablet, mobile landscape, mobile portrait | Other widths snap to the nearest breakpoint |
| Hover and focus styles | Hover and Focus states | |
| Images | Image elements | Uploaded to Webflow Assets when your site is connected |
| Inline SVG icons | Embed elements | Editing them needs a paid site plan |
| Prompt box and Gemini responses | The text shown when you copy | The AI feature itself stays in the app |
| Firebase sign-in and Firestore data | Not copied | Link to the app instead |
| Contact or waitlist form | Webflow Form Block | Submissions go to Webflow, not your Node.js server |
Problems and fixes
I don't see the Copy to Webflow button
Reload the AI Studio tab after installing or updating FlowPaste. The preview must be at least 320 × 220 px, so widen the window if the chat panel squeezes it. If you closed the button with ✕, reload the page.
The button isn't on my deployed app
That's expected: it shows in AI Studio's editor only. On your Cloud Run URL, click the FlowPaste icon → Capture the full page, or Capture an element for one section.
The paste shows a loading spinner or an empty result
FlowPaste copies what's on screen. Wait for the app to finish calling Gemini or loading data, then copy again.
A screen behind Google sign-in didn't copy
Sign in inside the preview or on the deployed app first, go to the screen, then copy. Only the design comes across; your data pastes as static text, so replace it before publishing.
Fonts look different
Add the fonts FlowPaste lists in Site settings → Fonts, or turn on Match my site so the paste uses your Webflow site's fonts and colors.
Keep the Gemini app on Cloud Run, run the website on Webflow
An AI Studio app needs its server: Google's docs say the API key stays server-side and is "never included in client-side code". Webflow can't host that, but it's a good home for everything around it.
- Split by job. Public pages (home, features, pricing, blog) go to Webflow. The working app, its Gemini calls and Firebase data stay on Cloud Run.
- Copy the marketing pages. Copy each page from the Build preview with FlowPaste. Turn the header and footer into Webflow Components.
- Point the domains. Use www.example.com for Webflow. Send app traffic to your deployed app's public URL, or to a subdomain such as app.example.com if you set one up for it.
- Link across. Point Try it and Sign in buttons in Webflow to the app subdomain, and the app's logo back to the Webflow site.
- Keep code in GitHub. Turn on GitHub sync in AI Studio so the app's code has a home outside AI Studio while the website lives in Webflow.
After you paste
- Add the fonts in Webflow → Site settings → Fonts. FlowPaste lists them in the notes after each conversion. Until then, text that brought its own font file still shows correctly, but you can't pick the font in the Typography panel.
- Images: Webflow publishes images only from its own Assets. Connect your site once in FlowPaste → Account → Webflow images, and every paste uploads its images for you. Without it, images show in the Designer but break on the published site.
- Click through tablet, mobile landscape and mobile portrait in the Designer. Media queries are already mapped to those breakpoints; check anything the notes marked as "snapped".
- Rename or merge classes where you want your own system. Identical styles already share one class; variations are combo classes.
- Look for Embed elements (inline SVG icons, pseudo-elements, leftover scripts). They show on every plan; editing their code needs a paid site plan.
- Replace sample Gemini responses and user data in the paste with real marketing copy.
- Publish to your webflow.io staging domain and check animations and scripts there. Scroll-triggered Interactions don't always play inside Designer Preview.
Questions
Can I export Google AI Studio code to Webflow?
Not as code. AI Studio lets you download a ZIP or sync to GitHub, but Webflow can't import either. Copy the rendered preview with FlowPaste, or paste a single page's code into FlowPaste's Convert tab.
Will my app or backend work in Webflow?
No. Gemini API calls, the Node.js server, Firebase sign-in and Firestore data all need a server. Webflow hosts websites, so only the design comes across. Keep the app on Cloud Run.
Why isn't the Copy to Webflow button on my deployed app?
The button appears in AI Studio's Build mode only. On a deployed app, use the FlowPaste icon → Capture the full page, which works on any page.
Can I put a Gemini feature on my Webflow site?
Not inside Webflow itself, since AI Studio keeps your API key on the server side. Keep the feature in your deployed app and link to it from your Webflow pages.
Is this the same as Gemini Canvas?
No. Canvas is inside the Gemini app and has no separate site. AI Studio's Build mode makes full apps with a server and can deploy them. See the Gemini to Webflow guide for Canvas.
Does it work for Android apps from AI Studio?
No. AI Studio can build native Android apps with Kotlin and Jetpack Compose, but those aren't web pages, so there's nothing to copy. FlowPaste works on web apps.
Sources
- Google AI for Developers: Build apps in Google AI Studio — "A web frontend (React is the default)" and "A Node.js runtime that allows for secure API calls, database connections, and npm package usage."
- Webflow Help: Migrate your site to Webflow overview — "migrating to Webflow will be a rebuild, not a transfer"
- Webflow Wishlist: Import an existing site, or existing code, into the Webflow Designer