Skip to main content
The Inspector exports chat UI components from @mcp-use/inspector/client for applications that want to embed the Inspector chat experience in their own React UI. Use ChatTab when you want the full chat surface. Use lower-level components such as MessageList only when you need to own the surrounding layout.

​
ChatTab

ChatTab renders the Inspector chat UI for one connected MCP server. 
import { ChatTab } from "@mcp-use/inspector/client";

<ChatTab
  connection={connection}
  isConnected={isConnected}
  prompts={prompts}
  serverId={serverId}
  callPrompt={callPrompt}
  readResource={readResource}
  hideTitle
  hideModelBadge
  hideServerUrl
  clearButtonLabel="Start over"
  clearButtonHideShortcut
  clearButtonVariant="ghost"
/>;

​
Props

PropTypeDescription
connectionunknownActive MCP connection object used by the chat UI.
isConnectedbooleanWhether the MCP server is connected.
promptsunknown[]Prompts available to the chat UI.
serverIdstringStable server identifier for chat state and widget rendering.
callPromptfunctionFunction used to execute an MCP prompt.
readResourcefunctionFunction used to read an MCP resource.
hideTitlebooleanHides the chat header title.
hideModelBadgebooleanHides the selected model badge in the landing state.
hideServerUrlbooleanHides the MCP server URL shown in the landing state.
clearButtonLabelstringCustom label for the clear or new-chat button.
clearButtonHideIconbooleanHides the clear or new-chat button icon.
clearButtonHideShortcutbooleanHides the keyboard shortcut hint on the clear or new-chat button.
clearButtonVariant"default" | "secondary" | "ghost" | "outline"Visual variant for the clear or new-chat button.
hideToolSelectorbooleanHides the tool selector in the chat input.
streamProtocol"sse" | "data-stream"Streaming response protocol. Defaults to Inspector SSE behavior.
credentialsRequestCredentialsFetch credentials used by chat streaming requests.
extraHeadersRecord<string, string>Additional headers sent on every streaming POST.
body(messages) => unknownCustom streaming request body builder.

​
Lower-level components

Use lower-level exports when ChatTab owns too much UI for your application. 
import { MessageList } from "@mcp-use/inspector/client";

<MessageList
  messages={messages}
  isLoading={isLoading}
  serverId={connection.url}
  serverBaseUrl={connection.url}
  tools={connection.tools}
  readResource={readResource}
  sendMessage={(text) => sendMessage(text, [])}
/>;
When rendering widgets inside messages, pass serverBaseUrl from the MCP connection URL so widget resources resolve against the correct server origin.