يمكن لمساعدك الذكاء الاصطناعي الآن أن تظهر لك الخيارات قبل اتخاذ القرارات - بفضل هكذا متصفح ذكي

وقد تحسن البروتوكول النموذجي (MCP) بشكل كبير طريقة تعاون المساعدات الذكية مع الأدوات الخارجية، مما يتيح تطبيقات أكثر قوة ومتنوعة. ومع ذلك، هناك قيود هامة داخل تنفيذ MCP القياسي: دعوات الأدوات هي في الأساس عمليات "القمصان الأسود" مع عدم وجود رابط للمستخدم المدمج للتفاعل. هذا يخلق إزعاج في تجربة المستخدم، وخاصة في الحالات التي تكون الردود المرئية أو الدخول المستخدم مفيدة خلال عملية إجراء الأدوات.

في هذه المقالة، سأبحث عن نهج مبتكر قد تطورنا في21th MCP السحريةلتغلب هذه القيود من خلال إنشاء رابط مبني على المتصفح للتواصلات MCP ، والتي تركز بشكل خاص على إنتاج مكونات UI مع التكامل 21st.dev لدينا.

مشكلة: التفاعل المحدود للمستخدمين في MCP

يوفر نموذج الاتصال بروتوكول مساعدات الذكاء الاصطناعي لإدخال أدوات خارجية لتنفيذ المهام المتخصصة، على الرغم من قدرته على تطبيق القياس، إلا أن تطبيق القياس لديه فوائد كبيرة:

هذه القيود مشكلة بشكل خاص عند إنتاج مكونات UI. عندما يوصي AI بمكونات UI ، غالبا ما يحتاج المستخدمون إلى:

1. See various design options

2. Compare different implementations

3. Customize details before integration

4. Make informed choices based on visual representation

   
   

لا توفر نهج MCP القياسي ميكانيكًا متكاملًا لهذا النوع من الترجمة التفاعلية.

الحل: الاتصالات MCP المستندة إلى المتصفح

لمناقشة هذه الحد الأدنى، لقد تم تطوير نظام يتيح التواصل مع MCPs من خلال رابط متصفح.

1. يخلق MCP المحلي الذي يمكن أن يضم مجموعة وتفتح متصفح ويب
2. يستخدم مجموعة محددة محددة بجانب MCP في NPM
3. يفتح تلقائيًا المتصفح الذي يتم إعادة توجيهه إلى رابط المستخدم
4. يسمح للمستخدمين بالتفاعل مع واختيار من بين الخيارات المتاحة
5. إغلاق المورد واستئناف التشغيل مع اختيار المستخدم

النتيجة هي التكامل غير المباشر الذي يحافظ على قوة 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;
    }
  }
}

هذه الخدمة:

1. العثور بشكل ديناميكي على محطة متاحة
2. Creates a unique session ID for each request
3. خدمة UI bundle
4. فتح المتصفح لإظهار الخيارات
5. يحصل على اختيار المستخدم من خلال مكالمة
6. يلغي الهدية مع البيانات المختارة

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:

1. استدعاء الأداة: يستدعي المساعد AI أداة 21st_magic_component_builder عندما يطلب المستخدم عنصر UI جديد.
2. طلب API: يرسله الأداة طلبًا إلى 21st.dev API لإنتاج تعديلات مكونات UI متعددة اعتمادًا على الرسالة والموضوعية للمستخدم.
3. إطلاق المتصفح: يبدأ خادم محلي ويفتح نافذة المتصفح تلقائياً ، مما يظهر خيارات جزء UI التي تم إنشاؤها.
4. التفاعل مع المستخدم: يستطيع المستخدم مشاهدة وتفاعلها وتحديد تغيرات المكونات المفضلة لديه.
5. إرسال الاختيار: عندما يقوم المستخدم بتحديد الاختيار، يقوم المستعرض بإرسال الاختيار إلى خادم الاتصال.
6. إعادة التشغيل: يغلق المورد ويستمر التشغيل مع البيانات المكونة المختارة.
7. إرشادات التكامل: يستقبل المساعد AI المكون المختار ويقدم إرشادات حول دمجها في قاعدة الكود المستخدم.

هذا النهج يخلق تجربة عميقة تتيح للمستخدمين اتخاذ القرارات المعترف بها حول مكونات UI مع الحفاظ على تدفق عمل MCP الكامل.

التحديات الأمنية والخصوصية

لدينا تنفيذ العديد من التدابير الأمنية:

1. المحمول المحلي: كل الاتصال يحدث على المستوى المحلي على جهاز المستخدم (127.0.0.1)
2. IDات الجلسة الفريدة: كل جلسة المتصفح لديها ID فريدة من نوعها لمنع التلاعب في الجلسة المباشرة
3. ميكانيكا إزالة الوقت: يتم إزالة الجلسات تلقائياً بعد فترة معيّنة (مفتوحة 5 دقائق)
4. أمن البوابة: يبحث المورد بشكل ديناميكي على البوابة المتاحة لتجنب الصراع.

النتيجة

إن النهج القائم على المتصفح لتواصل MCP يشكل تحسينًا كبيرًا في تجربة المستخدم عند العمل مع أدوات تستفيد من التفاعل المرئي.على سبيل المثال، من خلال تجميع الفجوة بين القدرات القوية من MCP وخصائصه التفاعلية للاتصال بالإنترنت، قد نجحنا في إنشاء تدفق عمل أكثر إثارة للجدل للمستخدمين.هذا النهج يعتبر قيمة خاصة بالنسبة لإنتاج أجزاء UI، حيث يكون التمثيل المرئي أمرًا حيويًا لإنهاء اتخاذ القرارات المعروفة.

الكود هو متاح علىGithub.