Skills agent-ui
📦

agent-ui

Content revision r1 Medium Risk ⚙️ External commands🌐 Network access🔑 Env variables

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.

Supports: Claude Codex Code(CC)
📊 69 Adequate

Install with my Agent

Copy this request to your Agent. It includes the canonical Skill page and manifest.

Agent request
Review the Skillstore skill "agent-ui" from https://skillstore.io/skills/inferen-sh-agent-ui.md and its manifest at https://skillstore.io/api/skills/inferen-sh-agent-ui/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.

Your Agent should still show its plan and request any confirmation required by the security policy.

Agent-readable resources

Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.

Markdown detail GET /skills/inferen-sh-agent-ui.md Signed manifest GET /api/skills/inferen-sh-agent-ui/manifest Signed lockfile GET /api/skills/inferen-sh-agent-ui/lockfile

Test it

Using "agent-ui". I need an agent chat panel for a React admin dashboard.

Expected outcome:

  • A setup plan with component installation steps.
  • A proxy route checklist for server-side API access.
  • A short list of props to configure streaming, files, images, and the agent name.

Using "agent-ui". I want the assistant to help users complete a support form.

Expected outcome:

  • A scoped tool plan that limits access to one form reference.
  • A human approval point before fields are changed.
  • A warning to block sensitive fields unless explicitly allowed.

Using "agent-ui". I need a launch checklist for an agent copilot.

Expected outcome:

  • Review remote component files before installation.
  • Keep API keys only on the server side.
  • Test tool progress, approval states, uploads, and error handling.

Security Audit

Medium Risk
v4 • 7/5/2026 Open versioned report

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.

1
Files scanned
121
Lines analyzed
3
Review items
0
False positives ignored

Confirmed security concerns (1)

Medium
SKILL.md:71-85
Agent-Driven Form Modification Requires Guardrails
The skill demonstrates client-side tools that let an agent scan a user interface and fill form fields. This is a legitimate feature, but it can alter user data or sensitive forms unless the host app scopes tools and requires approval.
The documented TSX example configures scoped client tools and a prompt that allows form filling. The security impact depends on host app controls, so confidence is high for the capability and moderate for exploitability.
Capability review items (3)

These are real local capabilities that may be expected for this skill, so they require review but are not counted as confirmed malicious behavior.

Medium
SKILL.md:14-20
Ruby/shell backtick execution
```bash
The bash setup block tells users or agents to run npx and npm install commands that fetch external packages and a remote component registry. This is legitimate setup guidance, but executing it introduces external code installation risk.
Medium
SKILL.md:100-109
Ruby/shell backtick execution
```bash
The related skills block instructs users to run npx skills add commands for additional remote skills. The commands appear intended, but they still install external content through a command-line tool.
Low
SKILL.md:16
Hardcoded URL
npx shadcn@latest add https://ui.inference.sh/r/agent.json
The URL is used inside an npx shadcn add command, so following the documentation fetches component content from a remote registry. This is expected for the skill, but it is a real external dependency point.

Risk Factors

⚙️ External commands (16)
SKILL.md:14-20 SKILL.md:20-26 SKILL.md:26-30 SKILL.md:30-34 SKILL.md:34-37 SKILL.md:37-41 SKILL.md:41-56 SKILL.md:56-71 SKILL.md:71-86 SKILL.md:86-92 SKILL.md:92-93 SKILL.md:93-94 SKILL.md:94-95 SKILL.md:95-96 SKILL.md:96-100 SKILL.md:100-109
🌐 Network access (9)
SKILL.md:8 SKILL.md:10 SKILL.md:16 SKILL.md:113 SKILL.md:114 SKILL.md:115 SKILL.md:116 SKILL.md:117 SKILL.md:119
🔑 Env variables (1)
SKILL.md:36
Audited by: codex View Audit History →
Share & cite this report

Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.

Open versioned report
Security Assessment

Copy report link

https://skillstore.io/skills/inferen-sh-agent-ui/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Markdown badge

[![Skillstore security assessment](https://skillstore.io/badges/skills/inferen-sh-agent-ui/security.svg)](https://skillstore.io/skills/inferen-sh-agent-ui?utm_source=security_passport_badge)

HTML badge

<a href="https://skillstore.io/skills/inferen-sh-agent-ui?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/inferen-sh-agent-ui/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Embed card

<iframe src="https://skillstore.io/embed/skills/inferen-sh-agent-ui.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>
Academic citations (APA · BibTeX · CFF)

APA citation

inferen-sh. (2026). agent-ui security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/inferen-sh-agent-ui/audits/4

BibTeX citation

@techreport{inferen-sh-inferen-sh-agent-ui-2026, author = {inferen-sh}, title = {agent-ui security audit report (audit version 4)}, institution = {Skillstore}, year = {2026}, number = {4}, url = {https://skillstore.io/skills/inferen-sh-agent-ui/audits/4}, note = {Author version unspecified} }

CITATION.cff

cff-version: 1.2.0 message: "If you use this Skill, cite its author and this versioned security audit report." title: "agent-ui security audit report (audit version 4)" version: "unspecified" type: report authors: - name: "inferen-sh" date-released: "2026-07-05" url: "https://skillstore.io/skills/inferen-sh-agent-ui/audits/4" identifiers: - type: other value: "skillstore:inferen-sh-agent-ui:audit:4" description: "Skillstore immutable audit report identifier"

Compare variants

3 installable variants

Each author remains a separate installable skill. The recommended variant is ranked by Skillstore evidence.

Why this variant is first

Higher Skillstore usage
inference-sh-9 Recommended

inference-sh-9-agent-ui

Skillstore Score 78
Evidence Confidence High
Skillstore usage 14
Updated

2026-08-21

inference-sh

inference-sh-agent-ui

Skillstore Score 78
Evidence Confidence High
Skillstore usage 12
Updated

2026-08-21

inferen-sh Current

inferen-sh-agent-ui

Skillstore Score 69
Evidence Confidence High
Skillstore usage 6
Updated

2026-08-21

Skillstore Score

Why this score Evidence Confidence: High
55
Architecture
85
Maintainability
87
Content
69
Community
83
Spec Compliance

What You Can Build

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.

Try These Prompts

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.

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.

Avoid

  • 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.

Frequently Asked Questions

What does this skill help me build?
It helps you add an agent interface to React and Next.js applications using a shadcn-style component.
Does it include backend logic?
It shows a Next.js proxy route that delegates to the Inference SDK. Your app still owns deployment and access control.
Does it require an API key?
Yes. The documented setup uses an Inference API key that should stay in server-side environment variables.
Can the agent use tools?
Yes. The guide shows scoped client-side tools and describes tool progress, approval states, and results.
Is file upload supported?
The component props include options for file and image uploads. Enable them only when your app needs them.
What should I review before installing?
Review the remote registry output, package additions, proxy route, API key handling, and any client-side tool permissions.

Developer Details

Author

inferen-sh

License

MIT

Skillstore revision

r1

Version notice

The author did not declare a version.

Repository

https://github.com/inferen-sh/skills/tree/main/ui/agent-ui/

Ref

30c73eac2afe762f6aa9c4553158769369d47351

Maintenance freshness

7/18/2026

Usage

2 downloads · 157 views

File structure

📄 SKILL.md