UI components for rendering tool calls, results, provider icons, and context state from @supyagent/sdk/react.

React Components

The @supyagent/sdk/react sub-package provides React components and utilities for building chat UIs that display Supyagent tool calls and results with rich formatting.

import {
  ProviderIcon,
  ToolInput,
  ContextIndicator,
  SummaryMessage,
  isContextSummary,
  getSummary,
  humanizeToolName,
  getProviderFromToolName,
  getProviderLabel,
  getFormatterType,
  resolveToolName,
  PROVIDER_LABELS,
} from '@supyagent/sdk/react';

Peer Dependencies

The React components require react, react-dom, and lucide-react:

npm install react react-dom lucide-react

Components

`ProviderIcon`

Renders a Lucide icon for a tool based on its name. Maps tool name prefixes (e.g., gmail_, slack_, calendar_) to appropriate icons.

<ProviderIcon toolName="gmail_list_messages" className="h-4 w-4" />
// → Renders a Mail icon

<ProviderIcon toolName="slack_send_message" />
// → Renders a MessageSquare icon

<ProviderIcon toolName="unknown_tool" />
// → Renders a fallback Wrench icon

Prop	Type	Default	Description
`toolName`	`string`	—	The tool name (e.g., `gmail_list_messages`)
`className`	`string`	`"h-4 w-4"`	CSS classes for the icon

`ToolInput`

Renders tool call arguments as a two-column grid (key → value).

<ToolInput args={{ to: "user@example.com", subject: "Hello", body: "..." }} />
// Renders:
// to       user@example.com
// subject  Hello
// body     ...

Prop	Type	Description
`args`	`Record<string, unknown>`	Tool call arguments to display

`ContextIndicator`

A small progress bar showing context window usage. Reads token metadata from the most recent assistant message.

import { ContextIndicator } from '@supyagent/sdk/react';

<ContextIndicator messages={messages} maxTokens={200_000} />
// Renders: [████████░░░░░░░░] 52%

Color-coded by usage level:

Green (under 50%) — Plenty of room
Yellow (50–75%) — Getting warm
Orange (75–90%) — Approaching limit
Red (over 90%) — Near capacity

Prop	Type	Default	Description
`messages`	`UIMessage[]`	—	Messages array from `useChat()`
`maxTokens`	`number`	`128000`	Model's context window size
`className`	`string`	—	CSS classes for the container

Returns null until the first assistant response is received (no metadata yet).

`SummaryMessage`

Renders a context-summary message as a collapsible card with a dashed border. Shows how many messages were summarized and lets users expand to read the summary.

import { SummaryMessage, isContextSummary } from '@supyagent/sdk/react';

{messages.map((message) =>
  isContextSummary(message) ? (
    <SummaryMessage key={message.id} message={message} />
  ) : (
    <RegularMessage key={message.id} message={message} />
  )
)}

Prop	Type	Description
`message`	`UIMessage`	A message with `metadata.type === "context-summary"`
`className`	`string`	CSS classes for the container

`isContextSummary(message)`

Checks whether a UIMessage is a context summary:

if (isContextSummary(message)) {
  // Render differently
}

Utility Functions

`getSummary(data, toolName)`

Generate a human-readable summary of a tool result. Returns { text, badge? }.

const { text, badge } = getSummary(toolResult, 'gmail_list_messages');
// text: "Listed 12 emails"
// badge: { text: "12", variant: "default" }

const { text } = getSummary(toolResult, 'slack_send_message');
// text: "Sent message to #general"

`humanizeToolName(toolName)`

Convert a tool name to a human-readable label:

humanizeToolName('gmail_list_messages')  // → "List messages"
humanizeToolName('calendar_create_event') // → "Create event"

`getProviderFromToolName(toolName)`

Extract the provider prefix from a tool name:

getProviderFromToolName('gmail_list_messages') // → "gmail"
getProviderFromToolName('slack_send_message')  // → "slack"

`getProviderLabel(provider)`

Get a display-friendly label for a provider:

getProviderLabel('gmail')   // → "Gmail"
getProviderLabel('hubspot') // → "HubSpot"
getProviderLabel('github')  // → "GitHub"

`getFormatterType(toolName)`

Determine which formatter category a tool belongs to:

getFormatterType('gmail_list_messages')    // → "email"
getFormatterType('calendar_create_event')  // → "calendar"
getFormatterType('slack_send_message')     // → "slack"
getFormatterType('microsoft_mail_list')    // → "email" (Microsoft → Google formatter)

`resolveToolName(rawToolName, args?)`

Resolve a virtual tool name for rendering. For apiCall tools, derives the tool name from the API path:

resolveToolName('apiCall', { path: '/api/v1/gmail/messages' })
// → "gmail_messages"

resolveToolName('gmail_list_messages')
// → "gmail_list_messages" (unchanged)

`PROVIDER_LABELS`

A map of all known provider keys to display labels:

import { PROVIDER_LABELS } from '@supyagent/sdk/react';
// { gmail: "Gmail", calendar: "Calendar", slack: "Slack", ... }

Provider Formatters

The package also exports provider-specific formatter components for rich result rendering. These are intended for building custom tool result UIs:

Formatter	Provider
`EmailFormatter`	Gmail, Outlook
`CalendarEventFormatter`	Google Calendar, Microsoft Calendar
`SlackMessageFormatter`	Slack
`GithubFormatter`	GitHub
`DriveFileFormatter`	Google Drive, OneDrive
`DocsFormatter`	Google Docs
`SheetsFormatter`	Google Sheets
`SlidesFormatter`	Google Slides
`SearchFormatter`	Web Search
`ComputeFormatter`	Code execution
`HubspotFormatter`	HubSpot
`LinearFormatter`	Linear
`PipedriveFormatter`	Pipedrive
`ResendFormatter`	Resend
`InboxFormatter`	AI Inbox
`DiscordFormatter`	Discord
`NotionFormatter`	Notion
`TwitterFormatter`	Twitter/X
`TelegramFormatter`	Telegram
`WhatsAppFormatter`	WhatsApp
`BrowserFormatter`	Browser
`ViewImageFormatter`	Image viewing
`GenericFormatter`	Fallback

What's Next

Context Management — How ContextIndicator and SummaryMessage connect to the context manager
Full API Route Example — See the full server + client pattern

React Components

On this page