Installing Sprig in AI-Generated Prototypes

Tools like Lovable, Figma Make, Replit, Vercel v0, Builder.io, Claude, and AI Studio let you build a working prototype just by describing what you want, no coding experience required. You can use the same approach to add Sprig to a prototype: paste the Sprig install snippet into the chat and ask the AI to add it for you. Once it’s installed, you can start running In-Product Surveys, Heatmaps, Replays, and Feedback Studies!

You don’t need to write or read any code. Everywhere this page says “give this to the AI,” it means literally paste it into the chat box of the tool you’re using, the same way you’d ask it to change a button color.

This page is for anybody with no coding background. Find your tool in the table below, then expand its section for the exact prompt to use and anything specific to that tool.

Want more precise targeting, or more context on respondents?

No-code events cover most cases, but Next Steps with Your AI Prototype has the prompt for code events and attributes. Works the same way on every tool on this page.

Find your tool

Which install method to ask for (HTML snippet vs. npm/pnpm package) depends on how the tool bundles your prototype’s code under the hood, not on anything you’re doing wrong. The table below summarizes what we’ve verified for each tool.

Prototype Tool	Ask the AI for…	Why
Lovable	HTML snippet	Easiest to use + does not support npm
AI Studio	HTML snippet	Same structure as Lovable
Claude (Artifacts)	HTML snippet	Artifacts are self-contained HTML documents by default, there’s no bundler to install an npm package into.
Figma Make	npm or pnpm	Supports the standard SDK install.
Builder.io	npm or pnpm	Supports the standard SDK install; how you trigger surveys depends on whether you’ve deployed yet.
Replit	HTML snippet or npm	Both work; Replit’s terminal uses `pnpm` instead of `npm` if you ever need to run a command yourself.
Vercel v0	HTML snippet	Works fine even though v0 can use npm; architecture more suited for HTML snippet

Using a tool that’s not listed here, or a general-purpose AI coding assistant like Cursor? Those tend to work more like adding Sprig to a website you already host yourself, rather than a one-click prototype flow. Email support@sprig.com and we can help, or try the general steps below.

The General Pattern

Whichever tool you’re using, the underlying steps are the same. Build your prototype first and get it working the way you want, don’t worry about Sprig until then:

Go to your Sprig instance and open Integrations > Javascript SDK to get your Environment ID. (Ask your Sprig admin for access if you don’t have it.)
Copy the right prompt for your tool from Prompts below, swap in your real Environment ID, and paste it into the AI’s chat the same way you’d paste in any other request.
Ask the AI to publish or deploy the prototype (the exact wording depends on the tool, e.g. “publish this” or “deploy to production”).
Open the published link (not the in-editor preview) and confirm Sprig loaded by checking for a network request to api.sprig.com in your browser’s developer tools, or by asking a teammate with engineering access to check for you.
From the Sprig dashboard, create no-code events based on your published URL, then create your study and set the trigger. More on creating your audience and testing FAQs.

A prototype that’s still open in the tool’s own editor/preview window is not the same as a published prototype. Several tool-specific caveats below only show up in the editor preview and disappear once the prototype is actually deployed.

Prompts

There are two prompts below: one for the HTML snippet, one for the npm/pnpm package. All you need to do is copy & paste one of these prompts into your AI assistant! Which one applies to your tool is called out in the table above and again in Tool-specific notes, so check there before you paste either one in.

Swap in your real Environment ID before sending either prompt. You’ll find it in your Sprig instance under Integrations > Javascript SDK.

HTML snippet prompt

Lovable, AI Studio, Claude Artifacts, Replit, and v0 all use this one. It tells the AI to add the snippet right before the closing </body> tag, not the <head>. The script loads asynchronously, so placement doesn’t affect load time, but </body> is Sprig’s own recommendation since it guarantees the snippet can never be what’s blocking the rest of the page from rendering.

Add this script tag right before the closing </body> tag of my site, exactly as written, don't change anything in it:

<script type="text/javascript">
   (function(l,e,a,p) {
     if (window.Sprig) return;
     window.Sprig = function(){S._queue.push(arguments)}
     var S = window.Sprig;S.appId = a;S._queue = [];window.UserLeap=S;
     a=l.createElement('script');
     a.async=1;a.src=e+'?id='+S.appId;
     p=l.getElementsByTagName('script')[0];
     p.parentNode.insertBefore(a, p);
   })(document, 'https://cdn.sprig.com/shim.js', 'YOUR_ENVIRONMENT_ID');
 </script>

npm or pnpm prompt

Figma Make and Builder.io use this one, since both support installing the SDK as a package directly.

Install the Sprig SDK using npm or pnpm. 
Once it is in package.json, add this import to App.tsx: 
import { sprig } from '@sprig-technologies/sprig-browser'; 
Then add this at the top level of App.tsx, outside of any component or function: 
export const Sprig = sprig.configure({ environmentId: 'YOUR_ENVIRONMENT_ID' }). 
Do not add any components. Do not create any new functions. Do not make any other calls to the Sprig SDK.

Tool-specific notes

Lovable

Always ask for the HTML snippet, not the npm package.Paste the HTML snippet prompt into Lovable’s chat, then ask Lovable to publish, and verify on the published link.

AI Studio

Always ask for the HTML snippet, not the npm package.Paste the HTML snippet prompt into AI Studio’s chat, then ask AI Studio to publish, and verify on the published link.

Claude Artifacts

Claude builds Artifacts as a single self-contained HTML file, not a project with a package manager. Use the HTML snippet prompt and have Claude add it right before the closing </body> tag of the Artifact’s HTML.The bigger catch: Artifacts run in a sandbox that blocks most outgoing calls to third-party services, including the calls Sprig’s SDK makes to api.sprig.com. Sprig won’t work in the live Artifact preview inside Claude, even with a correctly installed snippet, and there’s no way around this from within Claude itself. Take the code Claude wrote and deploy it somewhere outside the sandbox, for example Vercel, Netlify, or GitHub Pages. Once it’s on a real URL, the restriction disappears.

If you ask Claude “why isn’t Sprig showing up?” while still inside the Artifact preview, the answer is almost always this network restriction, not a problem with your snippet or your Sprig setup.

Figma Make

You’ll need a Figma Make account and your Sprig Environment ID.Paste the npm or pnpm prompt into the Figma Make agent chat panel, swapping in your Environment ID, then publish your prototype and verify Sprig loaded on the published link, which will end in .figma.site.Re-deploying later is as simple as making changes in Figma Make and republishing.

Builder.io

Builder.io works with Sprig, but its in-editor preview is sandboxed in a way that affects no-code events (the click and URL-based triggers you set up in Sprig’s Targeting module without writing code). Depending on your workflow, you’ll follow one of two paths:

	Path A: I want to use no-code events	Path B: I only want to share the Builder preview
How to trigger surveys	No-code or code events	Code events only
Works in Builder’s preview	No, no-code events don’t work in the preview	Yes
Requires deployment	Yes (one-click via Builder to Netlify or Vercel)	No

You’ll need your Sprig Environment ID either way. Paste the npm or pnpm prompt into Builder’s agent chat with your Environment ID swapped in.

Path A: No-code events
Path B: Builder preview only

You’ll need a Builder.io Pro or Enterprise account for this path (there’s a free-tier workaround below if you’re not on one).

In Builder’s agent chat, type “Host this app with Netlify” or “Host this app with Vercel.” Builder will ask to connect your account if it needs to, then deploy automatically to a real URL like https://your-project.netlify.app.
That deployed URL is the link you share with participants, not the *.projects.builder.my preview, and the one you’ll use when creating no-code events from the Sprig dashboard.
Re-deploying later is just “Redeploy to Netlify” (or Vercel).

If a survey isn’t showing up for participants, check that you’re sharing the deployed URL rather than the preview link, and that the trigger event name matches exactly. If Builder’s agent made unexpected changes while installing the SDK, restore a checkpoint in its History panel and re-run the install prompt exactly as written. If the deploy itself fails, paste the error from Builder’s agent into the chat and ask it to fix the build.

On the free plan? Deploy without one-click Netlify/Vercel

Builder’s one-click Netlify/Vercel deploy is paid-plan only. You can still deploy for free using GitHub as a go-between:

In the Builder editor, open the ⋮ menu → “Create Repo” or “Sync from GitHub”
Connect your GitHub account and create a repository
Go to netlify.com → “Add new site” → “Import an existing project” → choose your repo
Netlify auto-detects the build settings and deploys, giving you a *.netlify.app URL

Skip deployment and test in Builder’s preview instead, though every new event needs its own code change.

Prompt the agent: “Add Sprig.track(‘my_event_name’) when the page loads” (or “…when the user clicks this button”).
Create your Sprig study and trigger it with that event name.
Open the Builder preview, either in-editor or the *.projects.builder.my share link, to see it work.

Switch to Path A whenever you’re ready for real participants; the code event keeps working there too.

Replit

Both the HTML snippet and the npm package work in Replit. If you ever need to run a command yourself in Replit’s terminal, note that Replit uses pnpm instead of npm.Paste your chosen prompt from Prompts into Replit’s chat, then ask Replit to publish or deploy, and verify on the published link.

Vercel v0

Always ask for the HTML snippet, not the npm package, even though v0 builds Next.js apps that normally use npm for everything else. If you peek at the code afterward and it looks a little different from what you pasted, that’s expected, not a mistake, v0 just needs to write it into the page slightly differently.Paste the HTML snippet prompt into v0’s chat, then ask v0 to publish or deploy, and verify on the published link.

Going Further

Once Sprig is installed, no-code events already cover most targeting needs. For finer-grained targeting with code events, or to capture more context about respondents with attributes, see Next Steps with Your AI Prototype. The same prompt works on every tool above.

Troubleshooting

If Sprig doesn’t seem to be working:

Confirm you used the install method recommended for your tool (see the table above).
Confirm the prototype has been published/deployed, not just previewed inside the tool.
Test again on the live, deployed URL rather than the in-editor preview.

If you’ve done all three and Sprig still isn’t showing up, reach out to support@sprig.com with the tool name and a link to your deployed prototype.

If you try another AI prototyping tool and find an installation method that works, let us know at support@sprig.com so we can add it here.

Welcome to Sprig

Sprig Studies

Shared Study Foundations

Native AI

Installation

Integrations

Developer Center

Account & Settings

Privacy & Security

Study Best Practices

Support

Installing Sprig in AI-Generated Prototypes

Want more precise targeting, or more context on respondents?

Find your tool

The General Pattern

Prompts

HTML snippet prompt

npm or pnpm prompt

Tool-specific notes

Going Further

Troubleshooting

Want more precise targeting, or more context on respondents?

​Find your tool

​The General Pattern

​Prompts

​HTML snippet prompt

​npm or pnpm prompt

​Tool-specific notes

​Going Further

​Troubleshooting

Find your tool

The General Pattern

Prompts

HTML snippet prompt

npm or pnpm prompt

Tool-specific notes

Going Further

Troubleshooting