# Build Agent UIs for React and Next.js

React teams need agent interfaces that handle streaming, tools, approvals, and rich responses without custom infrastructure. This skill shows how to add a ready agent component, proxy route, and scoped tool patterns.

## Install

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

## Metadata

- Status: approved
- Slug: inferen-sh-agent-ui
- Skillstore revision: r1
- Version status: missing
- Tree hash: 3996ea2ff8321f5d5239ba31563358fa097df5a5cc5d247a87868a7e9504db45
- Author: inferen-sh
- GitHub username: inferen-sh
- License: MIT
- Repository: https://github.com/inferen-sh/skills/tree/main/ui/agent-ui/
- Ref: 30c73eac2afe762f6aa9c4553158769369d47351
- 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: 69
- Public page: https://skillstore.pages.dev/skills/inferen-sh-agent-ui
- Manifest: https://skillstore.pages.dev/api/skills/inferen-sh-agent-ui/manifest

## Capabilities

- Installs a shadcn-based Agent component into React and Next.js projects.
- Shows a Next.js proxy route using the Inference SDK.
- Documents streaming responses, tool lifecycle states, approvals, and widgets.
- Demonstrates scoped browser tools for scanning forms and filling fields.
- Lists component props for proxy URLs, agent configuration, file uploads, and image uploads.

## Use Cases

- Add a SaaS Copilot: Embed an agent interface that streams answers, asks for approvals, and displays tool progress inside a product dashboard.
- Prototype Agent Workflows: Test how a guided assistant can complete forms, present widgets, and request human confirmation before actions.
- Standardize Agent UI Patterns: Use a shared component pattern for proxy routing, model configuration, uploads, tools, and approval states.

## Prompt Templates

### Install the Component

```
Show me how to add the agent UI component to a new Next.js app. Include the required package and registry steps.
```

### Configure the Proxy

```
Help me create the Inference proxy route for a Next.js app and explain where the API key should live.
```

### Add Browser Tools

```
Design a scoped client-side tool setup that lets the agent inspect one form and suggest field values with user approval.
```

### Review an Agent Workflow

```
Review my planned agent UI workflow for unsafe tool access, upload handling, proxy exposure, and approval gaps.
```

## Limitations

- The skill file does not include the full component source.
- Setup depends on external packages and a remote shadcn registry URL.
- A server-side Inference API key and proxy route are required.
- Client-side tools need application-specific permission checks.

## Best Practices

- Review remote registry output and package changes before merging installation commands.
- Keep API keys in server-side environment variables and route all provider calls through the proxy.
- Scope client-side tools narrowly and require user approval before changing form data.

## Anti Patterns

- Running remote npx commands in a production branch without reviewing generated files.
- Passing API keys or provider credentials into browser components.
- Giving agent tools broad access to forms, files, uploads, or page state without controls.

## Security Audit

- Audited at: 2026-07-05T15:23:57.179\+00:00
- Summary: Most static findings are false positives caused by markdown code fences, inline prop names, documentation links, and placeholder environment variable examples. Two command examples and one remote registry URL are confirmed as medium or low risk because they direct users to execute external package or skill installation commands. A semantic review also found a medium-risk workflow concern around agent-driven form filling with client-side tools.

## Stats

- Views: 157
- Downloads: 6
- Favorites: 0
- Popularity score: 0