~10
Lines of code
On a Next.js server component, call the SSR endpoint with your org API key and render the returned assembly. Zero flicker: the personalised HTML ships in the first response.
`ts // app/page.tsx (Server Component) const res = await fetch('https://spectare.ai/api/assemble/ssr', { method: 'POST', headers: { 'Content-Type': 'application/json', Authorization: Bearer ${process.env.SPECTARE_API_KEY}, }, body: JSON.stringify({ orgSlug: 'your-slug', pageUrl: '/' }), }); const { assembly, intent } = await res.json(); // Pass to <PersonalisedSection initialAssembly={assembly} initialIntent={intent} /> `
The endpoint runs qualify and assemble in one server-to-server call, so the first paint is already personalised. Find your API key in the Spectare admin under Settings.
This is one atom from the Spectare content library. Spectare assembles the right atoms for each visitor in real time, based on who they are and how they arrived.