Agent Ui

Batteries-included agent component for React/Next.js from ui.inference.sh. One component with runtime, tools, streaming, approvals, and widgets built in. Cap...

Security Scan

The skill is internally consistent with being a drop-in React/Next.js agent UI, but the runtime instructions request an API key and remote installs that are not declared in the registry metadata — review sources and the INFERENCE_API_KEY usage before installing.

Purpose & Capability

Name/description match the instructions: this is a UI component for React/Next.js that uses an API proxy and an SDK. Declared runtime steps (npx shadcn template, install @inferencesh/sdk, add a Next.js proxy route) are coherent with building an agent UI.

Instruction Scope

SKILL.md instructs running npx to fetch a remote agent.json and npm install of @inferencesh/sdk and shows adding an .env.local INFERENCE_API_KEY and a Next.js proxy route. The instructions do not request unrelated system files or broad data exfiltration, but they do instruct pulling third-party code at install time and storing an API key in .env.local.

Install Mechanism

This is an instruction-only skill (no install spec). The install steps use npx shadcn@latest add https://ui.inference.sh/r/agent.json and npm install @inferencesh/sdk — pulling code from inference.sh and npm is expected for this purpose, but those are network operations that will fetch code into your project (review the fetched JSON/package before running).

Credentials

Registry metadata lists no required env vars, but SKILL.md explicitly instructs adding INFERENCE_API_KEY in .env.local. This mismatch reduces transparency. Also the example agent_config references an external model (openrouter/claude-haiku-45), which could require a different service key; the SKILL.md does not clearly state which credential(s) are required or their scope.

Persistence & Privilege

Skill does not request always:true, does not declare special config paths, and is user-invocable. It does not ask to modify other skills or system-wide settings.

Assessment

This appears to be a legitimate UI component for building agent interfaces, but check a few things before installing: (1) Verify the source URLs and npm package (@inferencesh/sdk) on the public registries (npm, the inference.sh domain) to ensure they are the expected projects. (2) Inspect the agent.json that npx will fetch (and any code it adds) before running it in your app. (3) The SKILL.md requires INFERENCE_API_KEY but the registry metadata doesn't declare it — confirm which API key is needed (inference.sh vs OpenRouter) and limit its scope. (4) Store API keys safely (use env or secrets manager) and rotate them if you later suspect misuse. (5) If you have security concerns, run the add/install steps in an isolated environment or review the fetched files in a code review before merging into a production codebase.

Agent Component

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

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

• Agents Overview - Building AI agents
• Agent SDK - Programmatic agent control
• Human-in-the-Loop - Approval flows
• Agents That Generate UI - Building generative UIs
• Agent UX Patterns - Best practices

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