sinai.blog
חזרה
·3 min read

MCP Apps: איך בניתי את הבלוג הזה כאפליקציה בתוך Claude

AIMCPClaudeפיתוח

מאיפה אתם קוראים את הבלוג?

אם אתם קוראים את הפוסט הזה דרך Claude - אתם כבר רואים את מה שאני הולך לדבר עליו. הבלוג הזה עכשיו זמין ישירות מתוך השיחה. אפשר לקרוא פוסטים, לעשות לייק, לנווט בין תכנים - בלי לפתוח דפדפן.

ואם אתם קוראים את זה באתר? תחברו את Claude לבלוג ותבדקו בעצמכם.

מה בעצם קרה?

לפני כמה ימים Anthropic הכריזו על MCP Apps. בגדול, זו הרחבה לפרוטוקול MCP שמאפשרת להציג ממשקים אינטראקטיביים בתוך השיחה עם Claude.

עד עכשיו, Tools ב-MCP יכלו רק להחזיר טקסט או נתונים. עכשיו? הם יכולים להחזיר HTML שלם שאפשר ללחוץ עליו, למלא טפסים, ולהפעיל Tools נוספים.

אם AppStore ו-Google Play הם החנויות של אפליקציות לטלפונים, אז MCP Apps הופך את Claude לפלטפורמה שמריצה אפליקציות בתוך השיחה. וזה פותח עולם שלם של אפשרויות.

שני דברים חדשים שכדאי להכיר

App Tools

App Tools זה Tools שמחזירים ממשק משתמש במקום טקסט רגיל. כש-Claude קורא ל-Tool כזה, הוא מקבל גם את התוכן וגם מטא-דאטה שמפנה לממשק ויזואלי.

בבלוג שלי, ה-Tool שנקרא read_post מחזיר את תוכן הפוסט. אבל במקום markdown יבש, Claude מציג ממשק קריאה מעוצב עם כותרת, תאריך, תוכן הפוסט וכפתור לייק.

Interactive Tools

Interactive Tools זה הקסם האמיתי. הם מאפשרים לממשק להפעיל Tools אחרים בחזרה.

בבלוג, זה עובד ככה:

  1. הממשק מציג כפתור "לייק"
  2. לוחצים עליו
  3. הממשק קורא ל-Tool שנקרא like_post
  4. ה-Tool מעדכן את מספר הלייקים ב-database
  5. הממשק מציג את המספר המעודכן

הכל קורה בזמן אמת, בלי לצאת מהשיחה.

הארכיטקטורה

הבלוג רץ על Next.js, ו-MCP Server יושב כ-API route שמחכה לבקשות מ-Claude:

Flow:

  1. Claude Desktop שולח בקשה ל-MCP Server שיושב ב-sinai.blog/api/mcp
  2. MCP Server מנתב את הבקשה לאחד משלושת ה-Tools
  3. read_post מחזיר את תוכן הפוסט עם הפניה לממשק ויזואלי (App Tool)
  4. הממשק מוצג בתוך Claude - עם כפתור לייק
  5. לחיצה על לייק מפעילה את like_post ישירות מהממשק (Interactive Tool)
  6. הלייקים נשמרים ב-Vercel KV

ה-Tools

list_posts - Tool רגיל שמחזיר רשימת כל הפוסטים עם כותרת, תאריך וסיכום.

read_post - App Tool שמחזיר את תוכן הפוסט עם ממשק קריאה אינטראקטיבי.

like_post - Interactive Tool שמוסיף לייק לפוסט ומחזיר את המספר המעודכן.

איך להוסיף MCP App

זה עובד בדיוק כמו כל MCP אחר. ב-Claude Desktop:

  1. לכו ל-Connectors
  2. לחצו על Add Connector
  3. שימו את ה-URL: https://sinai.blog/api/mcp/mcp
  4. וזהו

אפשר לראות את זה גם בסרטון למעלה.

אחרי שמוסיפים, פשוט תבקשו מ-Claude "הראה לי את הפוסטים מהבלוג של סיני".

השורה התחתונה

אם AppStore הביא לנו אפליקציות לטלפון, MCP Apps מביא אפליקציות ל-AI. במקום להוריד אפליקציה ולפתוח אותה, פשוט מדברים עם Claude והוא מציג ממשק אינטראקטיבי בזמן אמת.

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

Dashboards, טפסים, כלי עריכה, ממשקי ניהול - כל מה שאפשר לבנות ב-HTML יכול עכשיו לחיות בתוך שיחה עם AI. Claude הופך מ-chatbot לפלטפורמה.

נ.ב.

אם יש לכם רעיונות לשימושים נוספים ב-MCP Apps, או שאתם רוצים לבנות משהו דומה ויש שאלות - שלחו לי הודעה. ואם אתם קוראים את זה דרך Claude, תלחצו על הלייק ותראו את הקסם בפעולה.