חברת CyberAgent, חברת IT מובילה ביפן, מספקת מגוון רחב של שירותים אונליין, כולל פלטפורמת הבלוגים הפופולרית Ameba. הצוות התמודד עם אתגר משמעותי: שגיאות בזמן ריצה שהיה קשה לזהות באמצעות בדיקות אוטומטיות, ולכן נדרשה התערבות ידנית שגוזלת זמן.
במסמך הזה נסביר איך חברת CyberAgent השתמשה בשרת של פרוטוקול הקשר של מודל כלי הפיתוח ל-Chrome (MCP) כדי לעבור מתהליך ידני לתהליך עבודה אוטומטי, וכך לחסוך זמן למפתחים ולשפר את המהימנות של תהליך הבדיקה שלהם.
האתגר: תהליך עבודה ידני ומוגבל
מערכת העיצוב של Ameba, Spindle, היא אוסף של רכיבי ממשק משתמש לשימוש חוזר שמשמשים לבניית הממשק של פלטפורמת הבלוגים. הוא מסתמך על Storybook לפיתוח ולבדיקה של רכיבי ממשק משתמש.
בעבר, תהליך העבודה של CyberAgent לטיפול בשגיאות בזמן ריצה היה מחזורי, ידני וחוזר על עצמו. מפתח יבדוק כל רכיב בדפדפן, יחיל תיקון ואז יבדוק אותו שוב. בגלל המספר הגדול של דפים ורכיבים, ההסתמכות הזו על אימות ויזואלי הייתה מוגבלת, והקשתה על איתור כל באג.
הפתרון: ניפוי באגים של סוכן באמצעות כלי MCP של כלי הפיתוח ל-Chrome
כדי להתמודד עם האתגר הזה, הצוות השתמש בשרת MCP של כלי הפיתוח ל-Chrome. אחרי הגדרה פשוטה באמצעות מדריך ההצטרפות הרשמי, הם הצליחו לתת מיד לסוכן AI (Claude) הוראה לבצע אוטומציה של כל תהליך העבודה של ניפוי הבאגים.
באמצעות הנחיה אחת, הסוכן יכול לבצע אינטראקציה עם כלי הפיתוח על ידי עיבוד מידע על מצב הדפדפן שנלכד על ידי Chrome DevTools MCP, לגשת להקשר של מערכת הקבצים ולקרוא את יומני המסוף. לאחר מכן, הוא זיהה שגיאות באופן אוטונומי ויישם תיקונים ללא התערבות ידנית.
ההנחיה הראשונית שבה הם השתמשו הייתה:
Currently, spindle-ui's Storybook is running, but runtime errors may be occurring.
Please use chrome-dev-tools-mcp to confirm the operation of the Story in the following steps:
Identify all target Stories. Confirm each and every one, no matter how many there are.
Confirm that the Story is displayed correctly using dev-tools-mcp.
Fix all errors.
Click and move through each Story from the top in the browser opened with mcp to confirm.
סוכן ה-AI המשיך לבדוק את מופע Storybook, ועבר בין סיפורים שלמים כדי לקרוא שגיאות, להחיל תיקוני קוד ולוודא שכל תיקון הצליח.
ההשפעה: ממעבר מבדיקות ידניות לתיקונים אוטומטיים
התוצאות היו מהירות. תוך שעה בערך, סוכן ה-AI בדק באופן אוטונומי את כל 32 הרכיבים ו-236 הסיפורים במערכת העיצוב של Spindle.
הסוכן זיהה ותיקן שגיאת זמן ריצה אחת ושתי אזהרות, אבל הערך האמיתי של הניסוי היה בהבטחה של השלילה: אישור שרוב הספרייה הייתה ללא שגיאות, בלי שנדרש ממפתח ללחוץ באופן ידני על מאות מצבים.
בעבר, ביקורת מקיפה מהסוג הזה הייתה מתישה מבחינה ויזואלית ומועדת לטעויות אנוש. העברת העבודה הזו אל MCP בכלי הפיתוח ל-Chrome אפשרה ל-CyberAgent להשיג את התוצאות הבאות:
- כיסוי של 100% בבדיקה: הסוכן אימת באופן מכני כל סיפור, כדי לוודא שרכיבים 'נקיים' היו באמת נקיים. רמת ההקפדה הזו קשה לשמירה באופן ידני.
- אפס תוצאות שליליות שגויות: בניגוד לחבילות בדיקה אוטומטיות שעלולות לפספס אנומליות חזותיות בזמן ריצה, שרת ה-MCP אפשר לסוכן לאמת את המצב בפועל של הדפדפן, וכך להבטיח מהימנות גבוהה.
- העברת עומס קוגניטיבי: מפתחים יכולים לסמוך על המערכת שתטפל ב "עבודה השחורה" החוזרת על עצמה, וכך להתמקד בלוגיקה מורכבת במקום בבדיקות שגרתיות.
כפי שציין מפתח האינטרנט קוטה ינאגי, היתרון היה השינוי באחריות:
"היה לי מאוד נוח להעביר את הבדיקות של שגיאות זמן ריצה ואזהרות, שבדרך כלל הייתי מבצע באופן ידני בדפדפן. אהבתי גם שאני יכול לתאר עכשיו פעולות מורכבות בשפה טבעית, והכלי קורא את יומני השגיאות ופותר את הבעיה בלי שאצטרך להתערב".
ההצלחה של תהליך העבודה האוטומטי הזה הובילה את CyberAgent לעדכן את המדריך הפנימי שלה ל-Spindle Agents עבור סוכני ה-AI שלה. במדריך הזה, Claude, סוכן ה-AI שלהם, מוגדר כשרת ברירת המחדל לניפוי באגים ב-Chrome DevTools MCP. כך הם מראים שהם בוטחים בתהליך החדש הזה שמבוסס על AI, וממליצים להשתמש בו כשיטה מומלצת.
התיקונים הקונקרטיים יושמו בשתי בקשות משיכה, שאפשר לעיין בהן ב-GitHub:
CyberAgent שיפרה עוד יותר את ההנחיה ופרסמה את התוצאה הסופית הזו.
משוב ותוכניות עתידיות
חברת CyberAgent הייתה מרוצה מהגמישות וממספר האפשרויות שזמינות ב-MCP בכלי הפיתוח ל-Chrome. הם גם סיפקו משוב חשוב לשיפורים עתידיים, וציינו שהכלי אמנם עוצמתי, אבל השימוש בתכונות המתקדמות שלו דורש רמת ידע מסוימת מצד המשתמש.
בעתיד, הצוות מתכוון לשלב את התכונה הזו בצורה עמוקה יותר עם החלונית 'ביצועים' בכלי הפיתוח. הם מדמיינים תהליך עבודה שבו סוכן יכול לאמת את מדדי הליבה לבדיקת חוויית המשתמש באתר, ואז להמשיך לניתוח ביצועים מעמיק יותר באמצעות חלונית הביצועים כדי לנתח ולהציע שיפורים.
קאזונארי הארה, מומחה לפיתוח ב-CyberAgent, שיתף את התדהמה שלו והדגיש את היעילות של הכלי ואת הפוטנציאל שלו ליישומים עתידיים:
"הייתי מופתע כשראיתי שהדפדפן מתקן שגיאות באופן אוטומטי ישירות מהיומנים. משימות שבעבר לא בוצעו או שביצוען ארך זמן רב, יכולות עכשיו להתבצע באופן אוטומטי בצורה מהימנה, וכך לשפר את יעילות הפיתוח. מכיוון שכלי הפיתוח ל-Chrome MCP מציע כל כך הרבה תכונות בסביבת זמן ריצה אמיתית, אני צופה שהוא יהיה שימושי במצבים שונים רבים בעתיד".
סיכום
שילוב של Chrome DevTools MCP בתהליך העבודה אפשר ל-CyberAgent לבצע אוטומציה של משימת ניפוי באגים מורכבת שגוזלת זמן רב. הניסיון שלהם מדגים את הפוטנציאל העצום של כלים מבוססי-AI לשיפור הפרודוקטיביות של מפתחים.
התהליך עבר אוטומציה מלאה, כך שלא היה צורך בבדיקות ידניות ולא היו שגיאות שלא זוהו. ההטמעה הנוכחית כבר הוכיחה את הערך שלה, אבל המשוב מ-CyberAgent מצביע על עתיד מבטיח שבו כלי ה-MCP של כלי הפיתוח ל-Chrome יוכל לאפשר להם ניתוח ביצועים מתוחכם יותר ומשימות אופטימיזציה ישירות בדפדפן.