Créer des interfaces d’agents React
Les équipes ont besoin d’interfaces de chat agentique sans reconstruire le streaming, les approbations et l’affichage des outils. Cette skill guide la configuration du composant Agent d’inference.sh dans React et Next.js.
Copiez cette demande dans votre Agent. Elle contient la page Skill de référence et le manifeste.
Review the Skillstore skill "agent-ui" from https://skillstore.io/skills/inference-sh-9-agent-ui.md and its manifest at https://skillstore.io/api/skills/inference-sh-9-agent-ui/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Votre Agent doit toujours présenter son plan et demander toute confirmation exigée par la politique de sécurité.
Utilisez ces liens lorsqu’un Agent IA, un crawler ou un script a besoin d’un contexte propre au lieu de lire toute la page.
Utilisation de « agent-ui ». Ajoute le composant à un nouveau tableau de bord Next.js.
Résultat attendu:
Utilisation de « agent-ui ». Planifie un agent capable de remplir un formulaire après approbation.
Résultat attendu:
Une conception d’outil qui analyse les champs du formulaire, demande une confirmation, valide les entrées et signale l’achèvement sans masquer le contrôle utilisateur.
Utilisation de « agent-ui ». Examiner la sécurité avant le lancement.
Résultat attendu:
Une checklist couvrant la confiance dans les packages distants, le stockage des variables d’environnement, les autorisations de téléversement, la configuration du modèle et la gestion des approbations.
The skill is mostly documentation for installing and using a React and Next.js agent component. Most static shell, environment, and URL detections are markdown examples or normal documentation links. Confirmed risks are remote install commands and a hosted image that depend on external infrastructure.
Il s’agit de capacités locales réelles qui peuvent être attendues pour cette compétence ; elles nécessitent donc un examen, mais ne sont pas comptabilisées comme comportement malveillant confirmé.
Partagez le rapport d’évaluation versionné, le badge neutre, la carte intégrable et les citations. Skillstore présente les preuves sans décider si ce Skill est sûr.
https://skillstore.io/skills/inference-sh-9-agent-ui/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/inference-sh-9-agent-ui?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/inference-sh-9-agent-ui?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/inference-sh-9-agent-ui/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/inference-sh-9-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>inference-sh-9. (2026). agent-ui security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/inference-sh-9-agent-ui/audits/6@techreport{inference-sh-9-inference-sh-9-agent-ui-2026,
author = {inference-sh-9},
title = {agent-ui security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/inference-sh-9-agent-ui/audits/6},
note = {Author version unspecified}
}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 6)"
version: "unspecified"
type: report
authors:
- name: "inference-sh-9"
date-released: "2026-07-09"
url: "https://skillstore.io/skills/inference-sh-9-agent-ui/audits/6"
identifiers:
- type: other
value: "skillstore:inference-sh-9-agent-ui:audit:6"
description: "Skillstore immutable audit report identifier"
Chaque auteur reste un skill installable distinct. La variante recommandée est classée selon les preuves Skillstore.
Pourquoi cette variante est première
inference-sh-9-agent-ui
2026-09-09
inference-sh-agent-ui
2026-09-09
inferen-sh-agent-ui
2026-09-09
Un développeur frontend peut ajouter une interface d’agent prête à l’emploi à une page Next.js avec des options de streaming et de fichiers.
Une équipe produit peut tester des workflows d’assistant avec des approbations, des widgets et des outils côté client avant une implémentation personnalisée.
Un ingénieur plateforme IA peut documenter le routage proxy, la configuration de la clé API et la configuration du composant pour les équipes internes.
Aide-moi à ajouter le composant d’interface utilisateur d’agent à une application Next.js. Explique les étapes d’installation, la route proxy et la variable d’environnement requise.
Planifie une configuration d’agent pour un assistant de support SaaS. Inclus le choix du modèle, les objectifs du prompt système et un comportement d’approbation sûr.
Conçois des outils côté navigateur pour remplir un formulaire client avec approbation humaine. Décris la gestion de l’état, la validation et la confirmation utilisateur.
Audite mon intégration prévue de l’interface utilisateur d’agent pour la sécurité et l’expérience utilisateur. Vérifie les installations distantes, la gestion des clés API, les téléversements de fichiers et les flux d’approbation.
Auteur
inference-sh-9Licence
MIT
Révision Skillstore
r1
Avis de version
L’auteur n’a déclaré aucune version.
Réf
0519034dad657fb1f7706e0550e962beeda73fdf
Récence de maintenance
21/07/2026
Utilisation
6 téléchargements · 104 vues
Structure de fichiers
📄 SKILL.md
Ajouter une interface utilisateur du cycle de vie des outils aux applications d'agents
Les applications d'agents ont besoin d'affichages clairs pour le statut, l'approbation et les résultats des outils. Cette skill fournit des conseils sur les composants React et Next.js pour ces flux de travail.
Rendre des widgets JSON dans React
La sortie d’un agent a souvent besoin d’une UI interactive plutôt que de texte brut. Cette skill montre comment rendre des définitions de widgets structurées sous forme de composants React et Next.js.
Créer des interfaces de chat React
Les équipes ont besoin d’interfaces de chat qui correspondent aux applications React modernes. Cette compétence fournit des composants et des modèles de style shadcn pour les messages, les champs de saisie, les avatars et les états de streaming.
Améliorer les prompts d’IA pour le texte, les images et la vidéo
Les résultats de l’IA échouent souvent lorsque les prompts sont vagues ou mal structurés. Cette compétence fournit des modèles réutilisables pour les prompts LLM, d’image et de vidéo.
Analyser les concurrents avec des audits structurés
La recherche concurrentielle se retrouve souvent dispersée entre notes, captures d’écran, pages de tarification et sites d’avis. Cette compétence fournit des cadres d’audit reproductibles, des modèles de comparaison et des workflows de recherche pour prendre des décisions stratégiques claires.
Exécuter du code Python dans un bac à sable géré
Les tâches Python nécessitent souvent des bibliothèques et une exécution isolée. Cette skill exécute Python via inference.sh avec des outils pour les données, les médias, le scraping et l’automatisation.
Créer des applications fullstack avec un accompagnement senior
par alirezarezvani
Les projets fullstack nécessitent souvent une configuration cohérente, des choix d’architecture et des contrôles qualité. Cette compétence fournit des scripts et des références pour le travail avec React, Next.js, Node.js, GraphQL et PostgreSQL.
Implémenter les transitions de vue React
par vercel-labs
Les transitions de vue React sont faciles à mal placer, ce qui entraîne des animations silencieuses ou gênantes. Cette skill guide les choix d’animations de routes, de Suspense, de listes et d’éléments partagés.
Créer des fonctionnalités frontend prêtes pour la production
par davila7
Les équipes frontend ont besoin de recommandations cohérentes sur React et Next.js dans l'ensemble de leurs projets. Cette compétence fournit des workflows de référence, des pratiques de qualité et des scripts utilitaires pour l'analyse frontend.
Optimiser les performances Next.js
par Atman36
Les applications Next.js peuvent devenir lentes à cause de bundles volumineux, d’une mise en cache insuffisante et de médias non optimisés. Cette compétence guide Claude, Codex et Claude Code dans des améliorations de performance ciblées pour les applications de production.
Optimiser les performances de React et Next.js
par vercel-labs
Les applications React et Next.js perdent souvent en vitesse à cause de waterfalls, de bundles volumineux et de re-renders évitables. Cette skill donne aux agents des règles concrètes pour des changements plus sûrs axés sur les performances.
Automatiser la localisation d'applications web
par DNYoussef
L'ajout d'une prise en charge multilingue disperse souvent les chaînes, le routage, les métadonnées et les fichiers de locale dans tout le codebase. Cette skill planifie et met en œuvre la configuration i18n avec traductions, validation et documentation.