{"id":34562,"date":"2026-07-30T10:05:08","date_gmt":"2026-07-30T08:05:08","guid":{"rendered":"https:\/\/www.angulararchitects.io\/?p=34562"},"modified":"2026-07-30T10:49:23","modified_gmt":"2026-07-30T08:49:23","slug":"mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses","status":"publish","type":"post","link":"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/","title":{"rendered":"MCP Apps in Angular with CopilotKit: Rich Chat Interfaces Instead of Text Responses"},"content":{"rendered":"
\n\t\t\t\n\t\n\t\n\t\t

\n\t\t\tThis is post 10 of 10 in the series “Agentic UI with Angular”<\/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<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  3. AG-UI End to End: Connecting Server and Client<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  4. Agentic UI with Angular, CopilotKit, and AG-UI<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  5. A2UI: How AI Generates Dynamic UIs at Runtime<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  6. Integrating A2UI with AG-UI and CopilotKit in Angular<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  7. Custom Catalogs in A2UI: Your Own Components for AI-Generated UIs<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  8. A2UI with a DSL: Controllable Dashboards Optimized for Performance<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  9. Agentic UI with MCP Apps: Tool Results as Interactive Widgets<\/a><\/li>\n\t\t\t\t\t\t\t\t\t
  10. MCP Apps in Angular with CopilotKit: Rich Chat Interfaces Instead of Text Responses<\/span><\/li>\n\t\t\t\t\t\t\t<\/ol>\n\t\t<\/div>\n\t<\/div>\n

    In the previous article<\/a>, we laid the foundations of MCP and MCP Apps: MCP connects agents with external tools, and MCP Apps lifts their results from plain text to the level of interactive user interfaces. Using a minimal, VanillaJS-based demo, we saw how a host loads an app into a secured iframe and communicates with it via the postMessage<\/code> API \u2013 abstracted by the App<\/code> object and the AppBridge<\/code>. From establishing the connection, through the exchange of tool parameters, results, and host context, all the way to the orderly teardown, we walked through the entire lifecycle.<\/p>\n

    We now apply this foundation to a complete case study. This time, a real MCP server, a language model, the agent framework Mastra, and the AG-UI protocol come into play. The goal is to connect a business partner's MCP server to our flight portal and present its results with the help of an MCP App.<\/p>\n

    \ud83d\udcc2 Source code<\/a> (branch: copilotkit<\/em>)<\/p>\n

    The readme shows how to start the example including the backend and the MCP server.<\/p>\n

    Integrating an MCP Server with MCP Apps<\/h2>\n

    Having clarified the basic mechanics of MCP Apps with the first example, we now want to apply our knowledge to a larger case study with a language model and an MCP server. The idea is to connect the MCP server of a business partner specialized in hotel bookings to our flight portal. This way, our customers can inquire not only about flights but also about hotels in the destination city:<\/p>\n

    \"\"<\/p>\n

    Providing an MCP Server<\/h3>\n

    The implementation of the MCP server isn't the focus of this article. For better understanding, however, I still want to take a brief look at our Node.js implementation. When using other server frameworks, the approach is very similar.<\/p>\n

    An object of type McpServer<\/code> from the MCP SDK represents the server itself:<\/p>\n

    import { McpServer } from '@modelcontextprotocol\/sdk\/server\/mcp.js';\n\n[...]\n\nconst server = new McpServer({\n  name: 'Flights42 Hotels MCP Server',\n  version: '1.0.0',\n});<\/code><\/pre>\n
    The name and the version are merely metadata. Consumers can use them to avoid possible version conflicts.<\/p>\n
    With the function registerAppTool<\/code> from the MCP Apps SDK, we register a tool with the McpServer<\/code>:<\/p>\n
    import {\n  registerAppTool,\n} from '@modelcontextprotocol\/ext-apps\/server';\n\n[...]\n\nexport const HOTELS_RESOURCE_URI = 'ui:\/\/hotels\/results.html';\n\nregisterAppTool(\n  server,\n  'findHotels',\n  {\n    title: 'Find Hotels',\n    description:\n      'Find three demo hotels for a city. Use this when the user asks for hotels in a specific city.',\n    inputSchema: findHotelsInputSchema,\n    outputSchema: findHotelsResultSchema,\n    _meta: {\n      ui: {\n        resourceUri: HOTELS_RESOURCE_URI,\n      },\n    },\n  },\n  async (input) => {\n    const result = findHotels(findHotelsInputSchema.parse(input));\n    const hotels = result.hotels;\n    return {\n      content: [{ type: 'text', text: `${hotels.length} hotels found` }],\n      structuredContent: result,\n    };\n  },\n);<\/code><\/pre>\n
    As usual, an id, a name, a description, and schemas for parameters and return value define the tool. The schema description here, too, is done as usual via Zod:<\/p>\n
    export const findHotelsInputSchema = z.object({\n  city: z.string().trim().min(1).describe('The city to search hotels for.'),\n});\n\nexport const findHotelsResultSchema = z.object({\n  city: z.string(),\n  hotels: z.array(hotelSchema),\n});<\/code><\/pre>\n
    In addition, registerAppTool<\/code> also takes the implementation of the tool. This receives an object of type findHotelsInputSchema<\/code>, searches for hotels, and returns a result with a structuredContent<\/code> of type findHotelsResultSchema<\/code>. Additionally, the return value contains a piece of textual information.<\/p>\n
    The decisive point for MCP Apps, however, is the registration of a resourceUri<\/code> in the tool's metadata. This URI points to an MCP resource that delivers the app's HTML file. The server registers this resource with the function registerAppResource<\/code>:<\/p>\n
    import {\n  registerAppResource,\n  RESOURCE_MIME_TYPE\n} from '@modelcontextprotocol\/ext-apps\/server';\n\n[...]\n\nconst htmlPath = resolve(distDir, 'index.html');\n\nregisterAppResource(\n  server,\n  'Flights42 Hotel Results',\n  HOTELS_RESOURCE_URI,\n  {\n    description: 'Hotel results rendered as an interactive MCP App.',\n  },\n  async () => {\n    const html = await readFile(htmlPath, 'utf8');\n\n    return {\n      contents: [\n        {\n          uri: HOTELS_RESOURCE_URI,\n          mimeType: RESOURCE_MIME_TYPE, \n            \/\/ text\/html;profile=mcp-app\n          text: html,\n          [...]\n        },\n      ],\n    };\n  },\n);<\/code><\/pre>\n
    In addition, we make the McpServer<\/code> accessible via HTTP through an Express server. The complete source code of the server can be found in the article's repository (mcp-server\/src\/server.ts<\/a>).<\/p>\n
    Direct Access with the MCP Inspector<\/h3>\n
    The MCP Inspector application allows us to interact directly with an MCP server. This includes retrieving metadata about tools, retrieving resources, and executing tools:<\/p>\n
    \"\"<\/p>\n
    The inspector can be started without prior installation using the command npx @modelcontextprotocol\/inspector<\/code>. Afterwards, you enter the address of the MCP server and connect.<\/p>\n
    With our MCP server, you find the app's resourceUri<\/code> in the metadata of the find-hotels tool. If you then retrieve the associated resource, you arrive at its HTML.<\/p>\n
    Integrating MCP Apps into the Backend<\/h3>\n
    For an agent to pick up the tools of an MCP server, that server must be registered with it. With most agent frameworks, specifying the address of the MCP server is enough for this.<\/p>\n
    The agent framework Mastra that we use, for example, offers an MCPClient<\/code> object with which you can retrieve metadata about all offered tools of an MCP server. These tools can be registered with the agent just like local tools:<\/p>\n
    import { MCPClient } from '@mastra\/mcp';\n[...]\n\nconst hotelsMcpTools = await new MCPClient({\n      id: 'hotels-mcp-client',\n      servers: { hotels: { url: new URL('http:\/\/127.0.0.1:3002\/mcp') } },\n    }).listTools();\n\nexport const ticketingAgent = new Agent({\n  id: 'ticketingAgent',\n  tools: {\n    [...],\n    ...hotelsMcpTools,\n  },\n});<\/code><\/pre>\n
    MCP Apps via AG-UI<\/h3>\n
    To point the client to an existing MCP App via AG-UI, the server sends a message of type ACTIVITY_SNAPSHOT<\/code>:<\/p>\n
    {\n  "type": "ACTIVITY_SNAPSHOT",\n  "messageId": "0145bd3d-fb17-4d72-907a-9b2a1d9fad63",\n  "activityType": "mcp-apps",\n  "content": {\n    "serverHash": "",\n    "serverId": "hotels",\n    "resourceUri": "ui:\/\/hotels\/results.html",\n    "toolInput": {\n      "city": "Paris"\n    },\n    "result": {\n      "content": [\n        {\n          "type": "text",\n          "text": "{ \\"city\\": \\"Paris\\", \\"hotels\\": [...] }"\n        }\n      ],\n      "structuredContent": {\n        "city": "Paris",\n        "hotels": [\n          {\n            "id": "grand-palace",\n            "name": "Grand Palace Paris",\n            "sterne": 5,\n            "imageUrl": "http:\/\/127.0.0.1:3002\/assets\/hotels\/grand-palace.svg"\n          },\n          {\n            "id": "skyline-suites",\n            "name": "Skyline Suites Paris",\n            "sterne": 4,\n            "imageUrl": "http:\/\/127.0.0.1:3002\/assets\/hotels\/skyline-suites.svg"\n          },\n          {\n            "id": "biz-hotel",\n            "name": "Biz Hotel Paris",\n            "sterne": 3,\n            "imageUrl": "http:\/\/127.0.0.1:3002\/assets\/hotels\/biz-hotel.svg"\n          }\n        ]\n      }\n    }\n  }\n}<\/code><\/pre>\n
    The important thing here is the activityType<\/code>. Because of the value mcp-apps<\/code>, the client recognizes that this is information for an MCP App. In this case, the content<\/code> node contains the reference to the resource, the parameters sent to the tool, and the result.<\/p>\n
    Hint: The ExtendedMastraAgent<\/code> (libs\/ag-ui-server\/extended-mastra-agent.ts<\/a>) used in our demo application contains a bit of logic that, after a tool call, sends such an activity snapshot, provided an MCP App is linked to the respective tool.<\/p>\n
    NOTE<\/p>\n
    Agentic UI with Angular<\/h3>\n
    If you don't just want to use MCP Apps, AG-UI, and agents in isolation but combine them into a solid architecture:
    \nIn my book Agentic UI with Angular, I cover the underlying patterns and trade-offs in depth.<\/p>\n
    \"Cover<\/a><\/p>\n
    Learn more about the eBook \u2192<\/a>\n<\/div>\n<\/p>\n
    CopilotKit's MCP Apps Renderer<\/h3>\n
    To display the received activity snapshot in the client, we need an activity renderer. CopilotKit ships such a renderer for MCP Apps. It lives in the secondary entry point @copilotkit\/angular\/mcp-apps<\/code> and is set up in app.config.ts<\/a> with the function provideMCPApps<\/code>:<\/p>\n
    \/\/ src\/app\/app.config.ts\n\nimport { provideCopilotKit } from '@copilotkit\/angular';\nimport { provideMCPApps } from '@copilotkit\/angular\/mcp-apps';\n\nimport { mcpAppsConfig } from '.\/mcp-apps.config';\n\n[...]\n\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    [...],\n\n    provideCopilotKit({\n      [...]\n    }),\n\n    provideMCPApps(mcpAppsConfig),\n\n    [...]\n  ],\n};<\/code><\/pre>\n
    Configuring the Host Information<\/h3>\n
    The configuration passed to provideMCPApps<\/code> is typed with MCPAppsConfig<\/code>. Above all, it defines the hostInfo<\/code> and the hostContext<\/code> \u2013 the key parameters that we discussed in the first part in the context of the first demo application:<\/p>\n
    \/\/ src\/app\/mcp-apps.config.ts\n\nimport type { MCPAppsConfig } from '@copilotkit\/angular\/mcp-apps';\n\nexport const mcpAppsConfig: MCPAppsConfig = {\n  hostInfo: { name: 'Flights42 MCP Host', version: '1.0.0' },\n  hostContext: {\n    displayMode: 'inline',\n    theme: 'light',\n    styles: {\n      variables: {\n        '--color-ring-primary': '#3f51b5',\n      },\n    },\n  },\n};<\/code><\/pre>\n
    The Proxy in the Backend<\/h3>\n
    This leaves the question of how the requests originating from the widget reach the MCP server. In principle, this could happen directly from the browser \u2013 provided the MCP server sets the appropriate CORS headers. CopilotKit, however, assumes a proxy in the backend: the requests travel over the AG-UI endpoint that is already in place; the MCP server's address and any credentials thus remain a backend detail. This proxy task is handled by the MCPAppsMiddleware<\/code> from the package @ag-ui\/mcp-apps-middleware<\/code>. For this, our AG-UI route (ag-ui-route.ts<\/a>) declares the hotels MCP server's configuration exactly once:<\/p>\n
    \/\/ ai-server\/src\/mastra\/routes\/ag-ui-route.ts\n\nimport {\n  MCPAppsMiddleware,\n  type MCPClientConfig,\n} from '@ag-ui\/mcp-apps-middleware';\n\n[...]\n\nconst HOTELS_MCP_SERVER: MCPClientConfig = {\n  type: 'http',\n  url: 'http:\/\/127.0.0.1:3002\/mcp',\n  serverId: 'hotels',\n};\n\nconst mcpAppsProxy = new MCPAppsMiddleware({\n  mcpServers: [HOTELS_MCP_SERVER],\n});<\/code><\/pre>\n
    The server-side route handler then checks whether the incoming run carries a widget request. If so, the run goes through the middleware \u2013 without an agent and thus without a language model. All other runs go to the agent as before:<\/p>\n
    const agent = getExtendedLocalAgent({\n  [...]\n});\n\nconst middleware = isProxiedMcpRequest(parsed.input.forwardedProps)\n  ? mcpAppsProxy\n  : undefined;\n\n[...]\n\nawait streamAgentEvents(sse, agent, parsed.input, { middleware });<\/code><\/pre>\n
    For this, the function streamAgentEvents<\/code> accepts an optional middleware<\/code> parameter and then subscribes to middleware.run(input, agent)<\/code> instead of agent.run(input)<\/code>.<\/p>\n
    Important for the overall picture: the MCP server's tools remain registered at agent level \u2013 as shown above \u2013 and continue to be executed on the server during the run. In this setup, the middleware serves solely as a proxy for the resources\/read<\/code> and tools\/call<\/code> requests initiated by the widget.<\/p>\n
    Rendering Activities<\/h3>\n
    Since we use CopilotKit in headless mode, we have to take care of rendering the activities ourselves. When iterating over the messages of the chat history, we therefore check whether an activity<\/code> is present for the current message. If so, we display it with the helper component app-copilot-activity<\/code>.<\/p>\n
    <!-- \n  src\/app\/domains\/shared\/ui-assistant\/chat-messages\/chat-messages.html \n-->\n\n[...]\n@for (view of views(); track view.id) {\n\n  [...]\n\n  @if (view.activity) {\n    @let activity = view.activity;\n    <article class="msg {{ view.variant }}">\n      <div class="avatar">{{ view.avatar }}<\/div>\n      <div>\n        <div class="bubble" [class.bubble--a2ui]="activity.isSurface">\n          <app-copilot-activity\n            [message]="activity.message"\n            [agentId]="agentId()" \/>\n        <\/div>\n        <div class="meta"><\/div>\n      <\/div>\n    <\/article>\n  }\n\n  [...]\n\n}\n\n[...]<\/code><\/pre>\n
    When this text was written, there was no ready-made component for headless mode for visualizing activities yet. That's why app-copilot-activity<\/code>, as the app-<\/code> prefix reveals, is a self-written component.<\/p>\n
    It takes the current message as well as the agentId<\/code> and derives the view to display from them in a computed<\/code>:<\/p>\n
    \/\/ src\/app\/domains\/shared\/util-copilotkit\/activity\/copilot-activity.ts\n\n[...]\n\n@Component({\n  selector: 'app-copilot-activity',\n  imports: [NgComponentOutlet],\n  template: `\n    @let view = rendered();\n    @if (view) {\n      <ng-container *ngComponentOutlet="view.component; inputs: view.inputs" \/>\n    }\n  `,\n  [...]\n})\nexport class CopilotActivity {\n  private readonly copilotKit = inject(CopilotKit);\n\n  readonly message = input.required<ActivityMessage>();\n  readonly agentId = input.required<string>();\n\n  protected readonly rendered = computed(() =>\n    toRenderActivity(\n      this.message(),\n      this.copilotKit.activityMessageRenderConfigs(),\n      this.agentId(),\n      this.copilotKit.getAgent(this.agentId()),\n    ),\n  );\n}<\/code><\/pre>\n
    The list activityMessageRenderConfigs()<\/code> includes not only the configurations registered by the application but also the shipped renderers \u2013 among them the MCP Apps renderer set up via provideMCPApps<\/code>. It fetches the app's HTML through the proxy discussed earlier and routes the widget's further requests there as well. The serverId<\/code> from the activity snapshot indicates which of the MCP servers configured at the proxy is meant \u2013 only the backend knows the server's URL.<\/p>\n
    The actual selection of the renderer is handled by the function toRenderActivity<\/code>:<\/p>\n
    export function toRenderActivity(\n  message: ActivityMessage,\n  configs: readonly RenderActivityMessageConfig[],\n  agentId: string,\n  agent: AbstractAgent | undefined,\n): RenderedActivity | null {\n  const matches = configs.filter(\n    (candidate) => candidate.activityType === message.activityType,\n  );\n\n  const config =\n    matches.find((candidate) => candidate.agentId === agentId) ??\n    matches.find((candidate) => candidate.agentId === undefined) ??\n    configs.find((candidate) => candidate.activityType === '*');\n\n  if (!config) {\n    return null;\n  }\n\n  const parsed = config.content.safeParse(message.content);\n  if (!parsed.success) {\n    [...]\n    return null;\n  }\n\n  return {\n    component: config.component,\n    inputs: {\n      activityType: message.activityType,\n      content: parsed.data,\n      message,\n      agent,\n    },\n  };\n}<\/code><\/pre>\n
    The selection follows the logic that CopilotKit uses internally in its CopilotChatMessageView<\/code> component: among the renderers with a matching activityType<\/code> \u2013 mcp-apps<\/code> in our case \u2013 one registered for the concrete agentId<\/code> wins first; after that, an agent-independent entry comes into play, and as a last resort a wildcard renderer with the activityType<\/code> '*'<\/code>. The function then validates the snapshot's content with the schema stored in the renderer and returns the component along with its inputs, which the template displays via *ngComponentOutlet<\/code>.<\/p>\n
    Summary<\/h2>\n
    MCP standardizes the connection of tools to agents, and MCP Apps lifts this idea to the level of the user interface: instead of a tool result in textual form, the user receives an interactive, tailored interface. An MCP App is a standalone web application that the MCP server provides as a resource and to which a tool's metadata points via a resourceUri<\/code>. The host loads the app into a secured iframe and communicates with it via the postMessage<\/code> API \u2013 abstracted by the App<\/code> object on the app side and the AppBridge<\/code> on the host side.<\/p>\n
    Via the host context, the host prescribes theming and layout; conversely, the app reports its space requirements so that no scrollbar arises. The lifecycle spans from initialization, through the exchange of tool parameters and results, all the way to the orderly teardown with teardownResource<\/code> and close<\/code>. In a real-world setup with a language model, the MCP server registers tool and resource together, the agent integrates the tools like local tools, and after a tool call AG-UI transports an ACTIVITY_SNAPSHOT<\/code> to the client, which an activity renderer picks up and displays as an MCP App. The accompanying widget does not connect to the MCP server directly; it routes resource and tool requests through the AG-UI agent to a server-side proxy based on the MCPAppsMiddleware<\/code>.<\/p>\n
    <\/p>\n
    Interested in production-ready Agentic UI architectures?<\/h3>\n
    In my workshop, we dig into AG-UI, A2UI, MCP Apps, HITL patterns, and modern Angular architectures for real-world agentic systems.<\/p>\n
    \"Workshop:<\/a><\/p>\n
    See all details \u2192<\/a>\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
    This is post 10 of 10 in the series “Agentic UI with Angular” Understanding AG-UI: The Standard for Agentic User Interfaces AG-UI in Practice: The SDK for TypeScript AG-UI End to End: Connecting Server and Client Agentic UI with Angular, CopilotKit, and AG-UI A2UI: How AI Generates Dynamic UIs at Runtime Integrating A2UI with AG-UI […]<\/p>\n","protected":false},"author":25,"featured_media":34552,"comment_status":"open","ping_status":"open","sticky":true,"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-34562","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","post_series-agentic-angular"],"acf":[],"yoast_head":"\nMCP Apps in Angular with CopilotKit: Rich Chat Interfaces Instead of Text Responses - ANGULARarchitects<\/title>\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\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"MCP Apps in Angular with CopilotKit: Rich Chat Interfaces Instead of Text Responses - ANGULARarchitects\" \/>\n<meta property=\"og:description\" content=\"This is post 10 of 10 in the series “Agentic UI with Angular” Understanding AG-UI: The Standard for Agentic User Interfaces AG-UI in Practice: The SDK for TypeScript AG-UI End to End: Connecting Server and Client Agentic UI with Angular, CopilotKit, and AG-UI A2UI: How AI Generates Dynamic UIs at Runtime Integrating A2UI with AG-UI […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/\" \/>\n<meta property=\"og:site_name\" content=\"ANGULARarchitects\" \/>\n<meta property=\"article:published_time\" content=\"2026-07-30T08:05:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-30T08:49:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/07\/sujet-2.jpg\" \/>\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\/jpeg\" \/>\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\/07\/sujet-2.jpg\" \/>\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=\"12 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\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/\"},\"author\":{\"name\":\"Manfred Steyer\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a\"},\"headline\":\"MCP Apps in Angular with CopilotKit: Rich Chat Interfaces Instead of Text Responses\",\"datePublished\":\"2026-07-30T08:05:08+00:00\",\"dateModified\":\"2026-07-30T08:49:23+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/\"},\"wordCount\":1556,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-30-2026-09_59_18-AM.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/\",\"url\":\"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/\",\"name\":\"MCP Apps in Angular with CopilotKit: Rich Chat Interfaces Instead of Text Responses - ANGULARarchitects\",\"isPartOf\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-30-2026-09_59_18-AM.png\",\"datePublished\":\"2026-07-30T08:05:08+00:00\",\"dateModified\":\"2026-07-30T08:49:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/#primaryimage\",\"url\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-30-2026-09_59_18-AM.png\",\"contentUrl\":\"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-30-2026-09_59_18-AM.png\",\"width\":1672,\"height\":941},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.angulararchitects.io\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"MCP Apps in Angular with CopilotKit: Rich Chat Interfaces Instead of Text Responses\"}]},{\"@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":"MCP Apps in Angular with CopilotKit: Rich Chat Interfaces Instead of Text Responses - ANGULARarchitects","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\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/","og_locale":"en_US","og_type":"article","og_title":"MCP Apps in Angular with CopilotKit: Rich Chat Interfaces Instead of Text Responses - ANGULARarchitects","og_description":"This is post 10 of 10 in the series “Agentic UI with Angular” Understanding AG-UI: The Standard for Agentic User Interfaces AG-UI in Practice: The SDK for TypeScript AG-UI End to End: Connecting Server and Client Agentic UI with Angular, CopilotKit, and AG-UI A2UI: How AI Generates Dynamic UIs at Runtime Integrating A2UI with AG-UI […]","og_url":"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/","og_site_name":"ANGULARarchitects","article_published_time":"2026-07-30T08:05:08+00:00","article_modified_time":"2026-07-30T08:49:23+00:00","og_image":[{"width":1200,"height":628,"url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/07\/sujet-2.jpg","type":"image\/jpeg"}],"author":"Manfred Steyer","twitter_card":"summary_large_image","twitter_image":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/07\/sujet-2.jpg","twitter_misc":{"Written by":"Manfred Steyer","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/#article","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/"},"author":{"name":"Manfred Steyer","@id":"https:\/\/www.angulararchitects.io\/en\/#\/schema\/person\/f3de69c1e2bdb5ba04d8d2f5f998b81a"},"headline":"MCP Apps in Angular with CopilotKit: Rich Chat Interfaces Instead of Text Responses","datePublished":"2026-07-30T08:05:08+00:00","dateModified":"2026-07-30T08:49:23+00:00","mainEntityOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/"},"wordCount":1556,"commentCount":0,"publisher":{"@id":"https:\/\/www.angulararchitects.io\/en\/#organization"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-30-2026-09_59_18-AM.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/","url":"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/","name":"MCP Apps in Angular with CopilotKit: Rich Chat Interfaces Instead of Text Responses - ANGULARarchitects","isPartOf":{"@id":"https:\/\/www.angulararchitects.io\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/#primaryimage"},"image":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/#primaryimage"},"thumbnailUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-30-2026-09_59_18-AM.png","datePublished":"2026-07-30T08:05:08+00:00","dateModified":"2026-07-30T08:49:23+00:00","breadcrumb":{"@id":"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/#primaryimage","url":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-30-2026-09_59_18-AM.png","contentUrl":"https:\/\/www.angulararchitects.io\/wp-content\/uploads\/2026\/07\/ChatGPT-Image-Jul-30-2026-09_59_18-AM.png","width":1672,"height":941},{"@type":"BreadcrumbList","@id":"https:\/\/www.angulararchitects.io\/en\/blog\/mcp-apps-in-angular-with-copilotkit-rich-chat-interfaces-instead-of-text-responses\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.angulararchitects.io\/en\/"},{"@type":"ListItem","position":2,"name":"MCP Apps in Angular with CopilotKit: Rich Chat Interfaces Instead of Text Responses"}]},{"@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\/34562","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=34562"}],"version-history":[{"count":7,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/34562\/revisions"}],"predecessor-version":[{"id":34582,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/posts\/34562\/revisions\/34582"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media\/34552"}],"wp:attachment":[{"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/media?parent=34562"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/categories?post=34562"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.angulararchitects.io\/en\/wp-json\/wp\/v2\/tags?post=34562"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}