Meta tags:
description=AI agents have become much better at reasoning and planning. The UI layer has mostly stayed the same,... Tagged with programming, ai, opensource, tutorial.;
keywords=programming, ai, opensource, tutorial, software, coding, development, engineering, inclusive, community;

Headings (most frequently used words):

ui, generative, what, is, ag, copilotkit, open, the, developer, guide, to, in, 2026, dev, community, covered, three, patterns, of, how, enables, at, runtime, follow, top, comments, 16, why, does, it, matter, static, declarative, a2ui, and, json, ended, mcp, apps, more, from,

Text of the page (most frequently used words):
the (124), and (68), like (60), #comment (50), copilotkit (44), generative (42), agent (39), open (34), you (32), for (30), a2ui (24), this (23), json (21), dev (20), that (20), #button (20), anmol (20), follow (19), copy (19), baranwal (19), can (19), hide (18), link (18), location (18), with (17), menu (17), reply (16), dropdown (16), joined (16), expand (16), collapse (16), apps (14), fullscreen (14), mode (14), mcp (14), your (13), from (13), are (13), technical (13), data (13), user (13), source (12), work (12), patterns (12), pattern (12), declarative (12), form (12), text (12), likes (11), jan (11), com (11), developer (11), three (11), state (11), runtime (11), into (10), static (10), return (10), frontend (10), how (10), name (10), education (9), anmolbaranwal (9), what (9), agents (9), use (8), code (8), complete (8), more (8), oct (8), email (8), writing (8), feb (8), component (8), structured (8), tool (8), create (7), community (7), about (7), github (7), playground (7), 2022 (7), writer (7), just (7), reads (7), new (7), renders (7), exit (7), enter (7), render (7), check (7), which (7), components (7), here (7), const (7), import (7), share (6), google (6), one (6), via (6), opportunities (6), computer (6), science (6), india (6), tech (6), guy (6), who (6), loves (6), stuff (6), implementation (6), chat (6), interface (6), not (6), surface (6), react (6), specs (6), tools (6), ended (6), predefined (6), their (5), model (5), our (5), but (5), experience (5), 2023 (5), docs (5), flow (5), much (5), level (5), let (5), step (5), type (5), event (5), schema (5), status (5), task (5), them (5), submit (5), protocol (5), description (5), returns (5), most (5), output (5), when (5), instruction (5), instead (5), software (4), opensource (4), programming (4), comments (4), will (4), post (4), still (4), nathan (4), repo (4), end (4), all (4), applications (4), validated (4), rendering (4), freedom (4), title (4), approach (4), single (4), real (4), between (4), application (4), high (4), api (4), add (4), prompt (4), spec (4), children (4), theme (4), ui_examples (4), weather (4), using (4), live (4), control (4), 2026 (3), built (3), free (3), database (3), contact (3), official (3), search (3), partner (3), thank (3), anything (3), tutorial (3), server (3), way (3), abuse (3), want (3), full (3), thanks (3), great (3), tarbert (3), genui (3), 2025 (3), eli (3), berman (3), out (3), integration (3), have (3), cover (3), beyond (3), johny (3), good (3), reference (3), building (3), agentic (3), developers (3), david (3), athreya (3), aka (3), maneshwar (3), reading (3), dipankar (3), shaw (3), embernoglow (3), uliyahoo (3), aniruddha (3), adak (3), each (3), same (3), action (3), llm (3), language (3), get (3), flexibility (3), side (3), example (3), models (3), osama (3), alghanmi (3), template (3), app (3), provides (3), these (3), sits (3), approaches (3), lifecycle (3), updates (3), progress (3), interactions (3), defines (3), mcpappsmiddleware (3), displays (3), part (3), interactive (3), content (3), than (3), understand (3), card (3), copilotkitprovider (3), hook (3), renderer (3), createa2uimessagerenderer (3), then (3), based (3), system (3), path (3), surfaceid (3), literalstring (3), context (3), column (3), cards (3), forms (3), fully (3), its (3), usefrontendtool (3), result (3), see (3), only (3), show (3), guide (3), inputs (3), research (3), needs (3), account (2), log (2), place (2), where (2), other (2), conduct (2), help (2), challenges (2), development (2), algolia (2), platform (2), diamond (2), sponsors (2), maps (2), paste (2), url (2), entire (2), stack (2), leave (2), integrate (2), copilots (2), child (2), well (2), become (2), hidden (2), report (2), also (2), trying (2), such (2), learning (2), resource (2), advocate (2), seen (2), read (2), was (2), too (2), solid (2), write (2), python (2), complex (2), gmail (2), nov (2), rust (2), super (2), founder (2), easy (2), self (2), systems (2), learn (2), adapt (2), multi (2), without (2), idea (2), set (2), every (2), machine (2), effects (2), never (2), time (2), needed (2), exactly (2), edit (2), label (2), entity (2), helpful (2), called (2), almadar (2), around (2), types (2), now (2), html (2), created (2), templates (2), top (2), powered (2), practical (2), once (2), build (2), becomes (2), clear (2), bottleneck (2), support (2), external (2), role (2), across (2), results (2), next (2), specification (2), while (2), interaction (2), layer (2), makes (2), enables (2), blog (2), req (2), handlerequest (2), serviceadapter (2), copilotruntimenextjsapprouterendpoint (2), nextrequest (2), async (2), export (2), route (2), copilotruntime (2), experimentalemptyadapter (2), http (2), assistant (2), openai (2), builtinagent (2), middleware (2), enabled (2), allows (2), rich (2), alone (2), trade (2), styling (2), host (2), used (2), own (2), embedded (2), mainly (2), fit (2), overview (2), supports (2), copilotsidebar (2), a2uirenderer (2), renderactivitymessages (2), a2uitheme (2), messages (2), back (2), jsonl (2), learns (2), message (2), beginrendering (2), datamodelupdate (2), surfaceupdate (2), form_example (2), key (2), field (2), pick (2), define (2), describe (2), widgets (2), common (2), specifications (2), things (2), lists (2), controls (2), layout (2), get_weather (2), windspeed (2), humidity (2), conditions (2), temperature (2), args (2), examples (2), demo (2), along (2), low (2), box (2), users (2), through (2), specific (2), execution (2), experiences (2), today (2), why (2), does (2), matter (2), query (2), rather (2), has (2), update (2), changes (2), jump (2), coders, stay, date, grow, careers, made, love, 2016, ruby, rails, powers, inclusive, communities, forem, terms, privacy, policy, mlh, shop, postgres, showcase, organization, accounts, advertise, tracks, videos, home, space, discuss, keep, manage, career, neon, supporting, codebases, ask, javascript, aimock, mock, testing, project, ideas, star, please, simplest, production, ready, further, actions, may, consider, blocking, person, reporting, confirm, sure, visible, permalink, view, discussion, recreate, scratch, amazing, kudos, kingsland, university, florida, usa, evangelist, hopefully, helps, people, exploring, awesome, haven, yet, saving, jul, core, a2a, include, getting, long, left, would, been, interesting, though, might, bit, enthusiast, crafter, weaving, insightful, stories, dedicated, transforming, concepts, accessible, knowledge, anyone, style, sep, devops, mission, streamline, workflows, empowering, fellow, conquer, scale, heights, world, athreyac4, 500k, improving, nice, very, informative, dec, student, 426, upgrade, required, him, pronouns, dude, mid, godot, beginner, job, best, articles, year, cutting, edge, topic, rounded, seattle, washington, devrel, tawkit, making, llms, glad, know, related, brilliant, 2024, aniruddhaadak80, engineer, focused, creating, directed, execute, tasks, human, intervention, registry, finite, props, enforced, contracts, keeps, deterministic, closed, circuit, emits, checks, guards, fires, transition, executes, loop, dead, creativity, operates, authoring, natural, orbitalschema, rule, thumb, guardrails, matches, constrain, generation, machines, reliability, effect, navigated, page, itemactions, columns, table, main, taxonomy, subset, lisp, squarely, orb, file, truth, compiles, fastapi, axum, traits, think, hooks, descriptions, raw, aug, ljubljana, slovenia, turing, inside, unifying, logic, orbitals, orchestration, typescript, dismiss, preview, quickly, answer, faqs, store, snippets, trusted, personal, subscribe, elegant, infrastructure, chatbots, textareas, happy, don, forget, join, builders, discord, twitter, hope, learned, something, valuable, day, forward, yourself, fits, problem, many, cases, because, below, multiple, locking, coordinates, references, embeds, carries, signals, instance, coordination, partial, steps, clicks, submissions, selections, lifecycles, started, streaming, finished, failed, handles, working, serves, underlying, bidirectional, connection, endpoint, default, service, adapter, empty, relevant, recommended, stable, identifier, serverid, localhost, 3108, mcpservers, gpt, attaching, connect, servers, unlocks, capabilities, impossible, offs, arbitrary, introduces, security, performance, concerns, inconsistent, harder, portability, outside, web, traditional, images, resources, conversation, extend, allowing, declare, commonly, expose, iframe, acts, container, whatever, flexible, powerful, need, keeping, boundaries, predictable, natively, visualization, properties, respond, payload, describing, wired, modalheadertitle, labels, defaultopen, false, showdevconsole, runtimeurl, reactnode, a2uipage, function, instantiate, copilotkitnext, final, takes, tells, appending, ensure, streams, valid, whenever, asks, generates, dynamic, ui_generator_agent, litellm_model, litellm, llmagent, get_text_prompt, else, base_url, get_ui_prompt, agent_instruction, use_ui, uses, formatted, block, feed, envelopes, expects, signal, valuestring, contents, send, value, submit_form, true, primary, shorttext, textfieldtype, textfield, usagehint, explicitlist, plus, jakarta, sans, font, 9b8aff, primarycolor, styles, root, begin, representative, simple, list, emit, prompt_builder, hand, generate, composer, first, basic, implementing, both, agnostic, ways, standardization, internal, described, responses, two, selecting, invoke, stream, arguments, invents, lets, register, attach, phase, weathercard, weatherdata, parse, weatherloadingstate, executing, inprogress, getmockweather, 500, settimeout, promise, await, handler, city, string, object, parameters, current, information, callable, styled, implemented, binds, pre, limited, deciding, appears, receives, owned, constrained, depth, implement, detailed, guides, short, gen, there, showing, often, hosts, consistency, safety, constraints, shared, owns, selects, fills, streamed, implementations, separates, stays, versus, given, easier, interacting, black, interact, exposes, plans, evolve, intermediate, collect, input, flows, feel, opaque, trust, outcome, vague, misinterpret, hard, validate, behind, problems, look, move, chatting, start, doing, describes, give, custom, adapts, any, interested, ecosystem, abstraction, communicate, refer, website, comparison, sortable, tables, travel, itinerary, map, expandable, sections, turns, active, wrapper, longer, infer, intent, run, request, generating, hardcoding, panel, upfront, dynamically, decide, should, progresses, sometimes, parts, generated, selected, controlled, being, implements, summary, topics, detail, covered, break, down, under, hood, influence, change, usually, done, rely, even, clearly, previews, feedback, better, reasoning, planning, mostly, stayed, holding, posted, edited, originally, published, mar, mastodon, facebook, linkedin, copied, clipboard, boost, save, fire, raised, hands, exploding, head, unicorn, reaction, close, navigation, skip,

Text of the page (random words):
ded generative ui mcp apps how ag ui enables generative ui at runtime here s the github repo for the live playground that implements all three approaches 1 what is generative ui generative ui sometimes called genui is a pattern in which parts of the user interface are generated selected or controlled by an ai agent at runtime rather than being fully predefined by developers instead of hardcoding every button for m or panel upfront the ui is created dynamically based on the user s needs and context the agent can decide what ui to show what inputs it needs from the user and how the state should update as the task progresses instead of only generating text the agent can request structured inputs render task specific ui update the interface as tools run and state changes this turns the ui into an active part of the agent s execution rather than a static wrapper around a chat box the frontend no longer has to infer intent from text generative ui llm output live interactive ui examples a travel query itinerary cards map expandable sections a comparison query sortable tables in the copilotkit ecosystem generative ui is not a single abstraction it is a set of patterns built on top of agentic ui specifications such as a2ui and mcp apps that define how agents communicate ui updates to applications you can read more on the website and refer to the docs google describes generative ui as a way to give models a rich custom and interactive user experience that adapts to any prompt if you are interested in reading more you can check out their research blog a high level system overview of the generative ui implementation from google research source google research why does it matter most agent experiences today still look like chat apps when agents move beyond chatting and start doing things text alone becomes a bottleneck common problems with text only agents tool execution and progress are hidden behind chat messages user inputs are vague easy to misinterpret and hard to validate multi step flows feel opaque so users do not trust the outcome with generative ui render task specific ui exactly when it is needed collect structured validated input show progress and intermediate results as real ui adapt the interface as plans evolve this makes agent systems easier to understand and guide instead of interacting with a black box users interact with a system that exposes its state through ui 2 three patterns of generative ui most generative ui implementations fit into three patterns what separates them is how much control stays in the frontend versus how much freedom is given to the agent here are the three types along with example specs 1 static generative ui high control low freedom streamed via ag ui the frontend owns the ui the agent only selects which predefined component to show and fills it with data 2 declarative generative ui shared control using a2ui open json ui the agent returns a structured ui spec cards lists forms the frontend renders it with its own constraints and styling 3 open ended generative ui low control high freedom enabled by mcp apps the agent returns a full ui surface often embedded or free form the frontend mainly hosts it so you trade consistency and safety for flexibility if you want to see these patterns side by side there s a live playground showing all three along with a code implementation live playground go copilotkit ai gen ui demo code github com copilotkit generative ui playground here is a short demo you can check the docs and pick the integration you are using to see detailed implementation guides and examples now let s cover each pattern in depth and see how to implement them static generative ui ag ui static generative ui is the most constrained pattern developers pre build ui components and the agent s role is limited to deciding when a component appears and what data it receives the layout and interactions are fully owned by the application in copilotkit this pattern is implemented using the usefrontendtool hook which binds predefined ui components to the lifecycle of an action weather tool a callable tool that displays weather data in a styled card usefrontendtool name get_weather description get current weather information for a location parameters z object location z string describe the city or location to get weather for handler async location await new promise r settimeout r 500 return getmockweather location render status args result if status inprogress status executing return weatherloadingstate location args location if status complete result const data json parse result as weatherdata return weathercard location data location temperature data temperature conditions data conditions humidity data humidity windspeed data windspeed return enter fullscreen mode exit fullscreen mode here the usefrontendtool hook lets the application register the get_weather tool and attach a predefined react render to each phase of its lifecycle output the agent can invoke the tool and stream arguments but it never controls layout or invents ui you can check the complete implementation at github com copilotkit generative ui playground declarative generative ui a2ui and open json ui declarative generative ui sits between static and fully open ended approaches instead of selecting predefined components the agent returns a structured ui description this description defines things like cards lists forms or widgets and the frontend renders them two common declarative specifications used here are 1 a2ui declarative generative ui spec from google described as jsonl based and agents can use it to return ui widgets as part of their responses 2 open json ui open standardization of openai s internal declarative generative ui schema both define structured platform agnostic ways for agents to describe ui in json let s first understand the basic flow for implementing a2ui instead of writing a2ui json by hand you can use the a2ui composer to generate the spec for you copy the output and paste it into your agent s prompt as a reference template in your prompt_builder py pick one representative a2ui template e g a simple form or list this is what the agent learns to emit ui_examples begin form_example beginrendering surfaceid form surface root form column styles primarycolor 9b8aff font plus jakarta sans surfaceupdate surfaceid form surface components id form column component column children explicitlist form title name field submit button id form title component text usagehint h2 text literalstring contact us id name field component textfield label literalstring your name text path name textfieldtype shorttext id submit button component button child submit text primary true action name submit_form context key name value path name id submit text component text text literalstring send message datamodelupdate surfaceid form surface path contents key name valuestring end form_example enter fullscreen mode exit fullscreen mode this single jsonl formatted block defines a contact us form in a2ui you feed it to the agent so it learns the three message envelopes a2ui expects surfaceupdate components datamodelupdate state then beginrendering render signal then add ui_examples into the system prompt that the agent uses if use_ui instruction agent_instruction get_ui_prompt self base_url ui_examples else instruction get_text_prompt return llmagent model litellm model litellm_model name ui_generator_agent description generates dynamic ui via a2ui declarative json instruction instruction tools enter fullscreen mode exit fullscreen mode by appending ui_examples and the a2ui schema to your agent s instruction you ensure it streams back valid json based on your templates whenever the user asks for a ui the final step is to use createa2uimessagerenderer which takes the agent s a2ui json and your theme and then renderactivitymessages tells copilotkit to use it when rendering chat messages import copilotkitprovider copilotsidebar from copilotkitnext react import createa2uimessagerenderer from copilotkit a2ui renderer import a2uitheme from theme instantiate the a2ui renderer once with your theme const a2uirenderer createa2uimessagerenderer theme a2uitheme export function a2uipage children children react reactnode return copilotkitprovider runtimeurl api copilotkit a2ui renderactivitymessages a2uirenderer hook in the a2ui renderer showdevconsole false children copilotsidebar defaultopen labels modalheadertitle a2ui assistant copilotkitprovider enter fullscreen mode exit fullscreen mode output the playground repo is wired for a2ui but the pattern is the same for open json ui an agent can respond with a json payload describing a ui card and the frontend renders it example agent returns open json ui specification type open json ui spec components type card properties title data visualization content enter fullscreen mode exit fullscreen mode output you can check the specs overview at docs copilotkit ai learn generative ui specs open json ui to understand how copilotkit s ag ui protocol natively supports open json ui this pattern is a good fit if you need more flexibility than static ui while still keeping clear boundaries and predictable rendering open ended generative ui mcp apps open ended generative ui is the most flexible and powerful in this pattern the agent returns an entire ui surface this can be html an iframe or other free form content the frontend mainly acts as a container that displays whatever the agent provides this approach is commonly used with mcp apps where external applications expose their own ui that can be embedded into an agent experience traditional mcp tools return text images resources or structured data that the host displays as part of the conversation mcp apps extend this pattern by allowing tools to declare a reference to an interactive ui in their tool description that the host renders in place the trade offs are real rendering arbitrary ui introduces security and performance concerns inconsistent styling and harder portability outside the web but for complex tools and rich applications this pattern unlocks capabilities that are impossible with static or declarative ui alone in copilotkit mcp apps support is enabled by attaching mcpappsmiddleware to your agent which allows the runtime to connect to one or more mcp apps servers app api copilotkit route ts import copilotruntime experimentalemptyadapter copilotruntimenextjsapprouterendpoint from copilotkit runtime import builtinagent from copilotkit runtime v2 import nextrequest from next server import mcpappsmiddleware from ag ui mcp apps middleware 1 create your agent and add the mcp apps middleware const agent new builtinagent model openai gpt 4o prompt you are a helpful assistant use new mcpappsmiddleware mcpservers type http url http localhost 3108 mcp serverid my server recommended stable identifier 2 create a service adapter empty if not relevant const serviceadapter new experimentalemptyadapter 3 create the runtime and add the agent const runtime new copilotruntime agents default agent 4 create the api route export const post async req nextrequest const handlerequest copilotruntimenextjsapprouterendpoint runtime serviceadapter endpoint api copilotkit return handlerequest req enter fullscreen mode exit fullscreen mode here is the github repo for the complete code implementation and you can check the complete integration flow in the blog 3 how ag ui enables generative ui at runtime across all three patterns ag ui agent user interaction protocol serves as the underlying runtime interaction layer in copilotkit it provides a bidirectional connection between the agent and the application that makes generative ui work it is not a ui specification it is an event state protocol that defines how ui updates agent state and user interactions flow while the agent is working at a high level ag ui handles tool lifecycles started streaming finished failed user interactions clicks form submissions selections agent state updates progress partial results next steps real time coordination between agent ui application for instance here is the role of ag ui protocol across generative ui patterns static signals tool lifecycle frontend renders predefined components declarative carries ui specs state frontend renders structured ui open ended coordinates tools ui references app embeds external ui because ag ui sits below specs like a2ui open json ui and mcp apps copilotkit can support multiple generative ui approaches without locking you into a single approach in many cases the real bottleneck is the interface that sits between the agent and the user generative ui provides a practical way forward and once you build one of these patterns yourself it becomes clear which approach fits which problem i hope you learned something valuable have a great day you can check my work at anmolbaranwal com thank you for reading don t forget to follow copilotkit on twitter and join the discord community of agent builders happy building copilotkit follow react ui elegant infrastructure for ai copilots in app ai agents ai chatbots and ai powered textareas top comments 16 subscribe personal trusted user create template templates let you quickly answer faqs or store snippets for re use submit preview dismiss collapse expand osama alghanmi osama alghanmi osama alghanmi follow co founder almadar created a turing complete programming language inside json unifying data models and state machine logic via orbitals llm orchestration agentic ai typescript react rust location ljubljana slovenia joined aug 24 2025 feb 20 dropdown menu copy link hide this three pattern taxonomy is super helpful i built a language called almadar subset of json with a lisp squarely around the declarative approach a single orb schema file is the source of truth that compiles into full stack code react fastapi axum database models types our traits you can think of them as hooks for now use render ui effects that return structured ui descriptions not raw html render ui main type entity table entity task columns title status itemactions label edit event edit enter fullscreen mode exit fullscreen mode this is a side effect of an event in our schema for example user navigated to this page each type maps to a validated component via a pattern registry same idea as a2ui or open json ui finite set of patterns validated props enforced event contracts what keeps it deterministic is our closed circuit pattern every user action emits an event state machine checks guards fires transition executes effects renders new ui loop the ui is never a dead end and the llm s creativity operates at the schema authoring level natural language orbitalschema not at rendering time your rule of thumb more model freedom more guardrails needed matches our experience exactly constrain the generation surface to validated patterns and state machines and you get declarative flexibility with static level reliability like comment like comment 1 like like comment button r...