Project Info
Inspiration
Honestly, this started from my own problem. I read a lot: newsletters, articles, threads, and I'd constantly copy things into ChatGPT, ask a few questions, and try to piece together a takeaway by hand. It was messy and I lost most of what I read. The bottleneck was never reading; it was turning what I read into a clear point of view I could actually use or post. I come from a marketing analytics background, and the part I kept wishing I could automate wasn't the writing, it was the analysis: what actually matters here, and who cares. So I wanted to see if that specific lens could become an AI pipeline, instead of just another "summarize this" tool.
What it does
Lens takes an article (via URL or pasted text) and runs it through three chained GPT-5.6 nodes, each shown as a live progress step: Context Parsing : pulls out the topic, source type, key claims, and background Core Insights + Market Angle : analyzes it through a marketing/audience lens to surface what matters and to whom X Thread Generation : turns that analysis into a ready-to-post thread Output shows up as three cards: Core Insights, Market Angle, X Thread, each with one-click copy. Most content-repurposing tools jump straight from summary to draft, which is why they feel generic. The whole point of Lens is that middle step: it decides what's worth saying, and to whom, before writing anything. How I built it I built this entirely with Codex, and honestly the biggest thing that made it work was scoping ruthlessly. I locked a tiny MVP up front so I wouldn't spiral into feature creep on a tight timeline: Scaffolded the Vite + React app and verified the build Wrote the 3-node pipeline (server/pipeline.js) with structured JSON output so each node reliably feeds the next Built the full dark-theme UI with live per-step progress states and copy-to-clipboard cards Added URL extraction (via Mozilla Readability) as an enhancement after the core paste-text flow was working end to end Kept the OpenAI API key server-side throughout The key calls I made: a 3-node pipeline instead of a multi-agent framework (reliability over ambition, given the time), making the marketing-analysis node the actual differentiator; and forcing structured JSON over free-text parsing so the chain wouldn't quietly break between steps. Challenges I ran into The chained calls were finicky at first, a small schema mismatch in an early node would cascade and break the next one. Locking every node to a strict JSON schema fixed it. URL extraction was the other one: it's easy on clean sources like Wikipedia, but real-world blogs and newsletters don't always parse, so I added a fallback that just asks the user to paste the text instead of failing silently. What I learned That reliable multi-step AI pipelines come down to the contracts between steps far more than clever prompting, and that scoping small (3 nodes, one input flow, no auth or database) is exactly what let me ship something complete instead of something ambitious and broken. As someone still fairly new to building like this, that lesson stuck.
What's next
More output formats (Instagram, TikTok, LinkedIn), YouTube transcript input, and a lightweight history so I can revisit past analyses.
Lens — Content Intelligence Pipeline
Turn any article or URL into core insights, a market angle, and a ready-to-post X thread.
Lens is a 3-node GPT-5.6 pipeline that takes raw text or a URL and runs it through chained reasoning steps — parsing → analysis → content generation — so knowledge workers and content creators can go from "too much information" to a clear, publishable point of view in seconds.
Built for OpenAI Build Week 2026 · Track: Work and productivity
What it does
Paste an article (or drop in a URL) and Lens runs it through three sequential GPT-5.6 nodes, each visible as a live progress step:
- Context Parsing — extracts the topic, source type, key claims, and background context
- Core Insights + Market Angle — surfaces the insights that matter, identifies who they matter to, and finds the contrarian/practical angle worth highlighting (this is the differentiator: most tools skip straight to writing and lose the analysis layer)
- X Thread Generation — turns the analysis into a scroll-stopping, ready-to-publish thread
The output renders as three cards — Core Insights, Market Angle, X Thread — each with one-click copy.
Why this design
Most "article-to-content" tools jump from source → draft and produce generic summaries. Lens deliberately inserts an analysis layer in the middle, applying a marketing/audience-strategy lens before any content is written. The result reads more intentional and less like an average-of-the-internet summary.
The chained-node architecture (rather than a single prompt) also makes the reasoning transparent and each stage independently improvable.
Tech stack
- Frontend: React + Vite (single page)
- Backend: Node/Express API, keeps the OpenAI key server-side
- Model: OpenAI GPT-5.6 via the Responses API with structured JSON output for reliable, parseable results at every node
- URL extraction:
@mozilla/readability+jsdomto pull clean article text from a link - Built with: OpenAI Codex
How Codex and GPT-5.6 were used
GPT-5.6 is the reasoning engine behind all three nodes. Each node uses a distinct system prompt and structured JSON schema so its output can be reliably passed into the next node — parsing feeds analysis, analysis feeds thread generation.
Codex accelerated the entire build:
- Scaffolded the Vite + React project from scratch and verified it built
- Wrote the 3-node pipeline (
server/pipeline.js) and wired the sequential API calls - Built the full dark-theme UI with live per-step progress states and copy buttons
- Added URL extraction as a later enhancement, keeping paste-text intact, and handled the failure/fallback case
- Handled cross-cutting concerns (server-side key handling,
.gitignore,.env.example)
Key decisions (where human direction shaped the build):
- Locking scope to a 3-node pipeline instead of a multi-agent framework, to keep it reliable and demoable
- Inserting the marketing/audience analysis as a dedicated middle node — the core idea that differentiates Lens
- Prioritizing structured JSON output over free-text parsing for reliability between nodes
- Adding URL support as a bonus only after the core paste-text flow was verified end to end
Run it locally
Prerequisites: Node.js installed, and an OpenAI API key with credit.
-
Clone the repo:
git clone https://github.com/diudiu626/lens.git cd lens -
Install dependencies:
npm install -
Create a
.envfile in the project root (see.env.example):OPENAI_API_KEY=your_api_key_here -
Start the app (runs Vite + the API server together):
npm run dev -
Open
http://localhost:5173
Try it: Click "Try an example" to auto-fill a sample article, or paste your own text / a URL, then hit Run pipeline.
Sample input
Any article, essay, transcript, or newsletter works well. The built-in example is a short piece on AI content workflows. URLs from most standard blogs, news sites, and newsletters extract cleanly; if a page can't be parsed, Lens tells you to paste the text manually.
Analysis
View
Metric
- 3
Figures cover GitHub contributors during the hackathon window. A co-authored commit counts in full for each author, so per-member totals add up to more than the whole-team figures.
Technology
- CSSIn code
- ExpressIn code
- HTMLIn code
- JavaScriptIn code
- OpenAIIn code
- ReactIn code
- Node.jsClaimed
6 of 7 appear in the indexed code. 1 claimed on Devpost could not be matched to code, which may simply mean the tool leaves no trace in the repository.
AI coding agents
No AI coding agent signals were found in this repository.
Detected from committed agent config files and commit authorship. Absence of a signal is not proof an agent was unused.
Codebase size
Source size
27 KB
Source files
12
Counts recognized source files only; vendored directories, binaries and lockfiles are excluded, so this is smaller than the repository on disk.
Repository
diudiu626/lens
23 files · 185 KB · @ 95c5ddc
Structure
Interface
1 file · 4%Screens, components and styles rendered to the user.
API & routing
5 files · 22%Request entry points: routes, handlers and controllers.
Application logic
5 files · 22%Domain rules, services and shared utilities.
Supporting
Layers are inferred from where files sit in the tree, not from reading the code. A project that names its directories unconventionally will read oddly here — open the file browser to check anything the diagram implies.
Languages
- JavaScript64%
- CSS19%
- Markdown15%
- HTML1%
Share of indexed source by file size. Binary and vendored files are excluded.
Dependencies
package.json
npm · 13- @mozilla/readability
- concurrently
- dotenv
- express
- jsdom
- openai
- react
- react-dom
- +5 more
Declared in the repository’s manifests at the indexed commit. A declared package is not proof it is used, and runtime dependencies are listed first.
This project’s features have not been analysed yet.
Export this project's context (description, README, evidence, key source files) to chat with an AI agent elsewhere.