Page Agent — Embed an in-page natural-language GUI copilot in web apps

الفكرة في دقيقة

ابدأ بالمعنى، ثم انتقل إلى التفاصيل.

هذا الدرس يشرح Page Agent — Embed an in-page natural-language GUI copilot in web apps ضمن موضوع بدء استخدام Hermes بصورة صحيحة. ستعرف ما الذي يفعله هذا الجزء، متى تحتاجه، وما أصغر خطوة آمنة للتأكد أنه يعمل.

إن كنت مبتدئًا

إن كنت جديدًا: لا تحفظ الأسماء. ركّز على ثلاثة أسئلة: ما المشكلة التي يحلها هذا الجزء؟ ما البيانات أو الصلاحيات التي يحتاجها؟ وكيف أعرف أن النتيجة صحيحة؟

للتطبيق العملي

للتطبيق: اقرأ المثال الأول، حدّد ما سيغيّره، نفّذه على بيانات تجريبية، ثم قارن الناتج بما وعد به المصدر.

للمتخصص

للمتخصص: راجع Skill metadata، Reference: full SKILL.md، When to use this skill، ثم افحص حالات الفشل والتوافق مع إصدارك.

ما الذي تحتاجه قبل البدء؟

لا تحتاج خبرة سابقة؛ اتبع الخطوات على جهاز تجريبي أولًا.

ماذا ستعرف؟

نتيجة واضحة قبل أن تقرأ.

تفهم Page Agent — Embed an in-page natural-language GUI copilot in web apps من دون افتراض معرفة سابقة.
تفرّق بين الوصف والمعلومة التي تحتاج إلى اختبار في بيئتك.
اقرأ الأمر الأول وحدد المدخلات والمخرجات قبل نسخه.

مصطلحات هذا الدرس

تعريفات قصيرة قبل التفاصيل.

Skill: حزمة تعليمات تعلّم Hermes طريقة عمل متكررة من دون إضافة خدمة خارجية بالضرورة.

وصف الصفحة الرسمي

Embed an in-page natural-language GUI copilot in web apps

خريطة الموضوع

ما الذي يقوله المصدر، وبأي ترتيب؟

01
Skill metadata
ابدأ بهذا القسم لتفهم الفكرة أو البنية الأساسية.
02
Reference: full SKILL.md
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
03
When to use this skill
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
04
When NOT to use this skill
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
05
Prerequisites
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
06
Path 1 — 30-second demo via CDN (no install)
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
07
Path 2 — npm install into your own web app (production use)
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
08
Path 3 — clone the source repo (contributing, or hacking on it)
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
09
Repo layout (Path 3)
اقرأه بعد الأساسيات، ثم اربطه بالخطوة السابقة قبل المتابعة.
10
Verifying it works
اختم بهذا القسم لتفحص النتيجة والحالات الخاصة.

أمثلة من الصفحة الرسمية

انسخ بعد أن تفهم الأثر.

A panel appears. Type an instruction. Done.

Bookmarklet form (drop into bookmarks bar, click on any page):

## Path 2 — npm install into your own web app (production use)

Inside an existing web project (React / Vue / Svelte / plain):

Wire it up with your own LLM endpoint — **never ship the demo CDN to real users**:

تطبيق الآن

اقرأ الأمر الأول وحدد المدخلات والمخرجات قبل نسخه.

طابق أي أمر مع إصدار Hermes المثبّت، وراجع الملفات والحسابات التي قد يصل إليها، واستخدم بيانات غير حساسة في أول اختبار. إذا اختلف الشرح عن المصدر، فالمصدر الرسمي هو المرجع النهائي.

اختبار الفهم

ثلاثة قرارات قبل علامة الاكتمال.

1. ما المرجع النهائي عند تغيّر معلومات «شرح Page Agent — Embed an in-page natural-language GUI copilot in web apps»؟منشور غير مؤرخالتوثيق الرسمي ومستودع Hermesنتيجة بحث بلا مصدر

2. ما أفضل طريقة لتطبيق هذا الدرس؟نسخ كل أمر مباشرةتنفيذ خطوة صغيرة ثم التحقق من نتيجتهامنح كل الصلاحيات لتوفير الوقت

3. ماذا تفعل قبل خطوة قد تعدّل ملفات أو حسابًا خارجيًا؟تراجع النطاق والصلاحيات ومسار التراجعتلغي العزلتشارك المفتاح في المحادثة