skilld
All skills
inference-shell avatar

/agent-ui

@b576e8e
by inference-shellinference-shell/skills757 stars
104

Batteries-included agent component for React/Next.js from ui.inference.sh. One component with runtime, tools, streaming, approvals, and widgets built in. Capabilities: drop-in agent, human-in-the-loop, client-side tools, form filling. Use for: building AI chat interfaces, agentic UIs, SaaS copilots, assistants. Triggers: agent component, agent ui, chat agent, shadcn agent, react agent, agentic ui, ai assistant ui, copilot ui, inference ui, human in the loop

Ask your Agent

Use this Skill: https://skilld.dev/gh/inference-shell/skills/agent-ui

This session only. Nothing lands on disk.

SKILL.md

≈118 tokens always: the name and description. ≈773 when used: this file.

Install the belt CLI skill: npx skills add belt-sh/cli

Agent Component

Batteries-included agent component from ui.inference.sh.

Agent Component

Quick Start

# Install the agent component
npx shadcn@latest add https://ui.inference.sh/r/agent.json

# Add the SDK for the proxy route
npm install @inferencesh/sdk

Setup

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. Environment Variable

# .env.local
INFERENCE_API_KEY=inf_...

3. Use the Component

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: 'a helpful ai assistant',
        system_prompt: 'you are helpful.',
      }}
    />
  )
}

Features

Feature Description
Runtime included No backend logic needed
Tool lifecycle Pending, progress, approval, results
Human-in-the-loop Built-in approval flows
Widgets Declarative JSON UI from agent responses
Streaming Real-time token streaming
Client-side tools Tools that run in the browser

Client-Side Tools Example

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: 'You can fill forms using scan_ui and fill_field tools.',
  }}
/>

Props

Prop Type Description
proxyUrl string API proxy endpoint
name string Agent name (optional)
config AgentConfig Agent configuration
allowFiles boolean Enable file uploads
allowImages boolean Enable image uploads

Related Skills

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

# Declarative widgets from JSON
npx skills add inference-sh/skills@widgets-ui

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

Documentation

Component docs: ui.inference.sh/blocks/agent

Source: SKILL.md on GitHub

Third-party checks

2 warnings16d5 checks · Risk SAFE
  • Gen Agent Trust Hub16d

    The skill provides a drop-in React/Next.js agent component that utilizes vendor-owned packages and infrastructure. It presents a potential surface for indirect prompt injection due to processing untrusted data alongside tool capabilities.

  • Socket16d

    1 alert: gptAnomaly

  • Snyk16d

    Risk: MEDIUM · 1 issue

  • Runlayer6mo

    1/1 file flagged

  • ZeroLeaks5mo

    Score: 93/100 · 2 sections analyzed

Provenance

Signed by skilld at b576e8e. This ties the file your Agent reads to that commit on GitHub. It does not review the instructions.

Last checked against GitHub last week.

Activeupdated 5 months ago

Topics

  • React
  • Next.js
  • agent
  • chat
  • streaming
  • human-in-the-loop
  • shadcn
  • tools
  • ui-component
  • inference

README badge

README badge for inference-shell/skills/agent-ui

What it does

Drop-in React component with built-in agent runtime, tool lifecycle management, streaming, and human-in-the-loop approvals from ui.inference.sh. Handles chat interfaces, form filling, and client-side tool execution without requiring separate backend agent logic.

Generated from the current SKILL.md.

Frequently asked

Does this work with Next.js?
Yes. The skill includes a Next.js API proxy route handler and is designed for Next.js projects. The setup uses app/api/inference/proxy/route.ts to forward requests.
What models does this support?
The skill works with any model available through OpenRouter or your configured inference provider. The example uses Claude Haiku, but you can specify any model ref in the agentConfig.
Can I run tools on the client side?
Yes. The skill includes client-side tool support for operations like form scanning and field filling that execute in the browser without a backend.
Does this include human-in-the-loop approval flows?
Yes. Built-in approval flows are part of the tool lifecycle, allowing users to review and approve agent actions before execution.
Do I need to build a custom backend?
No. The runtime is included in the component. You only need to set up the Next.js proxy route and provide an Inference API key.

Generated from the current SKILL.md. These answers refresh after source changes.