Video yükleniyor...

Video Yüklenemedi

Bu video yüklenirken bir sorun oluştu. Bu geçici bir ağ sorunundan kaynaklanıyor olabilir veya video kullanılamıyor olabilir.

Ana Sayfaya Dön

“hyperprompts” a protocol and generative UI experiment that tells an agent how to be an app

dom hofmann

136,790 subscribers

11,817 görüntüleme • 2 ay önce •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

14 Yorum

Colton Dillion profil fotoğrafı

Colton Dillion2 ay önce

To speak to your point at the end, it wouldn't be difficult to customize the frame hyperprompt with a style guide, so the frameprompt over time becomes an expression of your unique UI sensibility which immediately skins future prompts

dom hofmann profil fotoğrafı

dom hofmann2 ay önce

yes! that’s a great point

Luke Weaver profil fotoğrafı

Luke Weaver2 ay önce

What’s the full hyperprompt?

callil◡ profil fotoğrafı

callil◡2 ay önce

cool

Vlad Berrry profil fotoğrafı

Vlad Berrry2 ay önce

Doing something similar for mobile and basically any device

AI Mastery Guide profil fotoğrafı

AI Mastery Guide2 ay önce

telling an agent how to be an app is a wild framing

Miami Slice profil fotoğrafı

Miami Slice2 ay önce

i'm interested

Miami Slice profil fotoğrafı

Miami Slice2 ay önce

this seems very powerful for voice / text only interfaces, like Amazon Alexa, where hyper customization isn't necessary

compusophy profil fotoğrafı

compusophy2 ay önce

what is the hyperprompt to generate the protocol?

RM 🖤 profil fotoğrafı

RM 🖤2 ay önce

hi Dom. I have a very similar experiment. "Farnsworth are apps that are Durable Objects (State Machines) with Intent Manifest and Functions. So you can instantly deploy and launch micro apps. Might be worth to share ideas? => Repo:

Andreas Bryant profil fotoğrafı

Andreas Bryant2 ay önce

Cool! This seems different than just the agent writing to a file. Hope to see more!

getbygenius profil fotoğrafı

getbygenius2 ay önce

just slap ag-ui in there. self managed git repo, microfrontends, this is frankly genius framing.

Taylor profil fotoğrafı

Taylor2 ay önce

hyperprompts is a great name This looks really useful for designers (or any contractor really) trying to make their client handoffs more interactive.

Nexus profil fotoğrafı

Nexus2 ay önce

Is this your launch? GyxWpZx9QHDzf5kmnVUx2GhJcTPceKHrnAPYQMFTpump

Benzer Videolar

generative ui is no longer a skill issue. 1. npx skills add tambo-ai/tambo --skill generative-ui 2. /generative-ui an agent that manages tasks what will you build?

generative ui is no longer a skill issue. 1. npx skills add tambo-ai/tambo --skill generative-ui 2. /generative-ui an agent that manages tasks what will you build?

Michael Magán

67,696 görüntüleme • 7 ay önce

Create dynamic and interactive Agent UI experiences in the Gemini Enterprise app. With support for the Agent-to-UI protocol (A2UI), custom agents can dynamically generate rich, native UI components directly within the Gemini Enterprise app.

Create dynamic and interactive Agent UI experiences in the Gemini Enterprise app. With support for the Agent-to-UI protocol (A2UI), custom agents can dynamically generate rich, native UI components directly within the Gemini Enterprise app.

Google Cloud

19,318,903 görüntüleme • 5 ay önce

Big release here! AG-UI 🤝 Google A2A Embed A2A multi-agent meshes in your frontend, and build fullstack multi-agent apps with A2A and AG-UI. 🔍How it works: Simply drop-in A2A agent endpoints, and an A2A AG-UI orchestrator agent will bi-directionally stream events between your Agents & application. Includes: - UI for A2A Interactions - Generative UI for Agent Tool Calls - Human-in-the Loop Approvals - State Synchronization (agent mesh application state) - Frontend Tool Calls for A2A Agents Watch the demo below > LangGraph & Google ADK agents working together simultaneously inside an app Demo GitHub, docs, and more 👇

Big release here! AG-UI 🤝 Google A2A Embed A2A multi-agent meshes in your frontend, and build fullstack multi-agent apps with A2A and AG-UI. 🔍How it works: Simply drop-in A2A agent endpoints, and an A2A AG-UI orchestrator agent will bi-directionally stream events between your Agents & application. Includes: - UI for A2A Interactions - Generative UI for Agent Tool Calls - Human-in-the Loop Approvals - State Synchronization (agent mesh application state) - Frontend Tool Calls for A2A Agents Watch the demo below > LangGraph & Google ADK agents working together simultaneously inside an app Demo GitHub, docs, and more 👇

CopilotKit🪁

31,845 görüntüleme • 1 yıl önce

Agent commerce is coming to Multiversᕽ. x402, an open HTTP standard for blockchains originally developed by Coinbase 🛡️, OpenAI and Stripe's Agent Commerce Protocol, and Google's Universal Commerce Protocol are available for all MvX builders to experiment with.

Agent commerce is coming to Multiversᕽ. x402, an open HTTP standard for blockchains originally developed by Coinbase 🛡️, OpenAI and Stripe's Agent Commerce Protocol, and Google's Universal Commerce Protocol are available for all MvX builders to experiment with.

Multiversᕽ

302,149 görüntüleme • 8 ay önce

Generative UI and In-App Agents with assistant-ui

Generative UI and In-App Agents with assistant-ui

Simon Farshid

123,241 görüntüleme • 2 yıl önce

build an agent that speaks your UI. your charts. your forms. your seat maps. multi-turn, streaming, interactive. introducing tambo 1.0, the open-source generative UI toolkit for react.

build an agent that speaks your UI. your charts. your forms. your seat maps. multi-turn, streaming, interactive. introducing tambo 1.0, the open-source generative UI toolkit for react.

Michael Magán

262,583 görüntüleme • 8 ay önce

🎨 Design freely with Agent 4. - Design while the agent builds. - Explore multiple UI variants on an infinite canvas. - Make precise UI edits that you can apply directly to your app.

🎨 Design freely with Agent 4. - Design while the agent builds. - Explore multiple UI variants on an infinite canvas. - Make precise UI edits that you can apply directly to your app.

Replit ⠕

184,057 görüntüleme • 7 ay önce

Here is how simple it is to build a UI front-end for an AI agent (assuming you are using . The video here is 90 seconds and will show you everything you need to connect an agent to a web app: 1. Set up CopilotKit🪁 in your app 1. Copy the agent's localhost URL from LangGraph Studio 2. Paste that URL into a CopilotKit🪁 remote endpoint That's all you need to get a front-end to interact with the agent! The secret sauce here is CoAgents, an open-source library. You can use CoAgents to integrate any agent with your web application. Here is what you get: • Human-in-the-loop to steer and correct the agent • Stream intermediate agent state • Real-time state sharing between the agent and the application • Agentic generative UI to build trust that the agent is on the right path Watch the attached demo so you see it in action.

Here is how simple it is to build a UI front-end for an AI agent (assuming you are using . The video here is 90 seconds and will show you everything you need to connect an agent to a web app: 1. Set up CopilotKit🪁 in your app 1. Copy the agent's localhost URL from LangGraph Studio 2. Paste that URL into a CopilotKit🪁 remote endpoint That's all you need to get a front-end to interact with the agent! The secret sauce here is CoAgents, an open-source library. You can use CoAgents to integrate any agent with your web application. Here is what you get: • Human-in-the-loop to steer and correct the agent • Stream intermediate agent state • Real-time state sharing between the agent and the application • Agentic generative UI to build trust that the agent is on the right path Watch the attached demo so you see it in action.

Santiago

46,142 görüntüleme • 1 yıl önce

A registry tells you an agent exists. This is how an agent becomes accountable. Watch a Verified by Concordium Agent being registered from start to finish.

A registry tells you an agent exists. This is how an agent becomes accountable. Watch a Verified by Concordium Agent being registered from start to finish.

Concordium

17,999 görüntüleme • 5 ay önce

Introducing the Generative UI Research Canvas ✨ Every agent needs a powerful UI Combine LangChain, Tavily, Tako and CopilotKit🪁 and you get a LangChain-based research agent with a Generative UI-driven frontend. When agents can explore the underlying data, research becomes more trustworthy and useful. How does this work? - LangChain manages the agent workflow and tool orchestration. - Tako converts retrieved data into structured, visual components - Tavily provides agentic search - CopilotKit renders those components in the UI and keeps the user in the loop while the agent is working So instead of a boring and static report, the output is an interactive research canvas that evolves as the agent runs. 2026 is the year where users want to see the output, not read it... Generative UI makes this possible for agentic applications. Tutorial: Open-Source Repo: Docs:

Introducing the Generative UI Research Canvas ✨ Every agent needs a powerful UI Combine LangChain, Tavily, Tako and CopilotKit🪁 and you get a LangChain-based research agent with a Generative UI-driven frontend. When agents can explore the underlying data, research becomes more trustworthy and useful. How does this work? - LangChain manages the agent workflow and tool orchestration. - Tako converts retrieved data into structured, visual components - Tavily provides agentic search - CopilotKit renders those components in the UI and keeps the user in the loop while the agent is working So instead of a boring and static report, the output is an interactive research canvas that evolves as the agent runs. 2026 is the year where users want to see the output, not read it... Generative UI makes this possible for agentic applications. Tutorial: Open-Source Repo: Docs:

Atai Barkai

11,997 görüntüleme • 9 ay önce

We are witnessing a fundamental shift in how software is built. Over the decades, UI was static and predictable. But AI is changing the fundamental nature of the interface. We are moving away from fixed UI and toward a new standard: Generative UI. Generative UI lets agents participate in the UI, not just the conversation. It’s a dynamic participant in the user experience. Depending on the complexity of your app, Generative UI generally falls into three categories: 1. Static (AG-UI): UI is chosen from a fixed set of hand-built components 2. Open-Ended (MCP Apps): agent sends arbitrary content like raw HTML or iframes for total flexibility. 3. Declarative (A2UI): agent and frontend communicate via a structured UI spec for dynamic widgets and forms. The AG-UI Protocol by CopilotKit is the real breakthrough. AG-UI acts as the universal transport layer. It provides the integrations and middleware for every Gen-UI spec, making it trivial to bring dynamic components into your existing app. CopilotKit provides the go-to ecosystem for building agentic applications and is the React client of AG-UI. It is designed to be deeply integrated, allowing developers to bring their own frameworks or protocols to the table. Play around with different types of Generative UI here → Check out the video attached to see Generative UI in action. Appreciate the CopilotKit team for collaborating with me on this deep dive.

We are witnessing a fundamental shift in how software is built. Over the decades, UI was static and predictable. But AI is changing the fundamental nature of the interface. We are moving away from fixed UI and toward a new standard: Generative UI. Generative UI lets agents participate in the UI, not just the conversation. It’s a dynamic participant in the user experience. Depending on the complexity of your app, Generative UI generally falls into three categories: 1. Static (AG-UI): UI is chosen from a fixed set of hand-built components 2. Open-Ended (MCP Apps): agent sends arbitrary content like raw HTML or iframes for total flexibility. 3. Declarative (A2UI): agent and frontend communicate via a structured UI spec for dynamic widgets and forms. The AG-UI Protocol by CopilotKit is the real breakthrough. AG-UI acts as the universal transport layer. It provides the integrations and middleware for every Gen-UI spec, making it trivial to bring dynamic components into your existing app. CopilotKit provides the go-to ecosystem for building agentic applications and is the React client of AG-UI. It is designed to be deeply integrated, allowing developers to bring their own frameworks or protocols to the table. Play around with different types of Generative UI here → Check out the video attached to see Generative UI in action. Appreciate the CopilotKit team for collaborating with me on this deep dive.

Pratham

33,920 görüntüleme • 9 ay önce

Microsoft Teams just got Generative UI But this is just the tip of the iceberg. AG-UI is the protocol connecting any agent to any user on any app, topped with Generative UI. That means your agent can render: - forms - buttons - charts - approval flows Right inside the chat, on the fly. But it's not limited to in-app copilots. What's special is that you can work with any agent using the same system and bring them into any surface, including Slack, WhatsApp, Discord and more. This is exactly why Hermes and OpenClaw took off. As users of these agents, we don't like walls of text, and it's a pain to get when you can have way better UX. CopilotKit🪁 + AG-UI handle that interaction layer. If you want to try out Agentic UI in Microsoft Teams, you can get early access here:

Microsoft Teams just got Generative UI But this is just the tip of the iceberg. AG-UI is the protocol connecting any agent to any user on any app, topped with Generative UI. That means your agent can render: - forms - buttons - charts - approval flows Right inside the chat, on the fly. But it's not limited to in-app copilots. What's special is that you can work with any agent using the same system and bring them into any surface, including Slack, WhatsApp, Discord and more. This is exactly why Hermes and OpenClaw took off. As users of these agents, we don't like walls of text, and it's a pain to get when you can have way better UX. CopilotKit🪁 + AG-UI handle that interaction layer. If you want to try out Agentic UI in Microsoft Teams, you can get early access here:

Atai Barkai

25,052 görüntüleme • 4 ay önce

Anthropic's in trouble, again! They spent years building what's now fully open-source. What made Claude feel different from a normal app is that the agent could act inside the interface instead of only talking in a chat box. For instance, Claude Artifacts let an agent render real UI, charts, dashboards, and interactive components that assemble live inside the response. Every major AI product tried to replicate it. But the problem was that unlike reasoning, planning, tool-calling, etc., none of it shipped natively with LangGraph, CrewAI, or Google ADK. So teams started building an owned version that required engineering the entire interface layer from scratch. Most teams, however, just settled for shipping the agent as a backend API in a chat box since rendering the UI is only one piece of it. To actually make it work, the interface layer also needed real-time streaming, state kept in sync between agent and UI, conversations that persist across sessions, and reconnection when a user refreshes mid-run. CopilotKit🪁 is now the only open-source framework that actually lets you build your own full-stack Claude-like apps. It decouples the agent from the interface, talking over AG-UI (an open protocol for agent-to-user communication). Being a standard protocol, the frontend never needs to know whether it is talking to a LangGraph or a CrewAI agent. You can change the backend anytime and the UI will never notice. In practice, CopilotKit's interface layer gives several pre-implemented React building blocks that wire the agent directly into the app, like: - generative UI, so the agent renders real components instead of text - chat windows, sidebars, and popups, or a fully headless setup - shared state, so the agent and app stay in sync - human-in-the-loop approvals, where the agent waits before acting - persistent threads that store the whole session, including the agent-user interactions and generated UI, not just text And because that full history is captured, those interactions can feed a self-learning layer that also improves the agent from real usage over time. The interface layer that Anthropic spent years engineering in-house is now literally available to any developer/team. CopilotKit is open-source with 30k+ GitHub stars, and AG-UI, the protocol underneath, is already supported across every major agent framework: LangGraph, CrewAI, Mastra, Google ADK, and more. CopilotKit GitHub repo → (don't forget to star it ⭐ ) If you want to go deeper, I found a detailed breakdown by Shubham Saboo recently on the three Generative UI patterns, with implementation. Read it below.

Anthropic's in trouble, again! They spent years building what's now fully open-source. What made Claude feel different from a normal app is that the agent could act inside the interface instead of only talking in a chat box. For instance, Claude Artifacts let an agent render real UI, charts, dashboards, and interactive components that assemble live inside the response. Every major AI product tried to replicate it. But the problem was that unlike reasoning, planning, tool-calling, etc., none of it shipped natively with LangGraph, CrewAI, or Google ADK. So teams started building an owned version that required engineering the entire interface layer from scratch. Most teams, however, just settled for shipping the agent as a backend API in a chat box since rendering the UI is only one piece of it. To actually make it work, the interface layer also needed real-time streaming, state kept in sync between agent and UI, conversations that persist across sessions, and reconnection when a user refreshes mid-run. CopilotKit🪁 is now the only open-source framework that actually lets you build your own full-stack Claude-like apps. It decouples the agent from the interface, talking over AG-UI (an open protocol for agent-to-user communication). Being a standard protocol, the frontend never needs to know whether it is talking to a LangGraph or a CrewAI agent. You can change the backend anytime and the UI will never notice. In practice, CopilotKit's interface layer gives several pre-implemented React building blocks that wire the agent directly into the app, like: - generative UI, so the agent renders real components instead of text - chat windows, sidebars, and popups, or a fully headless setup - shared state, so the agent and app stay in sync - human-in-the-loop approvals, where the agent waits before acting - persistent threads that store the whole session, including the agent-user interactions and generated UI, not just text And because that full history is captured, those interactions can feed a self-learning layer that also improves the agent from real usage over time. The interface layer that Anthropic spent years engineering in-house is now literally available to any developer/team. CopilotKit is open-source with 30k+ GitHub stars, and AG-UI, the protocol underneath, is already supported across every major agent framework: LangGraph, CrewAI, Mastra, Google ADK, and more. CopilotKit GitHub repo → (don't forget to star it ⭐ ) If you want to go deeper, I found a detailed breakdown by Shubham Saboo recently on the three Generative UI patterns, with implementation. Read it below.

Avi Chawla

462,344 görüntüleme • 4 ay önce

New Course: ACP: Agent Communication Protocol Learn to build agents that communicate and collaborate across different frameworks using ACP in this short course built with IBM Research's BeeAI, and taught by Sandi Besen, AI Research Engineer & Ecosystem Lead at IBM, and Nicholas Renotte, Head of AI Developer Advocacy at IBM. Building a multi-agent system with agents built or used by different teams and organizations can become challenging. You may need to write custom integrations each time a team updates their agent design or changes their choice of agentic orchestration framework. The Agent Communication Protocol (ACP) is an open protocol that addresses this challenge by standardizing how agents communicate, using a unified RESTful interface that works across frameworks. In this protocol, you host an agent inside an ACP server, which handles requests from an ACP client and passes them to the appropriate agent. Using a standardized client-server interface allows multiple teams to reuse agents across projects. It also makes it easier to switch between frameworks, replace an agent with a new version, or update a multi-agent system without refactoring the entire system. In this course, you’ll learn to connect agents through ACP. You’ll understand the lifecycle of an ACP Agent and how it compares to other protocols, such as MCP (Model Context Protocol) and A2A (Agent-to-Agent). You’ll build ACP-compliant agents and implement both sequential and hierarchical workflows of multiple agents collaborating using ACP. Through hands-on exercises, you’ll build: - A RAG agent with CrewAI and wrap it inside an ACP server. - An ACP Client to make calls to the ACP server you created. - A sequential workflow that chains an ACP server, created with Smolagents, to the RAG agent. - A hierarchical workflow using a router agent that transforms user queries into tasks, delegated to agents available through ACP servers. - An agent that uses MCP to access tools and ACP to communicate with other agents. You’ll finish up by importing your ACP agents into the BeeAI platform, an open-source registry for discovering and sharing agents. ACP enables collaboration between agents across teams and organizations. By the end of this course, you’ll be able to build ACP agents and workflows that communicate and collaborate regardless of framework. Please sign up here:

New Course: ACP: Agent Communication Protocol Learn to build agents that communicate and collaborate across different frameworks using ACP in this short course built with IBM Research's BeeAI, and taught by Sandi Besen, AI Research Engineer & Ecosystem Lead at IBM, and Nicholas Renotte, Head of AI Developer Advocacy at IBM. Building a multi-agent system with agents built or used by different teams and organizations can become challenging. You may need to write custom integrations each time a team updates their agent design or changes their choice of agentic orchestration framework. The Agent Communication Protocol (ACP) is an open protocol that addresses this challenge by standardizing how agents communicate, using a unified RESTful interface that works across frameworks. In this protocol, you host an agent inside an ACP server, which handles requests from an ACP client and passes them to the appropriate agent. Using a standardized client-server interface allows multiple teams to reuse agents across projects. It also makes it easier to switch between frameworks, replace an agent with a new version, or update a multi-agent system without refactoring the entire system. In this course, you’ll learn to connect agents through ACP. You’ll understand the lifecycle of an ACP Agent and how it compares to other protocols, such as MCP (Model Context Protocol) and A2A (Agent-to-Agent). You’ll build ACP-compliant agents and implement both sequential and hierarchical workflows of multiple agents collaborating using ACP. Through hands-on exercises, you’ll build: - A RAG agent with CrewAI and wrap it inside an ACP server. - An ACP Client to make calls to the ACP server you created. - A sequential workflow that chains an ACP server, created with Smolagents, to the RAG agent. - A hierarchical workflow using a router agent that transforms user queries into tasks, delegated to agents available through ACP servers. - An agent that uses MCP to access tools and ACP to communicate with other agents. You’ll finish up by importing your ACP agents into the BeeAI platform, an open-source registry for discovering and sharing agents. ACP enables collaboration between agents across teams and organizations. By the end of this course, you’ll be able to build ACP agents and workflows that communicate and collaborate regardless of framework. Please sign up here:

Andrew Ng

105,894 görüntüleme • 1 yıl önce

Introducing /ui-test Give your agent a PR, and it'll test your feature in a real browser, generating an HTML report with UI fixes The planner agent generates adversarial test cases to break your app, assigns them to subagents, and evaluates the page using the Browserbase CLI We reviewed a merged PR on Cal.com and found a bunch of small UI nits:

Introducing /ui-test Give your agent a PR, and it'll test your feature in a real browser, generating an HTML report with UI fixes The planner agent generates adversarial test cases to break your app, assigns them to subagents, and evaluates the page using the Browserbase CLI We reviewed a merged PR on Cal.com and found a bunch of small UI nits:

Shrey Pandya

57,971 görüntüleme • 7 ay önce

I vibecoded a trading algorithm that enables an agent to trade for me and my friends using Vincent, powered by Lit Protocol 🔑

I vibecoded a trading algorithm that enables an agent to trade for me and my friends using Vincent, powered by Lit Protocol 🔑

🔥

10,566 görüntüleme • 1 yıl önce

Building an AI Agent Web App: Framework - Next.js Auth & Db - Supabase Agent Flows - Langflow IDE - Cursor (+Claude 3.5) Component lib - shadcn UI UI - v0 Full tutorial below:

Building an AI Agent Web App: Framework - Next.js Auth & Db - Supabase Agent Flows - Langflow IDE - Cursor (+Claude 3.5) Component lib - shadcn UI UI - v0 Full tutorial below:

Misbah Syed

132,104 görüntüleme • 2 yıl önce

Introducing the /turn-into-app skill Turn any agent workflow into a visual agentic app Text is great for many things, but an agentic app with a real UI can take your agent workflows to the next level in one command

Introducing the /turn-into-app skill Turn any agent workflow into a visual agentic app Text is great for many things, but an agentic app with a real UI can take your agent workflows to the next level in one command

Steve (Builder.io)

19,482 görüntüleme • 24 gün önce