Core Concepts
Learn how SupaStory watches your users, finds problems, and writes code to fix them.
What Does SupaStory Actually Do?
Think of SupaStory as a helpful assistant that watches how people use your website and tells you when something's wrong. But it goes further than just telling you—it actually writes the code to fix the problem.
Here's the simple version:
- It records what users do on your site (clicks, scrolls, form fills)
- AI watches every recording and spots when users get frustrated or confused
- It writes code fixes for the problems it finds
- It creates a pull request so you can review and merge the fix
No more watching hours of session recordings yourself. The AI does it for you.
The Four Main Parts
A tiny script on your site captures what users do—where they click, what they type, and where they scroll. It's like a screen recording, but smarter.
Our AI reviews every session automatically. It knows what "frustrated user behavior" looks like—rage clicking, going in circles, abandoning forms halfway through.
When the AI finds a problem, it doesn't just report it—it writes actual code to fix it. The code matches your project's style and framework.
Fixes show up as GitHub pull requests. You review them, tweak if needed, and merge. That's it—problem solved.
How It Works Step by Step
You Add the SDK
A few lines of code in your app. Takes about 2 minutes.
Users Visit Your Site
The SDK quietly records their sessions in the background. Users don't notice anything different.
AI Watches Every Session
Our AI analyzes each recording, looking for signs of confusion, frustration, or errors.
Problems Get Flagged
When the AI spots an issue, it creates an "insight" explaining what's wrong and why it matters.
Code Gets Written
For fixable issues, the AI generates actual code changes based on your codebase.
You Review and Merge
The fix appears as a pull request on GitHub. Review it, merge it, done.
What Problems Can It Find?
SupaStory's AI catches issues that are hard to find manually:
| Problem | What It Looks Like |
|---|---|
| Rage Clicks | User clicks the same button over and over because nothing's happening |
| Dead Clicks | User clicks on something that looks clickable but isn't |
| Form Abandonment | User starts filling out a form but gives up halfway |
| Error Loops | User keeps hitting the same error without finding a way forward |
| Slow Responses | Button or page takes so long that user thinks it's broken |
| Navigation Confusion | User going back and forth, clearly lost |
Helping the AI Understand Your Code
The AI writes better fixes when it knows more about your project. You can tell it what framework you use and how your code is organized.
In your dashboard, go to Settings > App Context and add details like:
{
"framework": "react",
"typescript": true,
"componentLibrary": "shadcn-ui",
"stateManagement": "zustand"
}The more context you give, the better the generated code will match your style.
Privacy Is Built In
We know session recording sounds sensitive. That's why privacy protections are on by default:
- User data is anonymized — We don't store names, emails, or personal info
- Sensitive inputs are hidden — Passwords, credit cards, etc. are automatically masked
- You control what's recorded — Block specific elements or pages entirely
- Compliant with privacy laws — GDPR and CCPA ready out of the box
Learn more in the Privacy docs.
Next Steps
Now that you understand how SupaStory works:
- Installation — Add SupaStory to your project (takes ~2 minutes)
- Session Analysis — Deep dive into how insights work
- Privacy Controls — Configure data handling for your needs