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
- 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.” - 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
/explorearticle generation with TOC, cross-links, streaming skeleton/visitwith 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
- groq
- nextjs
- openai
- openrouter
- typescript
Log in or sign up for Devpost to join the conversation.