Customizable User Interface Components

Introducing the Agent-to-User Interface by Google 🔥 A2UI lets your AI agents generate native, interactive UIs on the fly. And it's 100% Open Source. Here's the problem with AI chat interfaces: They hit the ceiling fast. User: "Book me a flight to Tokyo" Agent: "Here are 47 options with dates, prices, layovers, seat classes..." walls of text...walls of text Nobody wants to parse that. You want buttons. Cards. Filters. A real interface. But hardcoding UIs for every possible agent action? Impossible. A2UI flips the entire paradigm. Your agent doesn't just respond with text. It streams native UI components directly to the user. Flight cards. Booking forms. Interactive carousels. Date pickers. Generated on the fly. Rendered instantly. Zero client-side code changes. Here's how it works: 🔌 Built on A2A Protocol Secure transport layer. Your agent streams JSONL payloads describing UI intent. 🏗️ Truly Framework-Agnostic Write once. Render on React, Flutter, Android, Web Components. Any surface. ⚡ Real-Time Streaming Progressive rendering as the agent thinks. No waiting for complete responses. 🔒 Secure by Design Clean separation of structure and data. UI injection risks mitigated. The old way: User navigates menus → Clicks through forms → Waits for confirmations The A2UI way: User asks → Agent streams the exact interface needed → User acts immediately Chat interfaces were step one. Generative UI is step two. Stop building static dashboards that gather dust. Start letting your agents build the UI. This is Day 15 of 25 in Google Cloud's Advent of Agents. Missed previous days? The archive is live. Catch up anytime. ♻️ Repost to share this free and interactive course with your network. And follow this space to stay updated for what's to come.

One of the common interview questions in system design rounds is how to build reusable UI components that can work across frameworks. And, this is where 𝗪𝗲𝗯 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 come into picture. 𝗪𝗲𝗯 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 are a set of browser native APIs that allow us to create custom, reusable HTML elements without relying on frameworks. 𝗪𝗲𝗯 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 are made of 4 main specifications: 𝟭. 𝗖𝘂𝘀𝘁𝗼𝗺 𝗘𝗹𝗲𝗺𝗲𝗻𝘁𝘀 This is how we define our own tags like <𝙪𝙨𝙚𝙧-𝙢𝙤𝙙𝙚𝙡>. We can manage the logic using lifecycle callbacks: • 𝗰𝗼𝗻𝗻𝗲𝗰𝘁𝗲𝗱𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸: This is called when component is inserted in DOM. • 𝗱𝗶𝘀𝗰𝗼𝗻𝗻𝗲𝗰𝘁𝗲𝗱𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸: This is called when component is removed from DOM. • 𝗮𝘁𝘁𝗿𝗶𝗯𝘂𝘁𝗲𝗖𝗵𝗮𝗻𝗴𝗲𝗱𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸: This is called when a prop or attribute is changed/ added/ removed from DOM. 𝟮. 𝗦𝗵𝗮𝗱𝗼𝘄 𝗗𝗢𝗠 This gives us a private, scoped DOM tree. We use it so our CSS doesn't leak and break the rest of the app layout, and global styles do not affect our internal component structure. 𝟯. 𝗛𝗧𝗠𝗟 𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲𝘀 We can use the <template> tag to define HTML that doesn't render immediately. 𝟰. 𝗘𝗦 𝗠𝗼𝗱𝘂𝗹𝗲𝘀 This is a standard way in which we can package and share our components across different projects. 𝗘𝘅𝗮𝗺𝗽𝗹𝗲: If you open YouTube and try to inspect, you can find multiple custom elements inside DOM.

Part 2: More from “TJ Plays with AI + Design Systems.” This time: Figma MCP → Web Components → React Storybook → Custom UI Generator. I took the same banner component from yesterday’s demo (https://lnkd.in/g6yt7rNw), generated from Figma using the official MCP server and pushed the workflow further: ✅ MCP server got us 95% of the way there (some missed tokens, but easy fix) ✅ Wrapped the Web Component in React ✅ Automated drop it into our React-flavored Storybook ✅ Connected it to our custom Story UI Generator ✅ Now, PMs, designers, and basically any non-devs can customize layouts without writing a line of code What’s wild is how fast we’re moving from design intent to actual usable, testable, customizable UI, without needing a dev in the loop at every step. The gap between design and dev is getting smaller. But this shows the gap between dev and product is closing too! 🙌 Demo video below 👇 Would love to hear what others are doing with MCP and generative UIs.

I got tired of fighting bright UIs that hurt my eyes after 8 hours of screen time. So I built my own design system from scratch. Meet Omnira UI — a glassmorphism component library with a dark-first approach. Here's the thing most design systems get wrong: they build for light mode first, then slap on a dark theme as an afterthought. The result? Poor contrast, inconsistent surfaces, and dark modes that feel broken. Omnira flips that. Every component is designed in dark mode first soft backgrounds, frosted glass surfaces, and a carefully tuned lime green accent that guides your eye without screaming at you. Then light mode is built as a true companion, not an inversion. What's already built: → 30+ base components (Button, Input, Badge, Select, Toggle, Slider, Rating, and more) → 5 sidebar navigation variants (Simple, Dividers, Headings, Slim, Dual Panel) → 12 feature cards (Progress, Onboarding, Upgrade, Referral, and more) → 1,000+ icons via iconsax-react → Full documentation with live previews and copy-pasteable code → Every component works. Every code block you copy actually runs. The stack: Next.js 16 · TypeScript · CSS Modules · CSS Custom Properties · Framer Motion No Tailwind. Every design token is a CSS variable you own and control. Coming soon: → Full theme customization (accent colors, border radius, shadows) → 10 color presets with a CLI tool to scaffold your project → Custom borders, rounded corners, spacing scales → Dashboard templates and more application UI → Targeting 1,000 components total After using hundreds of apps and design systems as a senior product designer & engineer, I wanted something that's premium out of the box, readable by default, and genuinely beautiful. This is that project. Built in public. Shipping every week. ⭐ Star the repo on GitHub to follow along 💬 What component would you want to see next? #designsystem #opensource #uiux #react #nextjs #typescript #glassmorphism #darkmode #accessibility #frontend #buildinpublic