101-skills/superpowers

Installiere die CLI-Skill „belt“: npx skills add belt-sh/cli

Agent-Komponente

Rundum-sorglos-Agent-Komponente von ui.inference.sh.

Schnellstart

# Installiere die Agent-Komponente
npx shadcn@latest add https://ui.inference.sh/r/agent.json

# Füge das SDK für die Proxy-Route hinzu
npm install @inferencesh/sdk

Einrichtung

1. API-Proxy-Route (Next.js)

// app/api/inference/proxy/route.ts
import { route } from '@inferencesh/sdk/proxy/nextjs';
export const { GET, POST, PUT } = route;

2. Umgebungsvariable

# .env.local
INFERENCE_API_KEY=inf_...

3. Verwende die Komponente

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

export default function Page() {
  return (
    <Agent
      proxyUrl="/api/inference/proxy"
      agentConfig={{
        core_app: { ref: 'openrouter/claude-haiku-45@0fkg6xwb' },
        description: 'ein hilfreicher KI-Assistent',
        system_prompt: 'Du bist hilfreich.',
      }}
    />
  )
}

Funktionen

Funktion	Beschreibung
Laufzeit integriert	Keine Backend-Logik erforderlich
Tool-Lebenszyklus	Ausstehend, Fortschritt, Genehmigung, Ergebnisse
Human-in-the-Loop	Integrierte Genehmigungsabläufe
Widgets	Deklarative JSON-Benutzeroberfläche aus Agentenantworten
Streaming	Echtzeit-Token-Streaming
Clientseitige Tools	Tools, die im Browser ausgeführt werden

Beispiel für clientseitige Tools

import { Agent } from "@/registry/blocks/agent/agent"
import { createScopedTools } from "./blocks/agent/lib/client-tools"

const formRef = useRef<HTMLFormElement>(null)
const scopedTools = createScopedTools(formRef)

<Agent
  proxyUrl="/api/inference/proxy"
  config={{
    core_app: { ref: 'openrouter/claude-haiku-45@0fkg6xwb' },
    tools: scopedTools,
    system_prompt: 'Du kannst Formulare mit den Tools scan_ui und fill_field ausfüllen.',
  }}
/>

Eigenschaften

Prop	Typ	Beschreibung
proxyUrl	string	API-Proxy-Endpunkt
name	string	Agentenname (optional)
config	AgentConfig	Agentenkonfiguration
allowFiles	boolean	Datei-Uploads aktivieren
allowImages	boolean	Bild-Uploads aktivieren

Verwandte Skills

# Chat-UI-Bausteine
npx skills add inference-sh/skills@chat-ui

# Deklarative Widgets aus JSON
npx skills add inference-sh/skills@widgets-ui

# Tool-Lebenszyklus-UI
npx skills add inference-sh/skills@tools-ui

Dokumentation

• Agenten-Überblick - KI-Agenten erstellen
• Agent SDK - Programmgesteuerte Agentensteuerung
• Human-in-the-Loop - Genehmigungsabläufe
• Agenten, die UI generieren - Generative Benutzeroberflächen erstellen
• Agent UX-Muster - Best Practices

Komponentendokumentation: ui.inference.sh/blocks/agent