# AI Chat UIs & MCP Tools

> Render tool calls, stream results, and gate risky actions behind human consent.

Frontend architecture guidance from fearchitect, written by Abas Turabli and last reviewed 2026-06-24. Source: https://fearchitect.com/topics/mcp-tool-uis

Use it as reference for the task at hand. Before changing code, check this guidance against the codebase: where the code already makes a different, deliberate choice, flag the conflict instead of rewriting it. Library APIs move faster than this guide, so confirm exact signatures in the official docs linked at the end.

## Summary

The Model Context Protocol (MCP) is an open standard by Anthropic that lets AI hosts wire up external tools, data sources, and prompt templates through a single transport layer. Frontend engineers care because MCP defines the UI surface: surfacing tool calls, rendering results, and getting user consent before an AI acts on their behalf.

## Model Context Protocol (MCP)

MCP is an open protocol (published by Anthropic, November 2024) that standardises how an AI application connects to external capabilities. The three roles are:

- **Host** — the AI application itself (e.g., Claude.ai, your chat product). It owns the conversation and decides which MCP servers to connect to.
- **Client** — a connector managed inside the host process that holds one persistent connection to one MCP server and mediates every message.
- **Server** — a lightweight process (local or remote) that exposes **tools** (callable functions), **resources** (read-only data, e.g. a file or DB row), and **prompts** (parameterised prompt templates).

The client-server channel uses JSON-RPC 2.0 over stdio or Streamable HTTP.

## Diagram

```mermaid
graph LR
  User["User / Browser"]
  Host["MCP Host
(AI application)"]
  Client["MCP Client
(connector)"]
  Server["MCP Server"]
  Tools["Tools"]
  Resources["Resources"]
  Prompts["Prompts"]

  User -->|"chat input"| Host
  Host -->|"JSON-RPC"| Client
  Client -->|"stdio / Streamable HTTP"| Server
  Server --> Tools
  Server --> Resources
  Server --> Prompts
```

One MCP client per server; a host can run multiple clients to reach multiple servers simultaneously.

## What the frontend needs to handle

- Render a tool-call card when the model invokes a tool, before the result arrives.
- Display the tool result inline once the server responds, keeping chat context intact.
- Gate destructive tools (file writes, API mutations) behind an explicit user approval step.
- Show which MCP server and tool name fired — users need provenance to trust AI actions.
- Handle tool errors gracefully; the model may retry or ask the user to intervene.

## Tool call lifecycle in an MCP chat UI

### 1. Model emits a tool call

The LLM returns a structured tool-use block (name + JSON arguments) instead of plain text. The host intercepts it before displaying anything to the user.

### 2. Host routes to the right client

The host looks up which MCP client owns that tool name and forwards a `tools/call` JSON-RPC request. If no server exposes the tool, the host surfaces an error.

### 3. UI renders a pending tool card

Before the server responds, show a loading card with the tool name and arguments. This makes AI actions visible rather than silent — critical for trust.

### 4. MCP server executes and responds

The server runs the tool and returns a `CallToolResult` with `content[]` (text or image parts). The client forwards it back to the host.

### 5. UI renders the result and continues

Replace the pending card with the actual result. The result is appended to the conversation context and the model generates its next turn.

## Building a UI on MCP — what you gain and pay for

**Pros**

- One protocol to integrate any compliant tool server, not a bespoke client per API.
- Vendor-neutral: swap or add servers without rewriting the chat UI.
- Composable — a host can run many servers and expose their tools together.
- Explicit consent model puts the user in control of what the model executes.

**Cons**

- Protocol overhead is overkill for a single hard-coded integration.
- Rendering diverse tool results (text, images, tables) adds real UI complexity.
- Error handling spans server boundaries — failures can surface far from their cause.
- Young ecosystem: servers, auth patterns, and UI conventions are still settling.

## Watch out: Human-in-the-loop: consent before action

Never auto-approve tool calls that write, delete, or send on behalf of the user. Present the tool name, server origin, and arguments in a confirmation dialog before the host forwards the call. Read-only tools (resources, search) can run silently; mutations need explicit approval. This is a UX contract, not just a policy — if users can't see or stop what the AI does, they won't trust the product.

## Key terms

- **MCP host**: The AI application that owns the conversation and manages one or more MCP client connections.
- **MCP client**: A connector inside the host that holds one persistent JSON-RPC session to one MCP server.
- **MCP server**: A process that exposes tools, resources, and prompts to any compliant MCP client.
- **Tool (MCP)**: A named callable function on an MCP server; the model can invoke it with JSON arguments.
- **Resource (MCP)**: Read-only data exposed by an MCP server (file, DB row, API response) the model can reference.

## Related topics

- [Design-to-Code with MCP](https://fearchitect.com/topics/design-to-code-mcp.md): Feed real design tokens to an AI agent via MCP.
- [Framework MCP Servers (Live Docs for AI Agents)](https://fearchitect.com/topics/framework-mcp-servers.md): Stop agents hallucinating APIs by feeding them the framework's current types.
- [AI-Assisted Dev Workflow](https://fearchitect.com/topics/ai-assisted-dev-workflow.md): Using AI coding agents well without handing them ownership.

## Further reading

- [MCP introduction — modelcontextprotocol.io](https://modelcontextprotocol.io/introduction)
- [MCP architecture overview — modelcontextprotocol.io](https://modelcontextprotocol.io/docs/learn/architecture)
- [MCP server concepts (tools, resources, prompts) — modelcontextprotocol.io](https://modelcontextprotocol.io/docs/learn/server-concepts)
- [TypeScript SDK — @modelcontextprotocol/sdk on npm](https://www.npmjs.com/package/@modelcontextprotocol/sdk)