# Build React Agent Interfaces

Agent interfaces require streaming chat, tool states, approvals, and runtime wiring. This skill helps add a React or Next.js agent component with proxy setup, scoped tools, and UI patterns.

## Install

```bash
npx skillstore add inference-sh/agent-ui
```

## Metadata

- Status: approved
- Slug: inference-sh-agent-ui
- Skillstore revision: r1
- Version status: missing
- Tree hash: 5014977b8da0567e4b513162ccab8be310499ed8e76c95be7e5c1e62a63facc5
- Author: inference-sh
- GitHub username: inference-sh
- License: MIT
- Repository: https://github.com/inference-sh/skills/tree/main/skills/agent-ui/
- Ref: 0519034dad657fb1f7706e0550e962beeda73fdf
- Supported tools: Claude, Codex, Claude Code
- Audit status: complete
- Agent install advisory: allowed
- Manual install advisory: allowed
- Artifact signature: available
- Audit attestation: unavailable
- Human verification: not\_verified
- Risk factors: external\_commands, network, env\_access
- Quality score: 78
- Quality tier: bronze
- Public page: https://skillstore.pages.dev/skills/inference-sh-agent-ui
- Manifest: https://skillstore.pages.dev/api/skills/inference-sh-agent-ui/manifest

## Capabilities

- Shows how to install the agent block with shadcn and the inference.sh registry URL.
- Defines a Next.js proxy route using the inference.sh SDK.
- Documents the INFERENCE\_API\_KEY environment variable needed for the proxy.
- Demonstrates Agent usage with proxy URL, model reference, description, and system prompt settings.
- Shows scoped browser tools for form scanning and field filling.
- Links to agent, SDK, human review, and generative UI documentation.

## Use Cases

- Launch a SaaS Copilot: Add a streaming assistant interface with tool progress and approval states inside a product dashboard.
- Prototype Agent Workflows: Create a working agent page that connects a proxy route, model configuration, and runtime UI.
- Design Form Automation: Plan browser tools that scan form fields, request user approval, and fill values through the agent interface.

## Prompt Templates

### Add an Agent Screen

```
Use the agent-ui skill to add a basic Next.js agent page with a proxy route and environment variable checklist.
```

### Configure Human Review

```
Use agent-ui to design an agent interface with approval states for tool actions and clear user controls.
```

### Connect Scoped Browser Tools

```
Use agent-ui to plan a form-filling assistant that can scan fields, request approval, and update values safely.
```

### Audit Production Readiness

```
Use agent-ui to review my existing agent UI plan for proxy security, API key handling, uploads, and streaming failures.
```

## Limitations

- It is documentation only; it does not include the actual component source.
- It depends on inference.sh services, SDK packages, and remote registry availability.
- Users must manage API keys and proxy route security in their own application.
- The examples target React and Next.js, not other frontend frameworks.

## Best Practices

- Keep API keys only in server-side environment files and never expose them to browser code.
- Use explicit approval states before tools change user data or submit forms.
- Review remote component changes before installing them into a production repository.

## Anti Patterns

- Do not place API keys in client components or public environment variables.
- Do not enable file or image uploads without size, type, and retention rules.
- Do not let browser tools update forms without visible user approval.

## Security Audit

- Audited at: 2026-07-09T12:36:39.591\+00:00
- Summary: Most static findings are false positives caused by Markdown code fences, inline property names, and documentation links. One low-severity supply-chain concern remains because the quick start asks users to fetch a component from a remote registry URL. No prompt injection, secret exfiltration, or malicious intent was found in SKILL.md.

## Stats

- Views: 158
- Downloads: 12
- Favorites: 0
- Popularity score: 0