38 copy-paste components.
Multi-framework. MCP-native.

// Build a tool-call card from scratch
import { useState, useEffect } from 'react'
import { ToolStateApi } from '@modelcontextprotocol/sdk'

type Status = 'idle' | 'pending' | 'running' | 'done' | 'error'

export function ToolCallCard({ tool, args, onRetry }: Props) {
  const [status, setStatus] = useState<Status>('idle')
  const [result, setResult] = useState<ToolResult>()
  const [error, setError] = useState<Error>()
  const [progress, setProgress] = useState(0)

  // …subscribe to the SDK, validate transitions, handle race
  // conditions, render 6 states, manage retry, accessibility,
  // theme tokens, keyboard nav, focus rings, ARIA live regions…

  return (
    <div role="region" aria-live="polite" className="…">
      <header>
        <span>{tool}</span>
        <StatusBadge status={status} />
      </header>
      {args && <ArgsBlock args={args} />}
      {status === 'running' && <Progress value={progress} />}
      {status === 'done' && <ResultBlock result={result} />}
      {status === 'error' && (
        <ErrorBlock error={error} onRetry={onRetry} />
      )}
    </div>
  )
}

// 47 lines later… and you still haven't shipped consent or scopes.