آپ کے AI مددگار اب آپ کو فیصلہ کرنے سے پہلے اختیارات دکھا سکتے ہیں - ایک ذہین براؤزر ہیک کا شکریہ

ماڈل کالنگ پروٹوکول (MCP) نے غیر ملکی آلات کے ساتھ AI مددگار کے ساتھ بات چیت کے طریقے کو اہم طور پر بہتر بنایا ہے، زیادہ طاقتور اور وسیع پیمانے پر ایپلی کیشنز کی اجازت دیتا ہے. تاہم، معیاری MCP انضمام کے اندر ایک اہم حد موجود ہے: آلے کالز بنیادی طور پر "بک باکس" آپریشن ہیں جس میں انضمام کے لئے کوئی داخلہ صارف انٹرفیس نہیں ہے.

اس مضمون میں، میں ایک جدید نقطہ نظر کا تجربہ کروں گا جو ہم نے تیار کیا ہے21ویں جادو MCPMCP مواصلات کے لئے ایک براؤزر پر مبنی انٹرفیس کی تخلیق کے ذریعے اس حد سے تجاوز کرنے کے لئے، خاص طور پر ہماری 21st.dev انٹرویو کے ساتھ UI اجزاء کی پیداوار پر توجہ مرکوز.

مسئلہ: MCP میں محدود صارف تعامل

ماڈل کالنگ پروٹوکول AI مددگاروں کو خصوصی کاموں کو انجام دینے کے لئے بیرونی آلات کو بلانے کی اجازت دیتا ہے.

یہ محدودیت خاص طور پر 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. NPM میں MCP کے ساتھ ایک مقامی بونل خدمت کرتا ہے
3. خود کار طریقے سے ایک براؤزر کھولتا ہے جو ایک صارف انٹرفیس پر ریڈریڈ کرتا ہے
4. صارفین کے ساتھ بات چیت کرنے اور دستیاب اختیارات سے منتخب کرنے کی اجازت دیتا ہے
5. سرور کو بند کرتا ہے اور صارف کے انتخاب کے ساتھ عمل جاری کرتا ہے

نتیجے کے طور پر، ایک سادہ انضمام ہے جو MCP کی طاقت کو برقرار رکھتا ہے جبکہ صارفین کی ضروری بصری پیغامات اور بات چیت کی صلاحیتوں کو شامل کرتا ہے.

تکنیکی عملدرآمد

اب دیکھیں کہ یہ کس طرح استعمال کیا جاتا ہے.

Callback سرور کے لئے

ہمارے حل کے کورس میں ایک callback سرور ہے جو 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. ہر درخواست کے لئے ایک منفرد سیشن ID پیدا کرتا ہے
3. UI bundle کی خدمت کرتا ہے
4. اختیارات دکھانے کے لئے براؤزر کھولیں
5. ایک callback کے ذریعے صارف کا انتخاب حاصل کرتا ہے
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. Tool Invocation: AI مددگار 21st_magic_component_builder آلے کو بلاتا ہے جب ایک صارف ایک نیا UI اجزاء کی درخواست کرتا ہے.
2. API درخواست: آلہ 21st.dev API پر ایک درخواست بھیجتا ہے جو صارف کے پیغام اور کنکٹ پر مبنی کئی UI اجزاء کے متغیر کو پیدا کرتا ہے.
3. براؤزر شروع کریں: ایک مقامی سرور شروع ہوتا ہے اور ایک براؤزر ونڈو خود بخود کھولتا ہے، پیدا UI اجزاء کے اختیارات دکھاتا ہے.
4. صارف انٹرایکشن: صارف اپنے پسندیدہ اجزاء کے متغیر کو دیکھ سکتا ہے، ساتھ بات چیت کر سکتا ہے اور منتخب کر سکتا ہے.
5. Selection Capture: جب صارف ایک انتخاب کرتا ہے تو، براؤزر کا انتخاب واپس کالبک سرور کو بھیجتا ہے.
6. Execution Resumption: سرور بند ہوتا ہے، اور منتخب کردہ اجزاء کے اعداد و شمار کے ساتھ execution دوبارہ شروع ہوتا ہے.
7. انضمام ہدایات: AI مددگار منتخب کردہ اجزاء کو قبول کرتا ہے اور اسے صارف کے کوڈ بیس میں انضمام کرنے پر ہدایات فراہم کرتا ہے.

یہ نقطہ نظر ایک لچکدار تجربہ پیدا کرتا ہے جو صارفین کو UI اجزاء کے بارے میں باخبر فیصلے کرنے کی اجازت دیتا ہے جبکہ کل MCP کام کے چیلنج کو برقرار رکھتا ہے.

سیکورٹی اور رازداری کے خیالات

ہمارا انضمام کئی سیکورٹی اقدامات لیتا ہے:

1. مقامی ہوسٹنگ: تمام مواصلات صارف کے کمپیوٹر پر مقامی طور پر ہوتے ہیں (127.0.0.1)
2. منفرد سیشن ایڈز: ہر براؤزر کے سیشن کو ایک منفرد ایڈز ہے جو کرایہ سیشن کے مداخلت کو روکنے کے لئے
3. Timeout Mechanism: Sessions automatically time out after a configurable period (5 منٹ کے طور پر)
4. پورٹ سیکورٹی: سرور متحرک طور پر خلاف ورزی سے بچنے کے لئے ایک دستیاب پورٹ تلاش کرتا ہے

نتیجہ

MCP مواصلات کے لئے براؤزر پر مبنی نقطہ نظر صارف کے تجربے کے لئے اہم بہتر بناتا ہے جب وہ آلات کے ساتھ کام کرتے ہیں جو بصری تعامل سے فائدہ اٹھاتے ہیں. MCP کی طاقتور صلاحیتوں اور ویب انٹرایکشنز کی تعاملاتی نوعیت کے درمیان فاصلہ کو گزرنے کے ذریعے، ہم نے صارفین کے لئے ایک زیادہ بصری کام فرش پیدا کیا ہے. یہ نقطہ نظر خاص طور پر UI اجزاء کی پیداوار کے لئے قابل قدر ہے، جہاں بصری نمائندگی باخبر فیصلے کرنے کے لئے اہم ہے. تاہم، نمونہ کو دیگر آلات پر توسیع کیا جا سکتا ہے جو عملدرآمد کے دوران صارف کے تعامل سے فائدہ اٹھاتا ہے.

منبع کوڈ دستیاب ہےGitHub کے.