Arc | Devpost

Landing page
Chat
The tree and the narrative

Inspiration

There is a moment most people in their late 20s and 30s hit: a quiet reckoning. A birthday passes. A friend announces something that stirs an old ambition. A job ends. A relationship shifts. And the question surfaces: How did I end up here? And where do I actually want to go?

This is not a mental health crisis. It is not depression. It is something more subtle and more universal: a loss of narrative coherence. The story they told themselves about who they were and who they were becoming no longer fits. The chapters don't connect. The plot feels like it wandered off somewhere around age 26.

Part of the problem is the metaphor. We are taught to think of life as a line: a timeline, a career ladder, a path. Linear frames imply that each step should logically follow the last, and that anything that doesn't fit that direction is a failure. A detour. A waste. That framing is exactly what makes people in transition feel lost.

A tree is a different metaphor entirely. A tree branches. Some branches grow thick and strong. Some were pruned. Some are just starting to bud. The roots are invisible but they hold everything up. And the shape of the whole thing only makes sense when you step back and look at it.

Arc is built on that metaphor. The branches that didn't work out (the failures, the detours, the paths abandoned) aren't interruptions to your story. They are the story. They give the tree its shape.

The tools available to people in this moment are blunt. Therapy is clinical and slow. Journaling is unstructured and lonely. Career coaching is transactional. Social media is performative. None of them help a person do the fundamental creative act at the heart of this moment: rewrite their own story.

Arc exists in that gap.

What It Does

Arc is a guided AI experience built around one metaphor: your life is a tree, not a line. It unfolds in three phases:

Conversation: Arc guides the user through 8 to 12 exchanges covering their early interests, defining choices, external pressures, recurring patterns, and possible futures. It reflects before it asks. It never prescribes. It treats failures and detours not as problems to solve but as chapters worth examining.
Tree: The full conversation transcript is sent to a second API call, which extracts a structured life tree: roots (core values that have always been present), a trunk (the central narrative thread), branches (major life chapters and decisions, including the ones that didn't work out), leaves (specific moments and memories), and buds (possible futures). This is rendered as an animated, organic D3.js visualisation that grows branch by branch. The output is not a career plan or a diagnosis. It is a living, visual map of who they are and who they might become.
Narrative: A third API call synthesises the conversation and tree data into 3 to 4 paragraphs of reflective prose, written in second person. It surfaces the connections between things the user may have only seen as failures: how the abandoned degree became the foundation for something else, how the job that didn't work out was actually a re-routing. It always closes with: "This is one way to read your arc. You might see it differently. The story is yours to tell."

How We Built It

Arc is built on Next.js with TypeScript throughout. The conversation layer uses the Vercel AI SDK with Claude Sonnet 4 as the underlying model, streaming responses in real time through a custom API route. When the conversation ends, a second API call extracts the structured life tree as JSON, and a third generates the narrative prose. Keeping these as separate calls, each with its own focused prompt, was a deliberate architectural choice: the quality of each output depends on it doing only one thing.

The tree visualisation is built from scratch in D3.js using a radial layout with custom bezier curves for the branches. Branch thickness is mapped to significance. The tree grows in animated, branch by branch, over several seconds. Every colour decision was intentional: the trunk and branches are grey, the roots are a lighter grey, and the only true colour in the entire application appears on the leaves (muted green) and buds (warm amber). Colour is reserved for what is alive and what is possible.

Page transitions use Framer Motion. State is managed with Zustand. The app is deployed on Vercel.

Challenges We Ran Into

The hardest problem was tone. We needed Arc to sit with failure without fixing it, reframing it, or turning it into a lesson. Most AI defaults toward resolution: finding the silver lining, naming the growth, completing the arc neatly. We had to work against that instinct at the prompt level, iterating on the system prompt until Arc felt like a mirror rather than a guide. The line between reflecting and prescribing is thin, and a single word choice can cross it.

The D3.js tree was the hardest technical component. Making it feel organic rather than mechanical (variable branch thickness, curved bezier paths, sequential animation) required building the layout logic from scratch. A standard top-down tree layout looked like an org chart. That would have been the wrong metaphor entirely.

Getting the JSON extraction reliable was also non-trivial. Claude occasionally wraps JSON in markdown code fences or adds explanatory text. We built defensive parsing to handle this: strip the wrapping, extract the JSON object, validate the shape before passing it to the visualisation layer.

Accomplishments That We're Proud Of

We are proud that Arc genuinely feels different from other AI products. It does not give you answers. It does not tell you what to do next. It holds up a mirror and lets you look.

The colour system is something we keep coming back to. The decision to use grey for failures and branches that didn't work out, and to reserve colour only for leaves and buds, makes the tree feel emotionally true. It took restraint to get there, and restraint is hard when you're building under time pressure.

We are also proud of the closing line of the narrative: "This is one way to read your arc. You might see it differently. The story is yours to tell." It is baked into the system prompt as a hard requirement. It is the most important line in the product.

What We Learned

Failure looks different when you can see its shape. The branches that went sideways don't disappear. They're still part of the structure. But they're no longer just weight. They're context.
What you instruct an AI not to do matters more than what you tell it to do. The guardrails in the system prompt (no prescribing, no diagnosing, no silver linings) are what make Arc feel safe.
Restraint is a design principle. We removed features until what remained felt essential. Every element on screen has to earn its place.
Separating concerns in prompts works the same way it does in code. Three focused prompts produce better outputs than one prompt trying to do everything.

What's Next for Arc

The current version is a single-session experience with no persistence. A natural next step is giving users the ability to save their tree and return to it over time, watching it grow as their story continues.

We also want to explore multi-session conversations: Arc checking in at intervals, adding new branches as life moves forward, noting when a bud has become a branch or when a branch has been pruned. A life tree that updates as you do.

There is also a community dimension worth exploring: the ability to share your tree with someone you trust, not for feedback, but for witnessing. Sometimes being seen is enough.