{"id":33196,"date":"2026-04-20T14:52:09","date_gmt":"2026-04-20T12:52:09","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=33196"},"modified":"2026-04-20T20:29:53","modified_gmt":"2026-04-20T18:29:53","slug":"ag-ui-in-practice-the-sdk-for-typescript","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/","title":{"rendered":"AG-UI in Practice: The SDK for TypeScript"},"content":{"rendered":"
\n\t\t\t\n\t\n\t\n\t\t

\n\t\t\tThis is post 2 of 3 in the series “agentic”<\/em>\t\t<\/p>\n\t\t\t<\/label>\n\n\t\t\t

\n\t\t\t
    \n\t\t\t\t\t\t\t\t\t
  1. Understanding AG-UI: The Standard for Agentic User Interfaces<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  2. AG-UI in Practice: The SDK for TypeScript<\/span><\/li>\n\t\t\t\t\t\t\t\t\t
  3. Implementing AG-UI with Angular<\/a><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n

    Implementing AG-UI with the SDK on the server and in the client<\/em><\/p>\n

    Once AG-UI defines the semantic messages exchanged between client and agent, the next practical question is immediate: how do you implement these messages concretely on the client and server side? That is exactly what the official SDKs for TypeScript and Python provide, offering ready-made building blocks.<\/p>\n

    This second part of the series shows how the AG-UI SDK for TypeScript is used on the server and in the browser, how tool calls work with it, and how client tools are described and passed to the agent.<\/p>\n

    \ud83d\udcc2 Source Code<\/a> (see branch agentic<\/code>)<\/p>\n

    What Does the AG-UI SDK Provide?<\/h2>\n

    So that we do not have to start entirely from scratch, AG-UI comes not only with a protocol specification but also with SDKs for TypeScript and Python. Many of the adapters for agent frameworks build on top of them. The Microsoft Agent Framework, by contrast, comes with its own implementation so that AG-UI can also be supported server-side through C#. In addition, the official AG-UI repo<\/a> contains community implementations for other languages such as Java and C++, as well as for frameworks like Spring AI.<\/p>\n

    The official SDKs for TypeScript and Python support HTTP over server-sent events (SSE): each run triggers an HTTP request, after which the server-side agent gradually sends its response to the client as individual text messages and tool calls. These messages can be encoded as JSON or in binary form using Protocol Buffers.<\/p>\n

    Using the TypeScript SDK on the Server<\/h2>\n

    To use the TypeScript SDK, we install the package @ag-ui\/core<\/code> on the server-side. On the client-side we leverage @ag-ui\/client<\/code>.<\/p>\n

    To illustrate server-side use of the SDK, the following example hardcodes simple AG-UI-compliant messages without using a language model. To do so, the server follows a classic Smalltalk rule \u2014 it\u2019s never wrong to talk about the weather:<\/p>\n

    import { HttpAgent } from '@ag-ui\/client';\nimport { BaseEvent, EventType, RunAgentInput } from '@ag-ui\/core';\nimport { Observable } from 'rxjs';\n\nexport class FlightWeatherAgent extends AbstractAgent {\n  run(input: RunAgentInput): Observable<BaseEvent> {\n    return new Observable((observer) => {\n      const { threadId, runId } = input;\n      observer.next({ type: EventType.RUN_STARTED, threadId, runId });\n      observer.next({\n        type: EventType.TEXT_MESSAGE_START,\n        messageId: '1001',\n        role: 'assistant',\n      });\n      observer.next({\n        type: EventType.TEXT_MESSAGE_CONTENT,\n        messageId: '1001',\n        delta: 'Checking flight weather for Frankfurt...',\n      });\n      observer.next({ type: EventType.TEXT_MESSAGE_END, messageId: '1001' });\n      [...]\n      observer.next({ type: EventType.RUN_FINISHED, threadId, runId });\n      observer.complete();\n    });\n  }\n}<\/code><\/pre>\n
    The FlightWeatherAgent<\/code> shown here inherits from AbstractAgent<\/code>. Its run<\/code> method processes user requests. It starts a run, sends a text message to the client, and then finishes the run again.<\/p>\n
    Typically, run<\/code> delegates to an agent framework such as Mastra, LangGraph, Google ADK, Microsoft Agent Framework, or Spring AI and transforms the received information into AG-UI-compliant messages. Usually, you do not have to write such integrations yourself, especially since the AG-UI SDK provides adapters for many frameworks and some frameworks also include their own integration.<\/p>\n
    It is important to note that the SDK does not handle integration with the chosen transport protocol, for example sending SSE over HTTP. For that reason, the accompanying demo project also contains a small amount of glue code containing a server-side route that registers with the agent and sends all messages as SSE.<\/p>\n
    NOTE<\/p>\n
    Agentic UI with Angular<\/h3>\n
    Learn more about this topic in my eBook: Build scalable agentic UIs with Angular \u2014 using AG-UI, A2UI, and MCP Apps, open and free from vendor lock-in.<\/p>\n
    \"Cover<\/a><\/p>\n
    Learn more about the eBook \u2192<\/a>\n<\/div>\n<\/p>\n
    Using the TypeScript SDK in the Browser<\/h2>\n
    On the client side, the TypeScript SDK gives us the option of defining an AgentSubscriber<\/code> with event handlers for incoming messages:<\/p>\n
    import { AgentSubscriber } from '@ag-ui\/client';\n\nconst subscriber: AgentSubscriber = {\n  onRunStartedEvent: ({ event }) => {\n    console.log(\n      `RUN_STARTED: threadId=${event.threadId}, runId=${event.runId}`,\n    );\n  },\n  onTextMessageStartEvent: ({ event }) => { [...] },\n  onTextMessageContentEvent: ({ event }) => { [...] },\n  onTextMessageEndEvent: ({ event }) => { [...] },\n  [...]\n  onRunFinishedEvent: ({ event }) => { [...] },\n};<\/code><\/pre>\n
    A dedicated handler exists for each message type. With HttpAgent<\/code>, which is also provided by the SDK, a connection to the server-side agent can be established:<\/p>\n
    import { FlightWeatherAgent } from '.\/server.js';\n\nconst threadId = '4711';\nconst url = 'https:\/\/...';\nconst agent = new HttpAgent({ url, threadId });\n\nconst userMessage = {\n  id: 'msg-user-1',\n  role: 'user' as const,\n  content: 'What is the flight weather in Frankfurt?',\n};\n\nagent.addMessage(userMessage);\nawait agent.runAgent({ runId: '0815' }, subscriber);<\/code><\/pre>\n
    The addMessage<\/code> method initially only appends a message with the user's question to a client-side array. The locally collected messages are not sent until runAgent<\/code> starts the next run. As soon as the responses arrive from the agent via SSE, runAgent<\/code> invokes the corresponding handlers in the AgentSubscriber<\/code> passed in.<\/p>\n
    Depending on whether the agent remembers the conversation history between runs, the client either sends all previously exchanged messages or only the newly added ones.<\/p>\n
    Server-Side Tool Calling with the AG-UI SDK<\/h2>\n
    So far, our demo has only sent simple text. However, requesting tool calls through the agent works in a very similar way. The information that needs to be sent for this also typically comes from the chosen language model and is transformed by the agent into AG-UI-compliant messages. To keep the demo simple, though, we still make do with a few hardcoded messages:<\/p>\n
    \/\/ Server Code\n\/\/ Step 1: Tool Call\nobserver.next({\n  type: EventType.TOOL_CALL_START,\n  toolCallId: '2001',\n  toolCallName: 'loadFlightWeather',\n});\nobserver.next({\n  type: EventType.TOOL_CALL_ARGS,\n  toolCallId: '2001',\n  delta: '{"city":"Frankfurt"}',\n});\nobserver.next({\n  type: EventType.TOOL_CALL_END,\n  toolCallId: '2001',\n});\n\/\/ Step 2: Execute Server-side Tool\nconst weatherResult = [...];\n\/\/ Step 3: Answer Tool Call\nobserver.next({\n  type: EventType.TOOL_CALL_RESULT,\n  toolCallId: '2001',\n  messageId: '3001',\n  role: 'tool',\n  content: JSON.stringify(weatherResult),\n});<\/code><\/pre>\n
    With the first three messages, the agent indicates that the LLM has requested a tool call. Because it is a server-side tool, the agent executes it itself and returns the result to the language model. In addition, it logs the result by sending another AG-UI message.<\/p>\n
    Based on these messages, the client can inform the user about the tool call. This creates transparency and prevents the UI from appearing frozen for a longer period of time.<\/p>\n
    Client-Side Tool Calling with the AG-UI SDK<\/h2>\n
    Execution of client-side tools is similar to server-side tools. Here too, the agent communicates the call and its parameters using the tool-call messages we have discussed. The difference is that the client now reacts to these messages by executing a tool and sending the result back in the next run.<\/p>\n
    However, this initially introduces a challenge: the language model must be informed about the available client-side tools. Here as well, the TypeScript SDK helps us. It provides a Tool<\/code> data type that can be used to define client-side tools. Alongside a name and a textual description, this type also captures information about the expected parameters:<\/p>\n
    \/\/ Client Code\nimport { Tool } from '@ag-ui\/client';\nimport { z } from 'zod';\n\nconst weatherSchema = z.object({\n  condition: z.string().describe('e.g., sunny, cloudy, rainy.'),\n  temperature: z.string().describe('e.g., 25\u00b0C, 77\u00b0F.'),\n  wind: z.string().describe('e.g., 5 km\/h, 3 mph.'),\n});\n\nexport const showWeatherTool: Tool = {\n  name: 'showWeather',\n  description: 'Provide weather data the client can render.',\n  parameters: z.toJSONSchema(weatherSchema),\n};<\/code><\/pre>\n
    The parameters must be defined as JSON Schema. Our example uses the popular schema library zod<\/a> to provide this schema. Based on the description of the tool and its parameters, the LLM can decide when and how to call the tool.<\/p>\n
    The runAgent<\/code> method accepts the tool descriptions and sends them to the agent:<\/p>\n
    \/\/ Client Code\n\n\/\/ 1st run\nawait agent.runAgent({ runId: '0815', tools: [showWeatherTool] }, subscriber);\n\n\/\/ Look into received client-side tool calls and perform respective actions\nconst toolCallResultMessage = [...];\n\n\/\/ Add Tool Call Result\nagent.addMessage(toolCallResultMessage);\n\n\/\/ 2nd run\nawait agent.runAgent({ runId: '0816', tools: [showWeatherTool] }, subscriber);<\/code><\/pre>\n
    After each run, the client checks whether the AgentSubscriber<\/code> has received requests for client-side tool calls. If so, it executes those tools and sends the results back to the agent as part of another run.<\/p>\n
    AG-UI, Message History, and Client Tools<\/h2>\n
    Sending the messages stored via addMessage<\/code>, as well as the information about the client tools, happens through the payload of the HTTP request that starts the next run. Unlike the messages discussed so far, the AG-UI protocol does not define the structure of this payload. It is merely an implementation detail of the AG-UI SDK. Because this SDK is official, one can hope that other implementations will align with it.<\/p>\n
    Reading Client Tool Information on the Server<\/h2>\n
    As mentioned earlier, the adapters of the individual agent frameworks pass the received client-tool information on to the LLM. However, if you want to work with this information manually inside the agent, you will find it in the tools<\/code> property of the parameter object passed to run<\/code>:<\/p>\n
    class FlightWeatherAgent extends AbstractAgent {\n  run(input: RunAgentInput): Observable<BaseEvent> {\n    return new Observable((observer) => {\n      console.log('tools', input.tools);\n      [...]\n    });\n  }\n}<\/code><\/pre>\n
    This is a JSON Schema containing the parameter descriptions and the textual information that the client defined using Zod<\/code>:<\/p>\n
    \"JSON<\/p>\n
    Summary<\/h2>\n
    The TypeScript SDK takes a large portion of the AG-UI integration work off your hands. It handles the correct representation and processing of messages and also provides event handlers so the client can react to incoming messages.<\/p>\n
    The SDK is intentionally low-level. For comfortable use in a framework such as Angular, it therefore needs an additional abstraction. As the second part of the series, this article provides the technical foundation for that. In the next part, we will show how AG-UI can be integrated idiomatically into Angular applications.<\/p>\n
    FAQ<\/h2>\n
    What Does the AG-UI SDK for TypeScript Do?<\/h3>\n
    The SDK provides building blocks for creating, sending, and processing AG-UI messages on the server and in the browser. These include agent classes, subscribers for incoming events, and data types for client tools.<\/p>\n
    Does the AG-UI SDK Support Server-Sent Events?<\/h3>\n
    The SDK works well with server-sent events, but it does not handle the transport integration itself. Sending SSE over HTTP still has to be implemented by the application through glue code or a framework.<\/p>\n
    What Is the Difference Between Server-Side and Client-Side Tool Calls?<\/h3>\n
    Server-side tools are executed by the agent itself, and their results are returned to the model. Client-side tools, by contrast, are requested by the agent, executed in the browser, and their results are sent back to the agent in the next run.<\/p>\n
    Why Is the TypeScript SDK Still Low-Level?<\/h3>\n
    The SDK models AG-UI communication cleanly, but it intentionally leaves many convenience features open. In frameworks such as Angular, an additional abstraction is therefore often useful to reduce boilerplate and make the integration more idiomatic.<\/p>\n","protected":false},"excerpt":{"rendered":"
    This is post 2 of 3 in the series “agentic” Understanding AG-UI: The Standard for Agentic User Interfaces AG-UI in Practice: The SDK for TypeScript Implementing AG-UI with Angular Implementing AG-UI with the SDK on the server and in the client Once AG-UI defines the semantic messages exchanged between client and agent, the next practical […]<\/p>\n","protected":false},"author":25,"featured_media":33193,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_price":"","_stock":"","_tribe_ticket_header":"","_tribe_default_ticket_provider":"","_ticket_start_date":"","_ticket_end_date":"","_tribe_ticket_show_description":"","_tribe_ticket_show_not_going":false,"_tribe_ticket_use_global_stock":"","_tribe_ticket_global_stock_level":"","_global_stock_mode":"","_global_stock_cap":"","_tribe_rsvp_for_event":"","_tribe_ticket_going_count":"","_tribe_ticket_not_going_count":"","_tribe_tickets_list":"[]","_tribe_ticket_has_attendee_info_fields":false,"footnotes":""},"categories":[18],"tags":[],"class_list":["post-33196","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","post_series-agentic"],"acf":[],"yoast_head":"\nAG-UI in Practice: The SDK for TypeScript - ANGULARarchitects<\/title>\n<meta name=\"description\" content=\"How does the AG-UI SDK for TypeScript work? This article shows how to use it on the server and in the browser, and explains server-sent events, tool calls, and client tools in practice.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AG-UI in Practice: The SDK for TypeScript - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"How does the AG-UI SDK for TypeScript work? This article shows how to use it on the server and in the browser, and explains server-sent events, tool calls, and client tools in practice.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-20T12:52:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-20T18:29:53+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/Kopie-von-Kopie-von-Kopie-von-Kopie-von-Kopie-von-Blue-White-and-Red-Modern-Digital-Marketing-Agency-Facebook-Ad-1200-x-628-px-1.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"628\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Manfred Steyer\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/Kopie-von-Kopie-von-Kopie-von-Kopie-von-Kopie-von-Blue-White-and-Red-Modern-Digital-Marketing-Agency-Facebook-Ad-1200-x-628-px-1.png\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Manfred Steyer\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/\"},\"author\":{\"name\":\"Manfred Steyer\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a\"},\"headline\":\"AG-UI in Practice: The SDK for TypeScript\",\"datePublished\":\"2026-04-20T12:52:09+00:00\",\"dateModified\":\"2026-04-20T18:29:53+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/\"},\"wordCount\":1362,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/shutterstock_2650298597.jpg\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/\",\"name\":\"AG-UI in Practice: The SDK for TypeScript - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/shutterstock_2650298597.jpg\",\"datePublished\":\"2026-04-20T12:52:09+00:00\",\"dateModified\":\"2026-04-20T18:29:53+00:00\",\"description\":\"How does the AG-UI SDK for TypeScript work? This article shows how to use it on the server and in the browser, and explains server-sent events, tool calls, and client tools in practice.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/shutterstock_2650298597.jpg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/shutterstock_2650298597.jpg\",\"width\":1000,\"height\":563},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"AG-UI in Practice: The SDK for TypeScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"name\":\"ANGULARarchitects\",\"description\":\"AngularArchitects.io\",\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\",\"name\":\"ANGULARarchitects\",\"alternateName\":\"SOFTWAREarchitects\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg\",\"width\":644,\"height\":216,\"caption\":\"ANGULARarchitects\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/github.com\/angular-architects\",\"https:\/\/www.linkedin.com\/company\/angular-architects\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a\",\"name\":\"Manfred Steyer\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g\",\"caption\":\"Manfred Steyer\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"AG-UI in Practice: The SDK for TypeScript - ANGULARarchitects","description":"How does the AG-UI SDK for TypeScript work? This article shows how to use it on the server and in the browser, and explains server-sent events, tool calls, and client tools in practice.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/","og_locale":"en_US","og_type":"article","og_title":"AG-UI in Practice: The SDK for TypeScript - ANGULARarchitects","og_description":"How does the AG-UI SDK for TypeScript work? This article shows how to use it on the server and in the browser, and explains server-sent events, tool calls, and client tools in practice.","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/","og_site_name":"ANGULARarchitects","article_published_time":"2026-04-20T12:52:09+00:00","article_modified_time":"2026-04-20T18:29:53+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/Kopie-von-Kopie-von-Kopie-von-Kopie-von-Kopie-von-Blue-White-and-Red-Modern-Digital-Marketing-Agency-Facebook-Ad-1200-x-628-px-1.png","type":"image\/png"}],"author":"Manfred Steyer","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/Kopie-von-Kopie-von-Kopie-von-Kopie-von-Kopie-von-Blue-White-and-Red-Modern-Digital-Marketing-Agency-Facebook-Ad-1200-x-628-px-1.png","twitter_misc":{"Written by":"Manfred Steyer","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/"},"author":{"name":"Manfred Steyer","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a"},"headline":"AG-UI in Practice: The SDK for TypeScript","datePublished":"2026-04-20T12:52:09+00:00","dateModified":"2026-04-20T18:29:53+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/"},"wordCount":1362,"commentCount":0,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/shutterstock_2650298597.jpg","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/","name":"AG-UI in Practice: The SDK for TypeScript - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/shutterstock_2650298597.jpg","datePublished":"2026-04-20T12:52:09+00:00","dateModified":"2026-04-20T18:29:53+00:00","description":"How does the AG-UI SDK for TypeScript work? This article shows how to use it on the server and in the browser, and explains server-sent events, tool calls, and client tools in practice.","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/shutterstock_2650298597.jpg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/04\/shutterstock_2650298597.jpg","width":1000,"height":563},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/ag-ui-in-practice-the-sdk-for-typescript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"AG-UI in Practice: The SDK for TypeScript"}]},{"@type":"WebSite","@id":"https:\/\/www.angulararchitects.io\/en\/#website","url":"https:\/\/www.angulararchitects.io\/en\/","name":"ANGULARarchitects","description":"AngularArchitects.io","publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.angulararchitects.io\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.angulararchitects.io\/en\/#organization","name":"ANGULARarchitects","alternateName":"SOFTWAREarchitects","url":"https:\/\/www.angulararchitects.io\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2023\/07\/AA-Logo-RGB-horizontal-inside-knowledge-black.svg","width":644,"height":216,"caption":"ANGULARarchitects"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/github.com\/angular-architects","https:\/\/www.linkedin.com\/company\/angular-architects\/"]},{"@type":"Person","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a","name":"Manfred Steyer","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8778dfb353992fa3a0d909beee085a088891e5bfce65cdb3631801da527cf11b?s=96&d=mm&r=g","caption":"Manfred Steyer"}}]}},"_links":{"self":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/33196","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/users\/25"}],"replies":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/comments?post=33196"}],"version-history":[{"count":2,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/33196\/revisions"}],"predecessor-version":[{"id":33231,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/33196\/revisions\/33231"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/33193"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=33196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=33196"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=33196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}