Newt — Project Overview


Tools used

  • Groq API (GPT-OSS) — fast text generation for article & page content
  • OpenRouter → Gemini 2.5 Flash (image preview) — auto cover images and inline visuals
  • Anthropic Claude Code — coding assistant for debugging, small scripts, generating tests, and “vibe coding” (rapid prototyping / exploratory, human-friendly suggestions)
  • Frontend / Infra — Next.js 15, React 19, Tailwind CSS 4, shadcn/ui
  • Optional browser automation — Playwright (for stubborn pages / testing recipes)
  • Streaming & runtime — SSE (Server-Sent Events) + edge-optimized deployment

Inspiration

Every site makes you relearn a mini-UI (navs, pop-ups, cookie walls, ads). Researching across tabs becomes a tax on attention. We asked: what if the browser could recompile any site into a single, task-focused interface that matches your intent? That idea plus our obsession with LLMification (turning human-first pages into structured, model-friendly views) led to Newt.


What it does

Newt acts like an AI browser layer. When you ask to “open” a topic or site, it builds a clean, consistent interface on the fly.

Modes

  1. Explorer (/explore) — Wikipedia-style article generation with auto covers, table of contents, and internal cross-links. Supports prompts like “explain it to a five-year-old.”
  2. Website simulator (/visit) — Type any site name (Twitter, Hogwarts, Spotify, …) and Newt synthesizes a realistic layout (nav, feeds, forms) as interactive UI components backed by structured JSON.

Key UX

  • Task-first layouts (feeds → cards; long reads → outline + summary)
  • Cross-site consistency (keyboard model, layout system, share menu)
  • Streaming render (skeleton first; content fills in as it’s parsed and generated)

How we built it

Architecture (planner → parser → schema → renderer)

  • Intent planner — interprets the command and picks a strategy (API, RSS, HTML)
  • Fetcher / parser — Readability + DOM slicing + site “recipes” to normalize text, images, links
  • Schema builder — Groq converts parsed content into an immutable PageGraph (JSON nodes like Feed, Card, Article, Action) using function-calling and JSON-schema guards
  • Deterministic renderer — React/Next.js renders PageGraph with a small design system
  • Action bridge — safely routes actions to official APIs or scripted endpoints where possible

Where each tool fits

  • Groq: main text generation (leads, sections, summaries, TOC, cross-links)
  • OpenRouter → Gemini 2.5 Flash: cover images + inline image previews
  • Claude Code: debugging flows, generating Playwright recipes, auto-tests for site recipes, quick refactors, and vibe coding (fast exploratory scaffolding and readable pseudo-code)

Stack / infra

  • Frontend: Next.js 15 + React 19 + Tailwind CSS 4
  • Runtime: edge-optimized deploys + SSE streaming
  • Optional scraping & test harness: Node + Playwright
  • Guardrails: JSON-schema validation, unit tests for recipes, retries & fallbacks

Tiny PageGraph example

{
  "type": "Feed",
  "title": "Reddit • r/typescript • hot",
  "items": [
    {"type": "Card", "headline": "TS 5.x Decorators", "meta": {"upvotes": 842}, "actions": ["open","summarize","save"]},
    {"type": "Card", "headline": "Type-safe i18n", "meta": {"upvotes": 511}, "actions": ["open","summarize","save"]}
  ]
}

Challenges we ran into

  • Determinism vs. creativity — strict JSON/PageGraph while keeping content readable
  • Latency — balancing fetch → parse → LLM → render without hurting UX
  • Anti-bot & edge cases — auth walls, infinite scroll, heavy SPAs, paywalls need special recipes/fallbacks
  • Action safety — mapping “write”/“post” actions back to sources safely (limits, consent, OAuth)
  • Visual consistency — one design language that still “feels right” across simulated sites

Accomplishments we’re proud of

  • A working intent → schema → render pipeline across multiple domains
  • Streaming render that surfaces structure early to reduce perceived latency
  • A compact, validatable PageGraph that’s expressive yet small enough to lint and test
  • Early demos: noisy forum threads → filterable boards; one-click outlines for long reads
  • Developer velocity: Claude Code materially sped up debugging, test gen, and exploratory vibe-coding sessions (including Playwright recipe fixes)

What we learned

  • Typed function calls + JSON-schema constraints cut failure modes and make rendering predictable
  • Progressive disclosure (skeleton → coarse → fine) beats “wait for full payload”
  • Site recipes (few-shot + DOM selectors) save tokens and reduce errors — invest early
  • A lightweight “cost sense” (tokens, latency, and validation errors) helps decide when to call the model vs. when to lean on parsing/templates
  • A second assistant (Claude Code) as a code-level debugger/test-scaffolder is a legit speed boost

What’s next for Newt

  • OAuth + write actions (login, reply, upvote, save) with safe mappings to upstream APIs
  • Recipe library & community (curated top sites + contributions to expand coverage)
  • Edge & local models (selective local inference for privacy/cost)
  • Accessibility (robust keyboard navigation, screen-reader roles mapped from PageGraph nodes)
  • User theming & focus modes (study, research, quick-skim presets)
  • Benchmarking (cognitive-load and time-to-answer vs. traditional browsing)
  • Tooling (deeper Claude Code integration for automated test generation and recipe linting; tighter OpenRouter/Gemini image pipelines)

Scope & status (no fluff)

Working in the demo

  • /explore article generation with TOC, cross-links, streaming skeleton
  • /visit with a handful of realistic templates rendered from PageGraph
  • Image previews via Gemini 2.5 Flash
  • Parser + recipes for select sites; schema validation; basic unit tests
  • Claude Code used for debugging, Playwright recipes, and vibe-coding prototypes

Planned / not shipped yet

  • Auth-backed write actions, broader recipe coverage, robust paywall handling
  • Persistent saves, full keyboard model across all views, comprehensive accessibility
  • Selective local/edge inference and formal benchmarks

Built With

Share this project:

Updates