Storylayer

Project Overview: Storylayer

Storylayer is a generative UI engine that transforms static personal narratives into adaptive, multi-axis pitches. In the high-stakes world of startup hiring and fundraising, the “one-size-fits-all” PDF is a relic. Our tool moves beyond simple text generation to render dynamic, relationship-aware interfaces that change based on who is clicking the link.

By analyzing a storyteller’s corpus and the specific relationship context (e.g., Founder-to-Investor), our agent identifies the storyteller’s “outstanding characteristic” and maps it to a bespoke UI format—ranging from interactive node-graphs for network thinkers to magazine spreads for narrative-driven founders. With four axes of variation—Visual Register, Narrative Archetype, Viewer-Selected Facets, and Agent-Chosen Format—we ensure that the right story is told in the right shape, every time. This is a living interface that prioritizes human connection through intelligent, structured UI.

---

Technical Stack & Implementation

Our implementation focuses on a decoupled generative pipeline, separating logic from layout to ensure high performance and “hackathon-grade” reliability.

Core Frameworks & AI Integration

• CopilotKit: Powers the storyteller’s workspace. We use CopilotKit to manage the “human-in-the-loop” editing experience, allowing the storyteller to refine extracted facets and trigger targeted regenerations without losing the overall structure of the pitch.
• Gemini 2.5 Pro & Flash:
• Pro handles Layer 2 (Narrative Shape Detection), providing the high-level reasoning required to identify subtle career archetypes and “outstanding characteristics” from raw, identity-stripped data.

• Flash manages Layer 3 (Facet & Edge Extraction) using strict JSON response schemas to populate the UI components instantly.

• A2UI (Agent-to-UI) Philosophy: We follow an A2UI architecture where the agent doesn’t just output text; it outputs a structural manifest that dictates the visual register and layout format. This manifest is then rendered via React components, ensuring the UI is interactive and deterministic rather than a fragile “hallucinated” layout.

Frontend & Data Visualization

• Next.js 14 (App Router): The backbone of the application, handling server-side data ingestion and dynamic routing for the /p/:uuid listener views.
• react-force-graph-2d: Utilized for the “Node Graph” format, translating LLM-derived “edges” (connections between life experiences) into a physics-based, interactive discovery tool for listeners.
• Tailwind CSS & Multi-Tenant Theming: A custom “Register System” that swaps typography (e.g., Fraunces for Vision-led vs. Geist Mono for Builder-led) and spacing scales based on the agent’s relationship analysis.

The 5-Layer Logic Engine

1. Layer 1 (Register): Deterministic mapping of relationship $\rightarrow$ visual style.
2. Layer 2 (Archetype): LLM-driven framing of the narrative arc.
3. Layer 3 (Extraction): Structured facet/edge generation via Gemini.
4. Layer 4 (Filtering): Rule-based viewer personalization (zero-latency).
5. Layer 5 (Format): Strength-based mapping to 1 of 12 UI candidates (e.g., quantified-impact $\rightarrow$ data-dashboard).

---

Note on Originality: Unlike standard “v0” clones or “AI-CV” builders, Storylayer treats the listener as a first-class citizen. The “Same link, different page” capability is our core innovation, ensuring that Gen-UI serves the specific informational needs of the viewer while showcasing the storyteller’s authentic strengths.