AI assistants and copilots
Products where the demo is the argument: summarisation, drafting, meeting intelligence and agent tooling.
SaaS marketing templateAI Productivity
AI SaaS React Template
A React and TypeScript frontend for assistants, copilots and research workspaces — built around a console that runs, not a screenshot of one.
- Template
- Synthesis
- Type
- Landing page
- In kit
- 01 / 11
02Overview
What the AI SaaS React Template gives you.
Synthesis is the KRENOS AI SaaS React template: a complete landing page for a product whose value is hard to photograph. Instead of a static hero image, the page opens with an assistant console that streams a response, so a visitor sees the product behave within the first screen.
It is a marketing and conversion page — positioning, proof, pricing and sign-up — not a signed-in application. If you need the product side of an AI tool, the KRENOS kit also includes five product interfaces.
03Key features
Built around what this template actually does.
- 01
Streaming console hero
The hero renders a compressed executive brief token by token, with a build-status strip beside it. The cadence is driven by typed demo data, so it reads the same on every load.
- 02
Spatial thinking canvas
An entity-relationship canvas connects a central decision to its valuation, dilution, legal and forecast nodes — an accessible SVG with a described label, not an image.
- 03
Pricing tiers with a comparison table
Three tiers with a featured card, per-line feature notes and CTAs that point at the page’s own sign-up anchor.
- 04
Editorial type and grid
Playfair Display headlines over an Outfit interface face on a 12-column editorial grid, so the page reads like a considered publication rather than a generic SaaS card layout.
04What's inside
8 sections, in page order.
Every one is a working part of the live template, not a screenshot. Open the demo to use them.
- 01
Hero with live console
Headline, sub-copy, primary action and the streaming brief panel.
- 02
Customer strip
A restrained logo row for social proof.
- 03
Mechanics
“Radical compression of unstructured complexity” — how the product works, in three movements.
- 04
Spatial canvas
The infinite-canvas section with the connected decision graph.
- 05
Dispatches
An editorial block for changelog, essays or research notes.
- 06
Pricing
Three tiers with a featured plan.
- 07
FAQ
An accessible accordion with keyboard support.
- 08
Closing call to action
A full-width inverse panel with the final conversion action.
05Who it's for
Products this direction suits.
Research and knowledge platforms
Teams selling synthesis over documents, transcripts and market signals to a senior audience.
Internal AI platforms going public
An internal tool that now needs a credible external page with pricing and a clear proposition.
06Technology & customization
The stack underneath.
- React 18 with strict TypeScript — no `any`
- Tailwind CSS tokens compiled at build time
- Route-level code splitting via React Router 6
- Scroll reveals and kinetic headlines that honour reduced motion
What you can change
- Copy, pricing and FAQ live in the page file and its data module.
- Colour roles are CSS variables — change the token, not the components.
- Swap Playfair Display and Outfit in `index.html` and `tailwind.config.ts`.
- Remove the canvas or dispatches section without touching the rest of the page.
Frontend only
The streaming response, build status and canvas are deterministic front-end simulations driven by typed fixtures. Point them at your own model or API and the loading, success and empty states already exist.
07Questions
Frequently asked.
Yes. It contains no model, backend, database or billing code. The streaming console replays typed demo data, so you connect your own inference endpoint.
React 18, strict TypeScript, Tailwind CSS and Vite — the full component source for this page, plus the shared KRENOS design system and motion runtime.
Yes. The console reads from a typed array and advances on a timer. Replace that source with a fetch or an EventSource stream; the rendering, cursor and completion states stay as they are.
Yes. One purchase covers an unlimited number of personal, commercial and client projects. Redistribution or resale of the template itself is not permitted. See the LICENSE file.
08Related templates
Others in the kit worth comparing.
Every KRENOS purchase includes all eleven, so these are alternatives to consider, not add-ons.
KRENOS · Synthesis
See it running. Then make it yours.
The demo is the real template, not a video. It opens with a thin KRENOS bar so you can switch templates, preview it at phone, tablet and desktop widths, or come back to the explorer.