01
CHAT COMPONENT
Dual-mode chat
One React component, two modes. A collapsed hero input embedded in the page, and a full conversation overlay it expands into. No separate widgets.
By Stefan Heißenberg
Get to know me faster.
Fifteen years designing digital products across agencies, consulting, startups, and enterprise. Ask questions and find out directly what you need to know.
You just talked to it.
Here’s how it works —and how you’d fork it for yourself.
One React component, a twelve-file knowledge base, and a request path you can read in a single glance.
It’s open-source, EU-region by default, and built on opinionated defaults instead of configuration. Clone it, point it at your own story, ship it on a hobby plan. Everything below is real and verified against the repo.
THE PAYLOAD
Five things you can fork.
Most projects give you one thing worth copying. This one gives you five — each lifts out on its own.
02
THEME SYSTEM
Identity in CSS vars
Visual identity lives entirely in CSS custom properties on data-theme blocks. One data-theme on the host recolors the whole page — chat hero and docs together — with no theme branching in component code.
03
CONTEXT LOADER
Private targeting
Per-company calibration files live in Upstash, matched by keyword, lifecycle-gated so withdrawn applications drop out automatically. The public component never carries your private targeting.
04
WRITING SKILL
A documented method
A method for writing those context files in your own voice — without leaking who you’re applying to. Context entries live in Upstash and are matched at runtime — the count changes as applications move through their lifecycle.
05
THIN EMBED
Host page is three lines
The component handles its own embedding; the host only controls layout. Drop it into any page and it brings its own everything.
REQUEST PATH
How it works, end to end.
A single request, left to right. No vector database — the whole knowledge base fits in the context window.
01 · CallerHost pageRenders
<Chat /> — three lines of markup.INSIDE /api/chat · NODE RUNTIME
02 · GuardRate limitUpstash Redis, sliding window per IP.
03 · AssembleSystem promptTwelve-file knowledge base, prompt-stuffed and cached. No RAG.
04 · MatchContext matchScans
ctx:* keys in Upstash, injects the matched company file if one fires.05 · GenerateClaude Haiku 4.5Streams the response back, token by token.
06 · ObserveLangfuse (observability wrapper) · EUEvery turn traced via the observe() wrapper, grouped into session replays.
Request inStreamed response out
THE FORKER’S PATH
Integrate it in four steps.
Concrete, in order, with the real shapes. The host page is the punchline.
- 1
Fork & install
Clone the repo,
npm install. Standard Next.js app — nothing exotic. - 2
Set your environment
ANTHROPIC_API_KEY, Upstash Redis URL + token, Langfuse keys.Env vars must not be wrapped in quotes — Next.js fails open silently if they are.
- 3
Pick or write a theme
Pass the
themeprop; or add adata-themeblock of CSS variables for your own identity. - 4
Embed it
The host page is this short →
app/page.tsx
import { Chat } from "@/components/chat/Chat";
<section
style={{ ["--chat-hero-min-height-desktop"]: "100dvh" }}>
<Chat theme="dark-tokyo" />
</section>UNDER THE HOOD
The proof, not the pitch.
Behavioral facts, all verified against the repo. No best-in-class adjectives.
21 · 6
Eval cases, six suites
Boundary testing, company context, factual accuracy, persona adherence, response quality, safety & jailbreak. Run as a CI gate.
EU
Region by default
Redis and Langfuse both in Frankfurt. No third-party ad trackers.
Traced
Observability built in
Every conversation traced in Langfuse, grouped into session replays.
Per-IP
Rate-limited
A sliding window per IP, enforced on the API route before any model call.
€0–8 /mo
Running cost
Vercel Hobby, Upstash free tier, Langfuse Hobby, a Haiku-class model.
No RAG
A deliberate choice
Prompt-stuffed knowledge base with caching. Simpler, cheaper, and the whole story fits in context.
BUILT ON PRIOR ART
This stands on the foundation of Santiago Fernández’s cv-santiago — the dual-mode chat idea and the thin-embed pattern started there. Forked forward, themed, and extended.