技能 tools-ui
📦

tools-ui

安全

عرض استدعاءات أدوات وكيل الذكاء الاصطناعي مع تدفقات الموافقة

يتطلب بناء وكلاء ذكاء اصطناعي يستدعون أدوات واجهة مستخدم واضحة للتعليقات. توفر مكونات React هذه واجهات جاهزة لعرض حالات دورة حياة الأدوات من المعلقة إلى النتائج.

支持: Claude Codex Code(CC)
🥉 72 青铜
1

下载技能 ZIP

2

在 Claude 中上传

前往 设置 → 功能 → 技能 → 上传技能

3

开启并开始使用

测试它

正在使用“tools-ui”。 عرض استدعاء أداة لقراءة ملف

预期结果:

تعرض البطاقة 'read_file' مع أيقونة ملف، وتظهر وسيط المسار '/src/index.ts'، وتتضمن علامة تحميل زرقاء تدل على أن الأداة قيد التشغيل.

正在使用“tools-ui”。 طلب الموافقة لإرسال بريد إلكتروني

预期结果:

يعرض مربع حوار الموافقة 'send_email' مع أيقونة بريد، ويعرض المستلم والموضوع، ويقدم أزرار الموافقة الخضراء والرفض الحمراء لتأكيد المستخدم.

安全审计

安全
v1 • 3/21/2026

Static analyzer flagged 40 patterns that are all false positives. External command detections are Markdown code blocks (bash, tsx) in documentation, not executable shell code. Network URL detections are legitimate documentation references to ui.inference.sh component library. Cryptographic warnings match plain text in descriptions, not actual crypto implementations. This skill is documentation-only for React UI components with no security risks.

1
已扫描文件
172
分析行数
0
发现项
1
审计总数
未发现安全问题
审计者: claude

质量评分

38
架构
100
可维护性
87
内容
42
社区
100
安全
83
规范符合性

你能构建什么

عرض أدوات الوكيل

إظهار للمستخدمين الأدوات التي يستدعيها وكيل الذكاء الاصطناعي الخاص بهم في الوقت الفعلي مع مؤشرات الحالة وتصور النتائج.

واجهة سير عمل الموافقة

تنفيذ تدفقات الحلقة البشرية في المنتصف حيث يجب على المستخدمين الموافقة على استدعاءات الأدوات الحساسة مثل إرسال رسائل البريد الإلكتروني أو حذف الملفات قبل التنفيذ.

مراقبة أداة MCP

عرض استدعاءات أداة بروتوكول سياق النموذج مع حالات التقدم لتصحيح الأخطاء والشفافية في تطبيقات الذكاء الاصطناعي.

试试这些提示

إضافة عرض أساسي لاستدعاء الأداة 
إضافة مكون React يعرض عند استدعاء Claude Code لأداة، مع إظهار اسم الأداة والوسائط في بطاقة مزينة بعلامة تحميل دائرية.
إنشاء مربع حوار الموافقة 
إنشاء مكون مربع حوار للموافقة على استدعاءات الأدوات الخطيرة يعرض اسم الأداة والوسائط مع أزرار الموافقة والرفض مع تنسيق مناسب.
بناء عرض نتائج الأداة 
بناء مكون يعرض نتائج تنفيذ الأداة مع مؤشرات حالة ملونة للحالات الناجحة والخطأ، بما في ذلك تفاصيل النتائج القابلة للطي.
مكون دورة حياة الأداة الكاملة 
إنشاء مكون عرض كامل لدورة حياة الأداة يعرض تلقائياً الواجهة المناسبة بناءً على حالة الأداة: معلقة، قيد التشغيل، تتطلب موافقة، ناجحة مع النتائج، أو خطأ مع رسالة.

最佳实践

  • إظهار وسائط الأداة للمستخدمين دائماً للشفافية قبل وأثناء التنفيذ
  • طلب موافقة صريحة للأدوات التي تعدل البيانات أو ترسل اتصالات خارجية
  • استخدام ترميز ألوان متسق: الأزرق للتشغيل، الأخضر للنجاح، الأحمر للأخطاء، الأصفر للموافقة المطلوبة

避免

  • إخفاء تنفيذ الأدوات عن المستخدمين يقلل الثقة والشفافية في سلوك وكيل الذكاء الاصطناعي
  • تخطي خطوات الموافقة للعمليات الحساسة قد يؤدي إلى عواقب غير مقصودة
  • إظهار المخرجات الخام للأدوات بدون تنسيق قد يكشف بيانات حساسة أو يطغى على المستخدمين

常见问题

ما هي منصات الذكاء الاصطناعي التي تدعمها هذه المكونات؟
تعمل المكونات مع أي وكيل ذكاء اصطناعي يستدعي أدوات، بما في ذلك Claude Code و Codex والوكلاء المخصصين الذين يستخدمون بروتوكول سياق النموذج.
هل أحتاج إلى خلفية لاستخدام هذه المكونات؟
نعم، هذه مكونات واجهة مستخدم فقط. أنت بحاجة إلى بيئة تشغيل وكيل خلفية لتنفيذ الأدوات فعلياً. تعرض المكونات حالات دورة الحياة التي يتم تمريرها من الوكيل الخاص بك.
كيف أقوم بتثبيت هذه المكونات؟
استخدم واجهة سطر الأوامر shadcn: npx shadcn@latest add https://ui.inference.sh/r/tools.json لإضافة جميع مكونات واجهة الأداة إلى مشروعك.
هل يمكنني تخصيص مظهر بطاقات الأدوات؟
نعم، تقبل جميع المكونات خصائص className القياسية للتصميم المخصص وتستخدم فئات Tailwind CSS افتراضياً.
كيف يعمل تدفق الموافقة؟
عندما تكون الأداة تحتوي على requiresApproval معين كـ true، اعرض مكون ToolApproval مع ردود الاتصال onApprove و onDeny. استدعِ ردود الاتصال هذه بناءً على تفاعل المستخدم لمتابعة أو إلغاء تنفيذ الأداة.
ماذا يحدث إذا لم يتطابق اسم الأداة مع أي نمط أيقونة؟
الأدوات ذات الأسماء غير المعترف بها تعرض أيقونة扳手 افتراضية. يمكنك توسيع منطق تعيين الأيقونات للتعامل مع أنماط أسماء الأدوات المخصصة.

开发者详情

作者

inferen-sh

许可证

MIT

仓库

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

引用

main

文件结构

📄 SKILL.md