MCP tool
A call to a tool on an MCP server or connector: the server with its mark, the tool name, input and output, with approval.
On this page
Server, tool name, input and output, with approval.
Installation
Usage
import { ToolMcp } from "@/components/ui/chatcn/tool-mcp"
<ToolMcp server="Linear" tool="create_issue" icon={<LinearMark />} state="output-available" input={input} output={output} />chatcn ships no provider logos; pass your connector's mark as icon. renderToolPart routes every mcp__server__tool name to the mcp entry, and text content in MCP results renders as text.
Props
| Prop | Type | Notes |
|---|---|---|
server | string | Connector or server name |
tool | string | Tool name on that server |
icon | ReactNode | Connector mark. Defaults to a plug |
input, inputText, output | As on ToolCall | |
state | ToolDisplayState | The ToolCall lifecycle: streaming, running, approval, output, error, denied, cancelled |
approval, decision | Approval request and the user's answer, as on ToolCall | |
onApprove, onDeny, onRetry | Same callbacks as ToolCall | |
errorText | ReactNode | Shown on output-error |
durationMs, startedAt | number | Optional. Measured automatically when omitted |
variant | "card" | "inline" | Inline sits on a trace rail |
open, defaultOpen, onOpenChange | Controlled or uncontrolled details |
Keyboard
| Key | Action |
|---|---|
Enter, Space | Expand or collapse the details |
Tab | Move through the header, links, copy buttons and approval actions |
Motion
- Inherits ToolCall: the status glyph swaps with a 150 ms blur crossfade and details open over 200 ms.
- Nothing inside the body animates. Under reduced motion everything snaps.