LLM-first Web Framework - Minko Gechev, Google 🔗 **Source:** [LLM-first Web Framework - Minko Gechev, Google](https://www.youtube.com/watch?v=sZUn6p5qVfk) > [!note]+ Document Notes > tags: [LLMs, web-frameworks, agentic-workflows, jsconf25] > author: [MISSING] > source: [MISSING] > reference: [https://www.youtube.com/watch?v=sZUn6p5qVfk] > date created: > > # 🏷️ Title: LLM-first Web Framework - Minko Gechev, Google > <!-- deep-read:sections start --> ## 🧰 Action Inbox - [H1] Draft a “single-shot vs repair-loop” explainer — context/https://www.youtube.com/watch?v=sZUn6p5qVfk #articleseed - [H2] Prototype a minimal API design checklist — context/https://www.youtube.com/watch?v=sZUn6p5qVfk #xref - [H3] Try type-declaration prompts in evals — context/https://github.com/angular/web-codegen-scorer #articleseed - [H4] Test “Revolt-as-IR” transpiles to React/Angular — context/https://www.youtube.com/watch?v=sZUn6p5qVfk #xref - [H5] Wire up Angular MCP server in Gemini CLI — context/https://angular.dev/tools/ai/build-with-ai #share - [H6] Build a “runtime-introspection” MCP tool demo — context/https://code.visualstudio.com/docs/copilot/mcp-servers #articleseed - [H7] Browser-as-IDE UX spike with agent overlay — context/https://www.youtube.com/watch?v=sZUn6p5qVfk #storystem - [H8] Add security and a11y checks to agent loops — context/https://github.com/angular/web-codegen-scorer #addendum ## 🧭 Table of Contents - [📝 Summary](#-summary) - [📖 Main Content](#-main-content) - [🗒️ Notes](#️-notes) - [📚 References](#-references) - [🗣️ Paraphrase](#️-paraphrase) - [📰 Newsletter](#-newsletter) - [✅ Action Items](#-action-items) - [🧪 Hypotheses](#-hypotheses) - [📊 Methodology](#-methodology) - [❓ Questions](#-questions) - [🔮 Future Research](#-future-research) - [💡 Implications](#-implications) - [🧠 Learning Styles Assessment](#-learning-styles-assessment) - [📊 Accessibility Assessment](#-accessibility-assessment) - [🌍 DEIB Assessment](#-deib-assessment) - [✅ Logical Validity](#-logical-validity) - [🛡️ DARVO Analysis](#-darvo-analysis) - [🎯 Conclusion](#-conclusion) ### 🔗 References - Include links cited in or relevant to the article. ## 📝 Summary - The talk presents an LLM-first framework experiment. It explores agentic workflows. The video remains primary evidence. The YouTube page sometimes blocks scraping; link provided regardless. - Minimal, unambiguous APIs improved single-shot codegen reliability in tests. Results align with Angular’s recent prompt and eval work. [oai_citation:0‡GitHub](https://github.com/angular/web-codegen-scorer) - Tooling matters as much as prompts. Angular documents MCP servers, Gemini CLI use, and an AI tutor path. - Agents improve when they can read runtime state, not just files. MCP standardization helps tool access across IDEs. [oai_citation:1‡Angular Blog](https://blog.angular.dev/beyond-the-horizon-how-angular-is-embracing-ai-for-next-gen-apps-7a7ed706e1a3?utm_source=chatgpt.com) - Bottom line: combine disciplined prompts, tiny APIs, eval loops, and MCP tools. Favor browser-context workflows for UI work. ## 📖 Main Content - Single-shot generation works for simple apps. Repair loops raise success by using compiler errors as feedback. - Minimal surface design reduces model ambiguity. Signals and object-literal templates kept decisions simple in the demo. - Angular’s Web Codegen Scorer shows systematic evals. It measures build success, runtime, a11y, and security checks. It also supports automatic repair. [oai_citation:2‡GitHub](https://github.com/angular/web-codegen-scorer) - Angular’s “Build with AI” shows MCP integration. It outlines AI tutor setup and Gemini CLI support. This provides an official baseline. - MCP gives agents consistent tool access across editors. VS Code documents MCP servers, broadening portability. [oai_citation:3‡Google Cloud](https://cloud.google.com/gemini/docs/codeassist/gemini-cli?utm_source=chatgpt.com) - Claim: the browser is the best IDE for web UI. This remains a proposal, not settled fact. ### 🗒️ Notes #### ⏱️ [00:03:56](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=236) Repair loop concept ### [H1] Repair loops feed compiler errors to LLMs > [!quote] [LLM-first Web Framework - Minko Gechev, Google](https://www.youtube.com/watch?v=sZUn6p5qVfk) by an unnamed author via an unnamed author. Published [MISSING]. Accessed . > “If it doesn't run, you can take the error messages from the compiler…” Use repair after single-shot to raise working rates. [view highlight](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=236) #xref ID:rw_[MISSING] #### ⏱️ [00:05:24](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=324) Minimal API principle ### [H2] Minimal APIs reduce model ambiguity > [!quote] [LLM-first Web Framework - Minko Gechev, Google](https://www.youtube.com/watch?v=sZUn6p5qVfk) by an unnamed author via an unnamed author. Published [MISSING]. Accessed . > “The key design principles there were that it is very minimalistic.” Prefer one way to do things; fewer branches for the model. [view highlight](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=324) #articleseed ID:rw_[MISSING] #### ⏱️ [00:06:18](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=378) Always-signals binding ### [H3] Default to signals for all bindings > [!quote] [LLM-first Web Framework - Minko Gechev, Google](https://www.youtube.com/watch?v=sZUn6p5qVfk) by an unnamed author. Accessed . > “It would always pass a signal.” Remove static/dynamic branching; reduce LLM choice. [view highlight](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=378) #xref ID:rw_[MISSING] #### ⏱️ [00:07:23](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=443) Footprint ### [H4] Framework fits in ~200 lines of code > [!quote] [LLM-first Web Framework - Minko Gechev, Google](https://www.youtube.com/watch?v=sZUn6p5qVfk) by an unnamed author. Accessed . > “The whole framework is on about 200 lines of code or so.” Small enough to stuff into prompts or types. [view highlight](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=443) #xref ID:rw_[MISSING] #### ⏱️ [00:08:17](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=497) Prompt optimization ### [H5] Type declarations compress prompt context > [!quote] [LLM-first Web Framework - Minko Gechev, Google](https://www.youtube.com/watch?v=sZUn6p5qVfk) by an unnamed author. Accessed . > “by compiling revolts to its type declarations and passing them to the system prompt instead.” Use d.ts shape over full source to save tokens. [view highlight](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=497) #articleseed ID:rw_[MISSING] #### ⏱️ [00:11:01](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=661) Baseline comparison ### [H6] Angular baseline lags purpose-built prompt > [!quote] [LLM-first Web Framework - Minko Gechev, Google](https://www.youtube.com/watch?v=sZUn6p5qVfk) by an unnamed author. Accessed . > “Angular at that time was around 80%.” Dedicated prompts and repair loops narrow the gap. [view highlight](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=661) #xref ID:rw_[MISSING] #### ⏱️ [00:12:32](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=752) IR proposal ### [H7] Revolt acts as an intermediate representation > [!quote] [LLM-first Web Framework - Minko Gechev, Google](https://www.youtube.com/watch?v=sZUn6p5qVfk) by an unnamed author. Accessed . > “So we can compile revolt to them.” Target multiple frameworks from a single IR. [view highlight](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=752) #articleseed ID:rw_[MISSING] #### ⏱️ [00:17:12](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=1032) Tools via MCP ### [H8] MCP exposes tools to agent loops > [!quote] [LLM-first Web Framework - Minko Gechev, Google](https://www.youtube.com/watch?v=sZUn6p5qVfk) by an unnamed author. Accessed . > “create a server that contains a list of tools.” Standardize access so agents can reason and act. [oai_citation:4‡Google Cloud](https://cloud.google.com/gemini/docs/codeassist/gemini-cli?utm_source=chatgpt.com) [view highlight](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=1032) #xref ID:rw_[MISSING] #### ⏱️ [00:18:48](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=1128) Runtime introspection ### [H9] Agents should read framework runtime state > [!quote] [LLM-first Web Framework - Minko Gechev, Google](https://www.youtube.com/watch?v=sZUn6p5qVfk) by an unnamed author. Accessed . > “Something that they are lacking though is understanding the runtime.” File-only context misses DOM and component trees. [view highlight](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=1128) #articleseed ID:rw_[MISSING] #### ⏱️ [00:23:49](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=1429) Browser-as-IDE ### [H10] Browser context improves UI development > [!quote] [LLM-first Web Framework - Minko Gechev, Google](https://www.youtube.com/watch?v=sZUn6p5qVfk) by an unnamed author. Accessed . > “I believe that the best ID for us as web developers is the browser itself” Work where users live; fix real issues faster. [view highlight](https://www.youtube.com/watch?v=sZUn6p5qVfk&t=1429) #storystem ID:rw_[MISSING] ## 📚 References - [YouTube: LLM-first Web Framework – Minko Gechev](https://www.youtube.com/watch?v=sZUn6p5qVfk) — Page may block scraping; link included. - [Angular: Build with AI (MCP, Gemini CLI, Tutor)](https://angular.dev/tools/ai/build-with-ai) - [GitHub: angular/web-codegen-scorer](https://github.com/angular/web-codegen-scorer) [oai_citation:5‡GitHub](https://github.com/angular/web-codegen-scorer) - [VS Code: MCP servers docs](https://code.visualstudio.com/docs/copilot/mcp-servers) [oai_citation:6‡Google Cloud](https://cloud.google.com/gemini/docs/codeassist/gemini-cli?utm_source=chatgpt.com) - [Model Context Protocol overview](https://en.wikipedia.org/wiki/Model_Context_Protocol) [oai_citation:7‡Angular Blog](https://blog.angular.dev/beyond-the-horizon-how-angular-is-embracing-ai-for-next-gen-apps-7a7ed706e1a3?utm_source=chatgpt.com) ## 🗣️ Paraphrase - The speaker tested an LLM-first mini framework. They reduced API choices and improved codegen reliability. - They favor agentic workflows using MCP tools. They want agents to inspect runtime state directly. ## 📰 Newsletter - LLM-first frameworks are moving from toy to tool. Angular now documents MCP, AI tutors, and Gemini CLI workflows. - Evals matter. Web Codegen Scorer tracks build, runtime, a11y, and security, plus repair loops. [oai_citation:8‡GitHub](https://github.com/angular/web-codegen-scorer) - Try a browser-first dev loop. Let agents inspect live DOM and component trees. ## ✅ Action Items #### DevRel - Run office hours on MCP setup for JS stacks. Track activation and PRs. - Publish “type-declaration prompts” guide with examples and pitfalls. Attribute metrics to eval runs. [oai_citation:9‡GitHub](https://github.com/angular/web-codegen-scorer) - Record a five-minute demo: repair loop from compiler errors to fix. #### OSPO - Define policy for agent commits, reviews, and SBOM updates. - Add MCP usage guidelines and security review steps. - Require eval reports for AI-assisted changes. Store artifacts. [oai_citation:10‡GitHub](https://github.com/angular/web-codegen-scorer) #### Community - Host “runtime-introspection tools” hack night using MCP. - Offer pairing sessions on a11y and security checks in eval loops. [oai_citation:11‡GitHub](https://github.com/angular/web-codegen-scorer) #### WordPress - Core: prototype a minimal, unambiguous pattern API for codegen. - Playground: add MCP-driven test agents for reproducible bugs. - Documentation: examples-first patterns for AI-assisted tasks. - Accessibility: require automated checks in agent repair cycles. [oai_citation:12‡GitHub](https://github.com/angular/web-codegen-scorer) - Meta: explore MCP servers for .org contributor tooling. [oai_citation:13‡Google Cloud](https://cloud.google.com/gemini/docs/codeassist/gemini-cli?utm_source=chatgpt.com) #### The WPOCC - Programs: fund “agentic tooling” sprints that improve onboarding. - Projects: publish transparent eval results tied to grants. - Funding experiments: microgrants for a11y and security eval contributions. ### FAIR - Add provenance and signature checks to agent outputs. - Publish governance charters for MCP tool registries. ## 🧪 Hypotheses - Minimal, single-path APIs improve LLM code correctness for UI tasks. - Type declarations in prompts reduce failures without harming expressiveness. - Runtime-introspection tools produce better tests than DOM-only snapshots. - MCP standardization increases cross-IDE agent reliability. ### 📊 Methodology - A/B evals with Web Codegen Scorer across prompts and models. [oai_citation:14‡GitHub](https://github.com/angular/web-codegen-scorer) - Measure build success, runtime errors, a11y, and basic security findings. - Compare file-only agents versus runtime-introspection agents on test quality. ### ❓ Questions - Which frameworks benefit most from IR-first generation? - Where do repair loops introduce risk or regressions? ### 🔮 Future Research - Map which runtime trees yield the biggest gains: DOM, component, injector. - Study browser-as-IDE workflows on defect discovery rates. ### 💡 Implications - Practice: teams should adopt eval loops and MCP tools. - Policy: require eval artifacts for AI-assisted merges. - Education: teach prompt hygiene and minimal API design. ### 🧠 Learning Styles Assessment - Reading level estimate: plain technical, grades 10–11. #### 👀 Visual learners - Present: IDE demos and UI previews. - Improve: diagrams of agent loops and runtime trees. #### 🔊 Aural learners - Present: recorded talk. - Improve: succinct audio summary with key timestamps. #### 🗣️ Verbal learners - Present: definitions and examples. - Improve: glossary for MCP, IR, and signals. #### 🧩 Kinesthetic learners - Present: hands-on eval scripts. - Improve: sandboxed MCP tool labs. [oai_citation:15‡GitHub](https://github.com/angular/web-codegen-scorer) #### 🧠 Logical learners - Present: eval metrics and loops. - Improve: decision trees for prompt selection. #### 🧑‍🤝‍🧑 Social learners - Present: community demos and pair sessions. - Improve: cohort-based eval sprints. #### 🧘‍♀️ Solitary learners - Present: written guides. - Improve: self-paced checklists. #### 🌿 Naturalistic learners - Present: none. - Improve: sustainability analogies for compute budgets. ### 📊 Accessibility Assessment #### Screen reader semantics - Present: headings and landmarks in docs. - Improve: explicit alt text in demos and posts. #### Keyboard navigation - Present: baseline editor support. - Improve: remove focus traps in agent overlays. #### Contrast and readability - Present: acceptable defaults. - Improve: verify 4.5:1 across UI previews. #### Text resizing and reflow - Present: responsive docs. - Improve: respect prefers-reduced-motion in demos. #### Media and captions - Present: video talk. - Improve: downloadable transcript, audio description. #### Forms and interactions - Present: none. - Improve: accessible toasts and forgiving inputs. #### Standards reference - Map gaps to WCAG 2.2 AA criteria. ### 🌍 DEIB Assessment #### Cultural breadth - Present: global dev tooling context. - Improve: multi-locale examples and translations. #### Inclusive language - Present: minimal jargon. - Improve: plain-language callouts for newcomers. #### Neurodiversity support - Present: consistent structure and short sections. - Improve: icon+text labels and predictable patterns. #### Representation - Present: general developer audience. - Improve: highlight diverse contributor stories. #### Psychological safety - Present: respectful framing. - Improve: visible community guidelines for AI tools. ### ✅ Logical Validity #### Strong reasoning - Inductive case for minimal APIs improving codegen. Supported by eval practice. [oai_citation:16‡GitHub](https://github.com/angular/web-codegen-scorer) - Causal link between runtime access and better tests is plausible. Needs trials. #### Fallacies - Risk of hasty generalization from a single mini framework. Rephrase to “early evidence suggests”. - Survivorship bias possible in demo success rates. Demand reproducible evals. #### Tone of voice - Pragmatic and exploratory. Encourages tooling experiments over hype. ### 🛡️ DARVO Analysis - No denial, attack, or role reversal patterns observed. - The talk presents methods and limitations plainly. ## 🎯 Conclusion - Treat LLM codegen like engineering, not magic. Use evals, repair loops, and minimal APIs. [oai_citation:17‡GitHub](https://github.com/angular/web-codegen-scorer) - Standardize tools with MCP. Let agents read runtime state. Start browser-context experiments. [oai_citation:18‡Google Cloud](https://cloud.google.com/gemini/docs/codeassist/gemini-cli?utm_source=chatgpt.com) ## 🧱 Refactor Appendix (append after 🎯 Conclusion) ### 📚 Literature Split Pad - Purpose: Stage Konik CEE units that become per-source Literature notes. - Split level: **H3**. - Include verbatim quotes under 25 words and a [view highlight] link. ### [H1] 5–10-word present-tense claim > [!quote] [{Title or entity}](https://www.youtube.com/watch?v=sZUn6p5qVfk) by [[{Author or [MISSING]}]] via [[{Site or [MISSING]}]]. Published [MISSING]. Accessed . > “Short quote, verbatim, ≤25 words.” Two lines: context and use. Cite data if relevant. [view highlight](https://www.youtube.com/watch?v=sZUn6p5qVfk#H1) #xref #articleseed ID:rw_[MISSING] ### [H2] 5–10-word present-tense claim > [!quote] [{Title or entity}](https://www.youtube.com/watch?v=sZUn6p5qVfk) > “Short quote, verbatim, ≤25 words.” Two lines: context and use. [view highlight](https://www.youtube.com/watch?v=sZUn6p5qVfk#H2) #xref ID:rw_[MISSING] --- ### 🔖 Atomic Split Pad (Zettel Candidates) - Purpose: Promote reusable claims into Atomic notes. - Split level: **H4**. - Each item: one idea, present tense, specific, testable. #### [Z1] 5–10-word present-tense claim - Scope/condition in one line. - Pointer to page/time or dataset. - Links: [[Parent-Concept]] [[Related-Idea]] #### [Z2] 5–10-word present-tense claim - Scope/condition in one line. - Pointer to page/time or dataset. - Links: [[Parent-Concept]] [[Related-Idea]] --- ### ✏️ Fleeting Queue (Extract by Selection) - Purpose: Capture quick actions or sparks for Fleeting notes. - Extraction: **Select one line** → “Refactor: Extract selection to new note (content only).” - Keep each line short and self-contained. - [F1] Short action — context/https://www.youtube.com/watch?v=sZUn6p5qVfk #fleeting #inbox - [F2] Short action — context/https://angular.dev/tools/ai/build-with-ai #fleeting #inbox - [F3] Short action — context/https://github.com/angular/web-codegen-scorer #fleeting #inbox --- <!-- deep-read:sections end -->