);
}
// ============================================================
// DEMO 1 — URL UX audit
// ============================================================
function DemoURLAudit() {
const [url, setUrl] = React.useState("");
const [loading, setLoading] = React.useState(false);
const [progress, setProgress] = React.useState(0);
const [findings, setFindings] = React.useState(null);
const [error, setError] = React.useState(null);
const examples = ["stripe.com", "linear.app", "notion.so", "airbnb.com"];
const run = async () => {
if (!url || loading) return;
setLoading(true);
setFindings(null);
setError(null);
setProgress(0);
// simulated UX-agent progress
const stages = [12, 28, 52, 74, 90];
let stage = 0;
const tick = setInterval(() => {
if (stage < stages.length) {
setProgress(stages[stage++]);
}
}, 380);
try {
const prompt = `You are a UX-research agent simulating a first impression of a SaaS marketing site. The user's site is "${url}".
Return ONLY valid JSON, no prose, with this exact shape:
{"firstImpression":"…(one sentence, plain language, in voice of a real visitor)…",
"findings":[
{"title":"…short specific issue title…","severity":"high|med|low","detail":"…1 sentence specific UX critique referencing the type of site…","evidence":"…one short imagined participant quote with a timestamp prefix, e.g. '02:14 — \\"…\\"'…"},
... 3 to 4 findings total
],
"confidence": 0.62 to 0.92
}
Be specific to the kind of company "${url}" appears to be — invent plausible critique like a senior product researcher would. No markdown. No \`\`\`.`;
const txt = await window.claude.complete(prompt);
let parsed;
try {
// strip code fences just in case
const clean = txt.trim().replace(/^```(?:json)?\s*/i, "").replace(/```\s*$/, "");
parsed = JSON.parse(clean);
} catch (e) {
throw new Error("Couldn't parse the audit. Try again.");
}
setProgress(100);
setFindings(parsed);
} catch (e) {
setError(e.message || "Something went wrong.");
} finally {
clearInterval(tick);
setLoading(false);
}
};
return (
<>
An AI agent simulates a first-time visitor task, then surfaces friction points with imagined source quotes. In the full platform, agents test live sites and back every finding with real participant evidence.
{loading && (
<>
UX AGENT NAVIGATING · {progress}%
)}
{!loading && error && (
{error}
)}
{!loading && !findings && !error && (
▢ OUTPUT WILL APPEAR HERE
)}
{!loading && findings && (
FIRST IMPRESSION
"{findings.firstImpression}"
FRICTION FINDINGS · {findings.findings.length}
{findings.findings.map((f, i) => (
{f.title}
{(f.severity || "med").toUpperCase()}
{f.detail}
{f.evidence && (
{f.evidence}
)}
))}
{findings.confidence !== undefined && (
)}
)}
);
}
// ============================================================
// DEMO 2 — Research question → study plan
// ============================================================
function DemoQuestionGenerator() {
const [q, setQ] = React.useState("");
const [loading, setLoading] = React.useState(false);
const [plan, setPlan] = React.useState(null);
const [error, setError] = React.useState(null);
const examples = [
"Why are users abandoning checkout?",
"Which onboarding screen confuses new users most?",
"How do shoppers react to our new packaging?",
"Does our pricing message land with mid-market buyers?",
];
const run = async () => {
if (!q || loading) return;
setLoading(true);
setPlan(null);
setError(null);
try {
const prompt = `You are an AI research planner. The user's research question is: "${q}".
Return ONLY valid JSON (no prose, no markdown, no code fences) with this exact shape:
{
"studyType": "one of: AI-Moderated Interviews | Agentic UX Test | Concept & Video Test | Synthetic Focus Group",
"audience": "1-line description of the recommended participant audience",
"n": "recommended sample size as a string, e.g. '40 participants'",
"timeline": "estimated time, e.g. '5 days'",
"guide": ["5 short interview / task questions worded like a senior researcher would ask"],
"outputs": ["3-4 concrete deliverables, e.g. Executive PDF, Clip reel, Pattern clusters, ..."]
}`;
const txt = await window.claude.complete(prompt);
const clean = txt.trim().replace(/^```(?:json)?\s*/i, "").replace(/```\s*$/, "");
const parsed = JSON.parse(clean);
setPlan(parsed);
} catch (e) {
setError("Couldn't generate a plan. Try a more specific question.");
} finally {
setLoading(false);
}
};
return (
<>