תמיד חלמתם לראות את Chrome Devtools MCP בגרסת ה CLI? אם כן ורסל התנדבו לסגור את הפער ופיתחו כלי שליטה בדפדפן משורת הפקודה בקוד פתוח, זהו Vercel Agent Browser. מתקינים כאן:

https://agent-browser.dev

1. למה

כלי שורת פקודה מספקים שני יתרונות על MCP:

1. חסכון בטוקנים כי אני לא צריך לשלוח לסוכן את רשימת הכלים בכל בקשה או להתקין אותם בסוכן הקידוד. מספיק להתקין את הסקיל ולשכוח מזה, או אפילו לצרף לפרומפט איזה "use agent browser CLI"

2. חסכון בטוקנים אם הסוכן יצירתי כי אז הוא יכול לשלב מספר פעולות לתוך סקריפט שורת פקודה, למשל במקום לחפש אלמנט על העמוד באמצעות קבלת snapshot של כל האלמנטים וחיפוש בה הסוכן יוכל להעביר את הפלט של ה snapshot ל grep וכך כל הטוקנים של העמוד אפילו לא נכנסים לחלון הקונטקסט.

במקרה של agent browser אנחנו מקבלים עוד מספר יתרונות:

1. מחשבה על הסוכן ולא על הדפדפן - היכולות ששולבו ב agent browser הן תוצאה של מחשבה על תהליך העבודה של פיתוח באמצעות סוכן ולא בהכרח של הכפתורים בכלי הפיתוח בדפדפן. כך יש כלי diff שמראה את ההבדל בין שני snapshots של העמוד, או אפשרות לקבל snapshot רק של האלמנטים האינטרקטיביים בעמוד, או קבלת הפלט.

2. אפשרות חיבור לדפדפנים אחרים לדוגמה יש להם חיבור לסימולטור של ios או מנוע בשם lightpanda

3. חיבור מובנה למקור הדף כך ש agent-browser יכול להציג לסוכן את מקור הקומפוננטות על העמוד וכך הרבה יותר קל לנהל פיתוח ריאקט ולראות את התוצאה.

2. איך

הכי קל בעולם - מתקינים מהאתר שלהם עם:

npm install -g agent-browser

3. דוגמה

אחרי התקנה אני מפעיל:

ynonp@ynons-MacBook-Air ~/tmp $ agent-browser open  http://localhost:5173

✓ frontend
  http://localhost:5173/
ynonp@ynons-MacBook-Air ~/tmp $ agent-browser snapshot
- generic [ref=e1] clickable [onclick]
  - generic
    - generic
      - image "React logo"
      - image "Vite logo"
    - heading "Get started" [level=1, ref=e2]
    - paragraph
      - StaticText "Edit "
      - code
        - StaticText "src/App.tsx"
      - StaticText " and save to test "
      - code
        - StaticText "HMR"
    - button "Count is 0" [ref=e3]
      - StaticText "Count is 0"
  - generic
    - generic
      - heading "Documentation" [level=2, ref=e4]
      - paragraph
        - StaticText "Your questions, answered"
      - list
        - listitem [level=1]
          - link "Explore Vite" [ref=e6]
            - StaticText "Explore Vite"
        - listitem [level=1]
          - link "Learn more" [ref=e7]
            - StaticText "Learn more"
    - generic
      - heading "Connect with us" [level=2, ref=e5]
      - paragraph
        - StaticText "Join the Vite community"
      - list
        - listitem [level=1]
          - link "GitHub" [ref=e8]
            - StaticText "GitHub"
        - listitem [level=1]
          - link "Discord" [ref=e9]
            - StaticText "Discord"
        - listitem [level=1]
          - link "X.com" [ref=e10]
            - StaticText "X.com"
        - listitem [level=1]
          - link "Bluesky" [ref=e11]
            - StaticText "Bluesky"

אפשר גם להפעיל:

agent-browser dashboard start

ואז אתם מקבלים תצוגה גרפית של כל ה Sessions הפעילים עם ממש צילומי מסך מכל טאב של הדפדפן.

4. שורה תחתונה

סך הכל אהבתי את הכלי הוא עובד מהר ונראה שהושקעה מחשבה ביצירת Workflows יעילים לסוכנים. בינתיים אני לא עובד איתו מספיק זמן בשביל להגיד אם התוצאה טובה יותר או פחות מ Devtools MCP אבל חייב להודות שאני אוהב את המעבר שהתעשייה עושה מכלי MCP לכלי CLI - זה גם כיף לסוכנים וגם כיף למשתמשים שיכולים בקלות להפעיל משורת הפקודה את אותן פקודות שהסוכן מפעיל ולראות את התוצאות.