Tool-UI-Komponenten für React/Next.js

Installiere den belt CLI-Skill: npx skills add belt-sh/cli

Tool-UI-Komponenten

Tool-Lebenszyklus-Komponenten von ui.inference.sh.

Schnellstart

npx shadcn@latest add https://ui.inference.sh/r/tools.json

Tool-Status

Status	Beschreibung
pending	Tool-Aufruf angefordert, wartet auf Ausführung
running	Tool wird gerade ausgeführt
approval	Erfordert menschliche Freigabe vor der Ausführung
success	Tool erfolgreich abgeschlossen
error	Tool-Ausführung fehlgeschlagen

Komponenten

Tool-Aufruf anzeigen

import { ToolCall } from "@/registry/blocks/tools/tool-call"

<ToolCall
  name="search_web"
  args={{ query: "Neueste KI-Nachrichten" }}
  status="running"
/>

Tool-Ergebnis

import { ToolResult } from "@/registry/blocks/tools/tool-result"

<ToolResult
  name="search_web"
  result={{ results: [...] }}
  status="success"
/>

Tool-Genehmigung

import { ToolApproval } from "@/registry/blocks/tools/tool-approval"

<ToolApproval
  name="send_email"
  args={{ to: "[email protected]", subject: "Hallo" }}
  onApprove={() => executeTool()}
  onDeny={() => cancelTool()}
/>

Vollständiges Beispiel

import { ToolCall, ToolResult, ToolApproval } from "@/registry/blocks/tools"

function ToolDisplay({ tool }) {
  if (tool.status === 'approval') {
    return (
      <ToolApproval
        name={tool.name}
        args={tool.args}
        onApprove={tool.approve}
        onDeny={tool.deny}
      />
    )
  }

  if (tool.result) {
    return (
      <ToolResult
        name={tool.name}
        result={tool.result}
        status={tool.status}
      />
    )
  }

  return (
    <ToolCall
      name={tool.name}
      args={tool.args}
      status={tool.status}
    />
  )
}

Tool-Karten gestalten

<ToolCall
  name="read_file"
  args={{ path: "/src/index.ts" }}
  status="running"
  className="border-blue-500"
/>

Tool-Icons

Tools erhalten automatisch Icons basierend auf ihrem Namen:

Muster	Icon
search*, find*	Suche
read*, get*	Datei
write*, create*	Stift
delete*, remove*	Mülleimer
send*, email*	Brief
Standard	Schraubenschlüssel

Mit der Agent-Komponente

Die Agent-Komponente behandelt den Tool-Lebenszyklus automatisch:

import { Agent } from "@/registry/blocks/agent/agent"

<Agent
  proxyUrl="/api/inference/proxy"
  config={{
    core_app: { ref: 'openrouter/claude-sonnet-45@0fkg6xwb' },
    tools: [
      {
        name: 'search_web',
        description: 'Das Web durchsuchen',
        parameters: { query: { type: 'string' } },
        requiresApproval: true, // Freigabeflow aktivieren
      },
    ],
  }}
/>

Verwandte Skills

# Vollständige Agent-Komponente (empfohlen)
npx skills add inference-sh/skills@agent-ui

# Chat-UI-Blöcke
npx skills add inference-sh/skills@chat-ui

# Widgets für Tool-Ergebnisse
npx skills add inference-sh/skills@widgets-ui

Dokumentation

• Tools zu Agenten hinzufügen – Agenten mit Tools ausstatten
• Human-in-the-Loop – Freigabeflows
• Tool-Freigabegates – Genehmigungen implementieren

Komponenten-Dokumentation: ui.inference.sh/blocks/tools