markus/talk-adaptive-uis-madvue-2026-demo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
No description
20 commits 1 branch 0 tags 428 KiB
  • TypeScript 54.3%
  • Vue 41.2%
  • CSS 3.8%
  • HTML 0.7%
Find a file
Exact
Markus Oberlehner c2859cbe6e Expose prior data sources to later data source params 
Each data source's params were evaluated against only the parent
context, so a source whose arguments reference an earlier source by
name (e.g. `prompt(prompt: async () => (await catCareSource)[0].text)
-> catCareBody`) compiled an evaluator that never destructured the
referenced name. The arrow closure then threw `ReferenceError` the
moment it was awaited. Merge `dataSources.value` into the context for
each iteration so subsequent sources can see ones declared above.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-21 11:19:19 +02:00
.vscode Initial commit 2025-09-22 17:42:49 +02:00
e2e Initial commit 2025-09-22 17:42:49 +02:00
public Initial commit 2025-09-22 17:42:49 +02:00
src Expose prior data sources to later data source params 2026-05-21 11:19:19 +02:00
test Initial commit 2025-09-22 17:42:49 +02:00
.editorconfig Initial commit 2025-09-22 17:42:49 +02:00
.env.example Initial commit 2025-09-22 17:42:49 +02:00
.gitattributes Initial commit 2025-09-22 17:42:49 +02:00
.gitignore Rework YAML streaming, prompt, and evaluator caching 2026-05-15 19:59:56 +02:00
.prettierrc.json Initial commit 2025-09-22 17:42:49 +02:00
AGENTS.md Initial commit 2025-09-22 17:42:49 +02:00
components.json Initial commit 2025-09-22 17:42:49 +02:00
env.d.ts Initial commit 2025-09-22 17:42:49 +02:00
eslint.config.ts Initial commit 2025-09-22 17:42:49 +02:00
index.html Initial commit 2025-09-22 17:42:49 +02:00
package.json Switch streaming format from YAML to JSON with expr> marker 2026-05-20 14:48:43 +02:00
playwright.config.ts Initial commit 2025-09-22 17:42:49 +02:00
pnpm-lock.yaml Switch streaming format from YAML to JSON with expr> marker 2026-05-20 14:48:43 +02:00
pnpm-workspace.yaml Rework YAML streaming, prompt, and evaluator caching 2026-05-15 19:59:56 +02:00
README.md docs: update slide links to canonical host and source 2026-05-17 11:40:33 +02:00
tsconfig.app.json Initial commit 2025-09-22 17:42:49 +02:00
tsconfig.json Initial commit 2025-09-22 17:42:49 +02:00
tsconfig.node.json Initial commit 2025-09-22 17:42:49 +02:00
tsconfig.vitest.json Initial commit 2025-09-22 17:42:49 +02:00
vite.config.ts Initial commit 2025-09-22 17:42:49 +02:00
vitest.config.ts Exclude generative-ui from vitest runs 2026-05-16 09:44:30 +02:00

README.md

Adaptive UIs with Vue and AI: What If Your UI Could Build Itself?

We carefully craft the design of current-day apps and websites tailored to a specific use case. Yet the needs of our users often don’t fit neatly into the boxes we put them in when we imagine how they use our applications. What if we could take it a step further and build interfaces that adapt on demand to the specific needs of our users? With the power of modern, state-of-the-art LLMs, we can dynamically generate and adapt the UI of our application to meet the exact needs of our users in real-time. In this talk, we explore how to build a single AI-powered component that automatically responds to all UI requirements in a fast and reliable way.

In this talk you'll learn:

  1. What the “adaptive UI” pattern is and how it differs from vibe coding.
  2. How to implement a minimal adaptive renderer in Vue that consumes a YAML UI spec and a whitelisted component registry.
  3. How to apply guardrails to keep it fast and reliable with a constrained schema and caching/latency tricks.

Running the app

Warning: this application is not meant to be live deployed as is! The code exposes secrets to the frontend!

  • Add your API keys in a local .env file:
    • VITE_EXA_API_KEY (required for research)
    • VITE_GOOGLE_API_KEY (required when any speed slot in src/config.ts uses provider google)
    • VITE_ANTHROPIC_API_KEY (required when any speed slot uses provider anthropic)
    • VITE_OPENAI_API_KEY (required when any speed slot uses provider openai)
    • VITE_GROQ_API_KEY (required when any speed slot uses provider groq)
  • Start the dev server: pnpm dev

Use the bottom prompt bar to describe the UI you want. The AI uses the layout-generator system prompt to produce YAML, which is then rendered live.