وقد تحسن البروتوكول النموذجي (MCP) بشكل كبير طريقة تعاون المساعدات الذكية مع الأدوات الخارجية، مما يتيح تطبيقات أكثر قوة ومتنوعة. ومع ذلك، هناك قيود هامة داخل تنفيذ MCP القياسي: دعوات الأدوات هي في الأساس عمليات "القمصان الأسود" مع عدم وجود رابط للمستخدم المدمج للتفاعل. هذا يخلق إزعاج في تجربة المستخدم، وخاصة في الحالات التي تكون الردود المرئية أو الدخول المستخدم مفيدة خلال عملية إجراء الأدوات. في هذه المقالة، سأبحث عن نهج مبتكر قد تطورنا في لتغلب هذه القيود من خلال إنشاء رابط مبني على المتصفح للتواصلات MCP ، والتي تركز بشكل خاص على إنتاج مكونات UI مع التكامل 21st.dev لدينا. 21th MCP السحرية مشكلة: التفاعل المحدود للمستخدمين في MCP يوفر نموذج الاتصال بروتوكول مساعدات الذكاء الاصطناعي لإدخال أدوات خارجية لتنفيذ المهام المتخصصة، على الرغم من قدرته على تطبيق القياس، إلا أن تطبيق القياس لديه فوائد كبيرة: هذه القيود مشكلة بشكل خاص عند إنتاج مكونات UI. عندما يوصي AI بمكونات UI ، غالبا ما يحتاج المستخدمون إلى: See various design options Compare different implementations Customize details before integration Make informed choices based on visual representation لا توفر نهج MCP القياسي ميكانيكًا متكاملًا لهذا النوع من الترجمة التفاعلية. الحل: الاتصالات MCP المستندة إلى المتصفح لمناقشة هذه الحد الأدنى، لقد تم تطوير نظام يتيح التواصل مع MCPs من خلال رابط متصفح. يخلق MCP المحلي الذي يمكن أن يضم مجموعة وتفتح متصفح ويب يستخدم مجموعة محددة محددة بجانب MCP في NPM يفتح تلقائيًا المتصفح الذي يتم إعادة توجيهه إلى رابط المستخدم يسمح للمستخدمين بالتفاعل مع واختيار من بين الخيارات المتاحة إغلاق المورد واستئناف التشغيل مع اختيار المستخدم النتيجة هي التكامل غير المباشر الذي يحافظ على قوة MCP مع زيادة القدرة على الاستجابة المرئية والتفاعل المطلوبة من المستخدمين. تنفيذ تقني دعونا نرى كيف يتم تنفيذ ذلك. Callback Server في الأساس من الحلول لدينا هو خادم الاتصال الذي يسهل الاتصال بين MCP ومتصفح المتصفح: export class CallbackServer { private server: Server | null = null; private port: number; private sessionId = Math.random().toString(36).substring(7); // ... other properties async promptUser( config: CallbackServerConfig = {} ): Promise<CallbackResponse> { const { initialData = null, timeout = 300000 } = config; this.config = config; try { const availablePort = await this.findAvailablePort(); this.server = createServer(this.handleRequest); this.server.listen(availablePort, "127.0.0.1"); // Set up promise to handle user selection return new Promise<CallbackResponse>((resolve, reject) => { this.promiseResolve = resolve; this.promiseReject = reject; // ... server setup code // Open browser with unique session ID const url = `http://127.0.0.1:${availablePort}?id=${this.sessionId}`; open(url).catch((error) => { console.warn("Failed to open browser:", error); resolve({ data: { browserOpenFailed: true } }); this.shutdown(); }); }); } catch (error) { await this.shutdown(); throw error; } } } هذه الخدمة: العثور بشكل ديناميكي على محطة متاحة Creates a unique session ID for each request خدمة UI bundle فتح المتصفح لإظهار الخيارات يحصل على اختيار المستخدم من خلال مكالمة يلغي الهدية مع البيانات المختارة Integration with MCP tool لقد استخدمنا هذا النهج لتعزيز أداة 21st_magic_component_builder، والتي تنتج مكونات UI: export class CreateUiTool extends BaseTool { name = UI_TOOL_NAME; description = UI_TOOL_DESCRIPTION; // ... schema definition async execute({ message, searchQuery, absolutePathToCurrentFile, context, }: z.infer<typeof this.schema>): Promise<{ content: Array<{ type: "text"; text: string }>; }> { try { // Fetch UI component variations from API const response = await twentyFirstClient.post<{ data1: { text: string }; data2: { text: string }; data3: { text: string }; }>("/api/create-ui-variation", { message, searchQuery, fileContent: await getContentOfFile(absolutePathToCurrentFile), context, }); // Handle billing or error cases if (response.status !== 200) { open("https://21st.dev/settings/billing"); return { content: [ { type: "text" as const, text: response.data.text as string, }, ], }; } // Create server and prompt user through browser const server = new CallbackServer(); const { data } = await server.promptUser({ initialData: { data1: response.data.data1, data2: response.data.data2, data3: response.data.data3, }, }); // Process user selection and return formatted response const componentData = data || { text: "No component data received. Please try again.", }; // Return formatted response to user // ... } catch (error) { console.error("Error executing tool", error); throw error; } } } تجربة المستخدم Flow إليك كيف تنقل تجربة المستخدم عند طلب عنصر UI: استدعاء الأداة: يستدعي المساعد AI أداة 21st_magic_component_builder عندما يطلب المستخدم عنصر UI جديد. طلب API: يرسله الأداة طلبًا إلى 21st.dev API لإنتاج تعديلات مكونات UI متعددة اعتمادًا على الرسالة والموضوعية للمستخدم. إطلاق المتصفح: يبدأ خادم محلي ويفتح نافذة المتصفح تلقائياً ، مما يظهر خيارات جزء UI التي تم إنشاؤها. التفاعل مع المستخدم: يستطيع المستخدم مشاهدة وتفاعلها وتحديد تغيرات المكونات المفضلة لديه. إرسال الاختيار: عندما يقوم المستخدم بتحديد الاختيار، يقوم المستعرض بإرسال الاختيار إلى خادم الاتصال. إعادة التشغيل: يغلق المورد ويستمر التشغيل مع البيانات المكونة المختارة. إرشادات التكامل: يستقبل المساعد AI المكون المختار ويقدم إرشادات حول دمجها في قاعدة الكود المستخدم. هذا النهج يخلق تجربة عميقة تتيح للمستخدمين اتخاذ القرارات المعترف بها حول مكونات UI مع الحفاظ على تدفق عمل MCP الكامل. التحديات الأمنية والخصوصية لدينا تنفيذ العديد من التدابير الأمنية: المحمول المحلي: كل الاتصال يحدث على المستوى المحلي على جهاز المستخدم (127.0.0.1) IDات الجلسة الفريدة: كل جلسة المتصفح لديها ID فريدة من نوعها لمنع التلاعب في الجلسة المباشرة ميكانيكا إزالة الوقت: يتم إزالة الجلسات تلقائياً بعد فترة معيّنة (مفتوحة 5 دقائق) أمن البوابة: يبحث المورد بشكل ديناميكي على البوابة المتاحة لتجنب الصراع. النتيجة إن النهج القائم على المتصفح لتواصل MCP يشكل تحسينًا كبيرًا في تجربة المستخدم عند العمل مع أدوات تستفيد من التفاعل المرئي.على سبيل المثال، من خلال تجميع الفجوة بين القدرات القوية من MCP وخصائصه التفاعلية للاتصال بالإنترنت، قد نجحنا في إنشاء تدفق عمل أكثر إثارة للجدل للمستخدمين.هذا النهج يعتبر قيمة خاصة بالنسبة لإنتاج أجزاء UI، حيث يكون التمثيل المرئي أمرًا حيويًا لإنهاء اتخاذ القرارات المعروفة. الكود هو متاح على . Github
