<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/"><channel><title>Ag-Ui | The .NET Blog</title><link>https://thedotnetblog.com/ca/tags/ag-ui/</link><description>Articles, tutorials and insights from the .NET community.</description><generator>Hugo</generator><language>ca</language><managingEditor>@thedotnetblog (The .NET Blog)</managingEditor><webMaster>@thedotnetblog</webMaster><lastBuildDate>Fri, 10 Apr 2026 00:00:00 +0000</lastBuildDate><atom:link href="https://thedotnetblog.com/ca/tags/ag-ui/index.xml" rel="self" type="application/rss+xml"/><item><title>Creació d'interfícies d'usuari multiagent en temps real que no semblin com una caixa negra</title><link>https://thedotnetblog.com/ca/posts/emiliano-montesdeoca/ag-ui-real-time-multi-agent-ui-maf/</link><pubDate>Fri, 10 Apr 2026 00:00:00 +0000</pubDate><author>Emiliano Montesdeoca</author><guid>https://thedotnetblog.com/ca/posts/emiliano-montesdeoca/ag-ui-real-time-multi-agent-ui-maf/</guid><description>AG-UI i Microsoft Agent Framework s'uneixen per oferir als fluxos de treball multiagent una interfície adequada, amb transmissió en temps real, aprovacions humanes i visibilitat total del que estan fent els vostres agents.</description><content:encoded>&lt;p&gt;Això és el que passa amb els sistemes multiagent: tenen un aspecte increïble a les demostracions. Tres agents que passen treballant, resolent problemes, prenent decisions. Aleshores intentes posar-ho davant dels usuaris reals i&amp;hellip; silenci. Un indicador de gir. No hi ha idea de quin agent està fent què o per què el sistema està en pausa. Això no és un producte, és un problema de confiança.&lt;/p&gt;
&lt;p&gt;L&amp;rsquo;equip de Microsoft Agent Framework acaba de publicar una &lt;a href="https://devblogs.microsoft.com/agent-framework/ag-ui-multi-agent-workflow-demo/"&gt;revisió fantàstica&lt;/a&gt; sobre la combinació de fluxos de treball MAF amb &lt;a href="https://github.com/ag-ui-protocol/ag-ui"&gt;AG-UI&lt;/a&gt;, un protocol obert per a esdeveniments d&amp;rsquo;execució d&amp;rsquo;agents de transmissió a una interfície sobre esdeveniments enviats pel servidor. I sincerament? Aquest és el tipus de pont que hem trobat a faltar.&lt;/p&gt;
&lt;h2 id="per-què-això-és-important-per-als-desenvolupadors-denet"&gt;Per què això és important per als desenvolupadors de.NET&lt;/h2&gt;
&lt;p&gt;Si esteu creant aplicacions basades en intel·ligència artificial, probablement heu tocat aquest mur. La vostra orquestració de fons funciona molt bé: els agents s&amp;rsquo;entreguen, les eines es disparen i es prenen decisions. Però la interfície no té ni idea del que passa darrere de les escenes. AG-UI ho soluciona mitjançant la definició d&amp;rsquo;un protocol estàndard per als esdeveniments de l&amp;rsquo;agent de transmissió (penseu a &lt;code&gt;RUN_STARTED&lt;/code&gt;, &lt;code&gt;STEP_STARTED&lt;/code&gt;, &lt;code&gt;TOOL_CALL_*&lt;/code&gt;, &lt;code&gt;TEXT_MESSAGE_*&lt;/code&gt;) directament a la vostra capa d&amp;rsquo;IU a través de SSE.&lt;/p&gt;
&lt;p&gt;La demostració que van crear és un flux de treball d&amp;rsquo;atenció al client amb tres agents: un agent de triatge que encamina les sol·licituds, un agent de reemborsament que gestiona els diners i un agent de comandes que gestiona les substitucions. Cada agent té les seves pròpies eines i la topologia de traspàs es defineix explícitament: no hi ha vibracions de &amp;ldquo;esbrinar-ho a partir del missatge&amp;rdquo;.&lt;/p&gt;
&lt;h2 id="la-topologia-de-traspàs-és-la-veritable-estrella"&gt;La topologia de traspàs és la veritable estrella&lt;/h2&gt;
&lt;p&gt;El que em va cridar l&amp;rsquo;atenció és com &lt;code&gt;HandoffBuilder&lt;/code&gt; us permet declarar un gràfic d&amp;rsquo;encaminament dirigit entre agents:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-python" data-lang="python"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="n"&gt;builder&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;HandoffBuilder&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;ag_ui_handoff_workflow_demo&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="n"&gt;participants&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;triage&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;refund&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;order&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="n"&gt;termination_condition&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;termination_condition&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;(&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="n"&gt;builder&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;add_handoff&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;triage&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;refund&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;Refunds, damaged-item claims...&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;add_handoff&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;triage&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;order&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;Replacement, exchange...&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;add_handoff&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;refund&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;order&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;Replacement logistics needed after refund.&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="n"&gt;add_handoff&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;order&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;triage&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="n"&gt;description&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;After replacement/shipping tasks complete.&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;Cada &lt;code&gt;add_handoff&lt;/code&gt; crea una vora dirigida amb una descripció en llenguatge natural. El marc genera eines de transferència per a cada agent basant-se en aquesta topologia. Per tant, les decisions d&amp;rsquo;encaminament es basen en la vostra estructura d&amp;rsquo;orquestració, no només en el que el LLM vulgui fer. Això és un gran negoci per a la fiabilitat de la producció.&lt;/p&gt;
&lt;h2 id="human-in-the-loop-que-realment-funciona"&gt;Human-in-the-loop que realment funciona&lt;/h2&gt;
&lt;p&gt;La demostració mostra dos patrons d&amp;rsquo;interrupció que necessita qualsevol aplicació d&amp;rsquo;agent del món real:&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;L&amp;rsquo;aprovació de l&amp;rsquo;eina s&amp;rsquo;interromp&lt;/strong&gt;: quan un agent truca a una eina marcada amb &lt;code&gt;approval_mode=&amp;quot;always_require&amp;quot;&lt;/code&gt;, el flux de treball s&amp;rsquo;atura i emet un esdeveniment. La interfície representa un modal d&amp;rsquo;aprovació amb el nom de l&amp;rsquo;eina i els arguments. No hi ha bucles de reintent de gravació de testimonis, només un flux net de pausa, aprovació i reinici.&lt;/p&gt;
&lt;p&gt;&lt;strong&gt;La sol·licitud d&amp;rsquo;informació s&amp;rsquo;interromp&lt;/strong&gt;: quan un agent necessita més context de l&amp;rsquo;usuari (com ara un identificador de comanda), s&amp;rsquo;atura i pregunta. La interfície mostra la pregunta, l&amp;rsquo;usuari respon i l&amp;rsquo;execució es reprèn exactament des d&amp;rsquo;on es va aturar.&lt;/p&gt;
&lt;p&gt;Tots dos patrons es transmeten com a esdeveniments AG-UI estàndard, de manera que la vostra interfície no necessita lògica personalitzada per agent; només representa qualsevol esdeveniment que passi a través de la connexió SSE.&lt;/p&gt;
&lt;h2 id="el-cablejat-és-sorprenentment-senzill"&gt;El cablejat és sorprenentment senzill&lt;/h2&gt;
&lt;p&gt;La integració entre MAF i AG-UI és una única trucada de funció:&lt;/p&gt;
&lt;div class="highlight"&gt;&lt;pre tabindex="0" class="chroma"&gt;&lt;code class="language-python" data-lang="python"&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="kn"&gt;from&lt;/span&gt; &lt;span class="nn"&gt;agent_framework.ag_ui&lt;/span&gt; &lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="n"&gt;AgentFrameworkWorkflow&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="n"&gt;add_agent_framework_fastapi_endpoint&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="n"&gt;app&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;FastAPI&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="n"&gt;demo_workflow&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="n"&gt;AgentFrameworkWorkflow&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="n"&gt;workflow_factory&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="k"&gt;lambda&lt;/span&gt; &lt;span class="n"&gt;_thread_id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="n"&gt;create_handoff_workflow&lt;/span&gt;&lt;span class="p"&gt;(),&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="n"&gt;name&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;ag_ui_handoff_workflow_demo&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="n"&gt;add_agent_framework_fastapi_endpoint&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt; &lt;span class="n"&gt;app&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;app&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;agent&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="n"&gt;demo_workflow&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;path&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;&amp;#34;/handoff_demo&amp;#34;&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;span class="line"&gt;&lt;span class="cl"&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;El &lt;code&gt;workflow_factory&lt;/code&gt; crea un flux de treball nou per fil, de manera que cada conversa té un estat aïllat. El punt final gestiona tota la fontaneria SSE automàticament. Si ja esteu utilitzant FastAPI (o podeu afegir-lo com a capa lleugera), això és gairebé zero fricció.&lt;/p&gt;
&lt;h2 id="la-meva-opinió"&gt;La meva opinió&lt;/h2&gt;
&lt;p&gt;Per als desenvolupadors de.NET, la pregunta immediata és: &amp;ldquo;Puc fer això en C#?&amp;rdquo; L&amp;rsquo;Agent Framework està disponible tant per a.NET com per a Python, i el protocol AG-UI és independent de l&amp;rsquo;idioma (només és SSE). Així, mentre que aquesta demostració específica utilitza Python i FastAPI, el patró es tradueix directament. Podeu connectar una API mínima ASP.NET Core amb punts finals SSE seguint el mateix esquema d&amp;rsquo;esdeveniments AG-UI.&lt;/p&gt;
&lt;p&gt;El més important és que les interfícies d&amp;rsquo;usuari multiagent s&amp;rsquo;estan convertint en una preocupació de primera classe, no en una idea posterior. Si esteu creant qualsevol cosa on els agents interactuen amb humans (atenció al client, fluxos de treball d&amp;rsquo;aprovació, processament de documents), aquesta combinació d&amp;rsquo;orquestració MAF i transparència AG-UI és el patró a seguir.&lt;/p&gt;
&lt;h2 id="tancant"&gt;Tancant&lt;/h2&gt;
&lt;p&gt;AG-UI + Microsoft Agent Framework us ofereix el millor dels dos mons: una robusta orquestració multiagent al backend i visibilitat en temps real al frontend. No més interaccions d&amp;rsquo;agent de caixa negra.&lt;/p&gt;
&lt;p&gt;Fes una ullada a la &lt;a href="https://devblogs.microsoft.com/agent-framework/ag-ui-multi-agent-workflow-demo/"&gt;revisió completa&lt;/a&gt; i al &lt;a href="https://github.com/ag-ui-protocol/ag-ui"&gt;repositori del protocol AG-UI&lt;/a&gt; per aprofundir.&lt;/p&gt;</content:encoded></item></channel></rss>