agent-ui
78React 에이전트 인터페이스 구축
팀은 스트리밍, 승인, 도구 표시를 다시 구축하지 않고도 에이전트 채팅 인터페이스가 필요합니다. 이 스킬은 React 및 Next.js에서 inference.sh Agent 컴포넌트를 설정하는 방법을 안내합니다.
에이전트 앱에 도구 수명 주기 UI 추가
에이전트 애플리케이션에는 명확한 도구 상태, 승인 및 결과 표시가 필요합니다. 이 스킬은 이러한 워크플로를 위한 React 및 Next.js 컴포넌트 가이드를 제공합니다.
이 요청을 에이전트에 복사하세요. 공식 Skill 페이지와 매니페스트가 포함되어 있습니다.
Review the Skillstore skill "tools-ui" from https://skillstore.io/skills/inference-sh-9-tools-ui.md and its manifest at https://skillstore.io/api/skills/inference-sh-9-tools-ui/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.에이전트는 계속해서 계획을 표시하고 보안 정책에서 요구하는 확인을 요청해야 합니다.
AI 에이전트, 크롤러, 스크립트가 전체 페이지 대신 정리된 컨텍스트만 필요할 때 이 링크를 사용하세요.
"tools-ui" 사용 중입니다. 사용자가 실행 중인 웹 검색 도구를 표시해 달라고 요청합니다.
예상 결과:
검색 아이콘, 도구 이름, 표시되는 인수 및 실행 중 상태 표시기가 포함된 간결한 도구 카드가 나타납니다.
"tools-ui" 사용 중입니다. 사용자가 이메일 도구 호출을 보내기 전에 승인을 추가해 달라고 요청합니다.
예상 결과:
인터페이스에 이메일 도구 이름, 수신자 및 제목 세부 정보와 함께 승인 및 거부 작업이 표시됩니다.
"tools-ui" 사용 중입니다. 사용자가 에이전트 대화 기록에 성공한 도구 결과를 표시해 달라고 요청합니다.
예상 결과:
결과 영역에 완료된 도구 이름, 성공 상태 및 반환된 데이터의 읽기 쉬운 요약이 표시됩니다.
Most static findings are markdown fences, inline code formatting, or documentation links, not executable code. The real issues are unpinned npx install instructions, a remote shadcn registry URL, and a remotely hosted image asset.
이 스킬에 대해 예상될 수 있는 실제 로컬 기능이므로 검토가 필요하지만, 확인된 악의적 동작으로는 집계되지 않습니다.
버전이 지정된 평가 보고서, 중립 배지, 임베드 카드 및 인용을 공유하세요. Skillstore는 근거를 보고하지만 이 Skill의 안전 여부를 판단하지 않습니다.
https://skillstore.io/skills/inference-sh-9-tools-ui/audits/6?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/inference-sh-9-tools-ui?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/inference-sh-9-tools-ui?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/inference-sh-9-tools-ui/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/inference-sh-9-tools-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). tools-ui security audit report (audit version 6) [Author version unspecified]. Skillstore. https://skillstore.io/skills/inference-sh-9-tools-ui/audits/6@techreport{inference-sh-9-inference-sh-9-tools-ui-2026,
author = {inference-sh-9},
title = {tools-ui security audit report (audit version 6)},
institution = {Skillstore},
year = {2026},
number = {6},
url = {https://skillstore.io/skills/inference-sh-9-tools-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: "tools-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-tools-ui/audits/6"
identifiers:
- type: other
value: "skillstore:inference-sh-9-tools-ui:audit:6"
description: "Skillstore immutable audit report identifier"
각 작성자의 스킬은 별도의 설치 항목으로 유지됩니다. 추천 변형은 Skillstore 근거로 순위가 정해집니다.
이 변형이 1위인 이유
inference-sh-9-tools-ui
2026-09-09
React 인터페이스에서 에이전트 도구 호출의 대기, 실행 중, 성공 및 오류 상태를 표시합니다.
에이전트 애플리케이션에서 민감한 도구가 실행되기 전에 승인 및 거부 컨트롤을 추가합니다.
운영자와 최종 사용자를 위해 구조화된 도구 출력을 일관된 인터페이스로 렌더링합니다.
내 React 또는 Next.js 프로젝트에 도구 UI 컴포넌트를 추가하세요. 파일을 변경하기 전에 모든 설치 단계를 설명하세요.
도구 UI 컴포넌트를 사용하여 내 에이전트 도구 호출의 대기, 실행 중, 성공 및 오류 상태를 표시하세요.
도구 인수를 표시하고 내 승인 또는 거부 핸들러를 호출하는 도구 승인 뷰를 빌드하세요.
Agent 컴포넌트를 내 도구 목록에 연결하고 민감한 것으로 표시된 도구에만 승인 게이트를 표시하세요.
작성자
inference-sh-9라이선스
MIT
Skillstore 리비전
r1
버전 안내
작성자가 버전을 선언하지 않았습니다.
참조
0519034dad657fb1f7706e0550e962beeda73fdf
유지보수 최신성
2026. 7. 20.
사용량
3 다운로드 · 146 조회
파일 구조
📄 SKILL.md
React 에이전트 인터페이스 구축
팀은 스트리밍, 승인, 도구 표시를 다시 구축하지 않고도 에이전트 채팅 인터페이스가 필요합니다. 이 스킬은 React 및 Next.js에서 inference.sh Agent 컴포넌트를 설정하는 방법을 안내합니다.
React에서 JSON 위젯 렌더링
에이전트 출력에는 일반 텍스트 대신 대화형 UI가 필요한 경우가 많습니다. 이 스킬은 구조화된 위젯 정의를 React 및 Next.js 컴포넌트로 렌더링하는 방법을 보여줍니다.
React 채팅 인터페이스 구축
팀에는 최신 React 앱에 어울리는 채팅 인터페이스가 필요합니다. 이 스킬은 메시지, 입력, 아바타, 스트리밍 상태를 위한 shadcn 스타일 컴포넌트와 패턴을 제공합니다.
텍스트, 이미지, 비디오용 AI 프롬프트 개선
프롬프트가 모호하거나 구조가 좋지 않으면 AI 결과가 자주 실패합니다. 이 스킬은 LLM, 이미지, 비디오 프롬프트에 재사용 가능한 패턴을 제공합니다.
구조화된 티어다운으로 경쟁사 분석하기
경쟁 조사 자료는 메모, 스크린샷, 가격 페이지, 리뷰 사이트 전반에 흩어지기 쉽습니다. 이 스킬은 명확한 전략적 의사결정을 위해 반복 가능한 티어다운 프레임워크, 비교 템플릿, 조사 워크플로를 제공합니다.
관리형 샌드박스에서 Python 코드 실행
Python 작업에는 종종 라이브러리와 격리된 실행이 필요합니다. 이 스킬은 데이터, 미디어, 스크래핑, 자동화를 위한 도구와 함께 inference.sh를 통해 Python을 실행합니다.
시니어 가이드와 함께 풀스택 앱 빌드
작성자 alirezarezvani
풀스택 프로젝트에는 일관된 설정, 아키텍처 선택, 품질 검사가 필요한 경우가 많습니다. 이 스킬은 React, Next.js, Node.js, GraphQL, PostgreSQL 작업을 위한 스크립트와 참고 자료를 제공합니다.
React View Transitions 구현
작성자 vercel-labs
React view transitions는 배치 위치를 잘못 잡기 쉬워, 조용히 발생하거나 시끄러운 애니메이션을 유발할 수 있습니다. 이 스킬은 라우트, Suspense, 목록, 공유 요소 애니메이션 선택을 안내합니다.
프로덕션에 바로 적용할 수 있는 프런트엔드 기능 구축
작성자 davila7
프런트엔드 팀은 여러 프로젝트에서 일관된 React 및 Next.js 지침이 필요합니다. 이 스킬은 프런트엔드 분석을 위한 참조 워크플로, 품질 관리 사례, 보조 스크립트를 제공합니다.
Next.js 성능 최적화
작성자 Atman36
Next.js 애플리케이션은 큰 번들, 약한 캐싱, 최적화되지 않은 미디어로 인해 느려질 수 있습니다. 이 스킬은 Claude, Codex, Claude Code가 프로덕션 앱을 대상으로 집중적인 성능 개선을 진행하도록 안내합니다.
React 및 Next.js 성능 최적화
작성자 vercel-labs
React 및 Next.js 앱은 워터폴, 큰 번들, 피할 수 있는 재렌더링으로 인해 속도가 저하되는 경우가 많습니다. 이 스킬은 에이전트에게 성능 중심 변경을 더 안전하게 수행하기 위한 구체적인 규칙을 제공합니다.
웹 앱 현지화 자동화
작성자 DNYoussef
다국어 지원을 추가하면 문자열, 라우팅, 메타데이터, locale 파일이 코드베이스 전체에 흩어지는 경우가 많습니다. 이 스킬은 번역, 검증, 문서화를 포함한 i18n 설정을 계획하고 구현합니다.