អ្នកជំនួយ AI របស់អ្នកឥឡូវនេះអាចបង្ហាញអ្នកនូវជម្រើសមុនពេលធ្វើតេស្ត – thanks to a clever browser hack

គោលបំណងទូរស័ព្ទម៉ូដែល (MCP) បានធ្វើឱ្យប្រសើរឡើងយ៉ាងខ្លាំងវិធីដែលអ្នកជួយអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេឡិចត្រូនិអេ

ក្នុងអត្ថបទនេះខ្ញុំនឹងស្រាវជ្រាវវិធីសាស្រ្តថ្មីដែលយើងបានអភិវឌ្ឍនៅក្នុងមូលនិធិ Magic MCPដើម្បីកាត់បន្ថយការកាត់បន្ថយនេះដោយបង្កើតការផ្លាស់ប្តូរតាមបណ្តាញសម្រាប់ការទំនាក់ទំនង MCP ដែលផ្តោតលើការបង្កើតផ្នែកផ្នែក UI ជាមួយនឹងការរួមបញ្ចូល 21st.dev របស់យើង។

ប្រព័ន្ធ ប្រតិបត្តិការ ប្រព័ន្ធ ប្រតិបត្តិការ ប្រតិបត្តិការ MCP

Model Calling Protocol អនុញ្ញាតឱ្យអ្នកជំនួយ 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 Communication

ដើម្បីដោះស្រាយបញ្ហានេះយើងបានអភិវឌ្ឍប្រព័ន្ធដែលអនុញ្ញាតឱ្យការទំនាក់ទំនងជាមួយ MCPs តាមរយៈអ៊ីនធឺណិតប៊ុក។ គោលបំណងនេះ:

1. វាត្រូវបានបង្កើត MCP ដែលអាចរក្សាទុកកញ្ចប់និងបើកដំណើរការបណ្តាញបណ្ដាញ
2. ការផ្គត់ផ្គង់កញ្ចក់ផ្ទាល់ខ្លួនបន្ទាប់ពី MCP នៅក្នុង NPM
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. ការស្វែងរកប្រព័ន្ធប្រតិបត្តិការ Dynamically Find a Available Port
2. បានបង្កើត ID session មួយតែមួយសម្រាប់សំណួរទាំងអស់។
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. ឧបករណ៍ invocation: ឧបករណ៍ 21st_magic_component_builder គឺជាឧបករណ៍ដែលអ្នកប្រើបានធ្វើការនៅពេលដែលអ្នកប្រើបានតម្រូវឱ្យមានឧបករណ៍ UI ថ្មី។
2. API Request: ឧបករណ៍នេះផ្ញើសំណួរទៅ 21st.dev API ដើម្បីបង្កើតការផ្លាស់ប្តូរជាច្រើននៃផ្នែកផ្នែកផ្នែកប្រព័ន្ធប្រតិបត្តិការ UI ដោយផ្អែកលើប្រព័ន្ធផ្សព្វផ្សាយនិងប្រព័ន្ធប្រតិបត្តិការរបស់អ្នក។
3. ការចាប់ផ្តើមបណ្តាញ: អ្នកបណ្តាញផ្ទាល់ខ្លួននឹងចាប់ផ្តើមនិងបណ្តាញបណ្តាញបង្វិលដោយស្វ័យប្រវត្តិនឹងចាប់ផ្តើមដោយស្វ័យប្រវត្តិដែលបង្ហាញនូវផ្នែកផ្នែកផ្នែក UI ដែលត្រូវបានបង្កើតឡើង។
4. User Interaction: អ្នកប្រើប្រាស់អាចមើលការចូលរួមជាមួយនិងជ្រើសរើសការផ្លាស់ប្តូរផ្នែកដែលអ្នកចង់។
5. ការកាត់បន្ថយការជ្រើសរើស: នៅពេលដែលអ្នកប្រើបានធ្វើការជ្រើសរើស, កម្មវិធីពិនិត្យឡើងវិញផ្ញើការជ្រើសរើសមកវិញទៅលើសេវាកម្ម Callback ។
6. ការដំឡើងចុងក្រោយ: អ្នកផ្គត់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់ផ្គង់
7. គោលបំណងការរួមបញ្ចូល: អ្នកជំនួយ AI បានទទួលបានផ្នែកមួយដែលបានជ្រើសរើសនិងផ្តល់នូវគោលបំណងអំពីការរួមបញ្ចូលវាទៅក្នុងកូដបណ្តាញរបស់អ្នកប្រើ។

គោលបំណងនេះបង្កើតបទពិសោធន៍ដែលអាចអនុញ្ញាតឱ្យអ្នកប្រើប្រាស់ដើម្បីធ្វើតេស្តដែលមានអារម្មណ៍អំពីផ្នែកផ្នែក UI ខណៈពេលដែលរក្សាទុកដំណើរការការងារ MCP ទាំងមូល។

គំនិតសុវត្ថិភាពនិងសុវត្ថិភាព

ការអនុវត្តរបស់យើងមានការអនុវត្តការធានារ៉ាប់រងជាច្រើន:

1. ប្រព័ន្ធ ប្រតិបត្តិការ Local Hosting: ប្រព័ន្ធ ប្រតិបត្តិការ Local Hosting ប្រព័ន្ធ ប្រតិបត្តិការ Local Hosting ប្រព័ន្ធ ប្រតិបត្តិការ Local Hosting ប្រព័ន្ធ ប្រតិបត្តិការ Local Hosting ប្រព័ន្ធ ប្រតិបត្តិការ Local Hosting ប្រព័ន្ធ ប្រតិបត្តិការ Local Hosting ប្រព័ន្ធ ប្រតិបត្តិការ Local Hosting ប្រព័ន្ធ ប្រតិបត្តិការ Local Hosting ប្រព័ន្ធ ប្រតិបត្តិការ Local Hosting (127.0.0.1)
2. ដំណោះស្រាយដំណោះស្រាយដំណោះស្រាយដំណោះស្រាយដំណោះស្រាយដំណោះស្រាយដំណោះស្រាយដំណោះស្រាយដំណោះស្រាយ
3. ឧបករណ៍ Timeout: Sessions automatically time out after a configurable period (ការផ្លាស់ប្តូរពេលវេលា 5 នាទី)
4. ការសុវត្ថិភាពផែនទី: សេវាកម្មអាចរកឃើញផែនទីដែលអាចរកបានយ៉ាងឆាប់រហ័សដើម្បីជៀសវាងបញ្ហានេះ

លទ្ធផល

គោលបំណងដែលមានមូលដ្ឋានលើបណ្តាញទៅនឹងការទំនាក់ទំនង MCP គឺជាការធ្វើឱ្យប្រសើរឡើងយ៉ាងខ្លាំងដល់បទពិសោធរបស់អ្នកប្រើនៅពេលធ្វើការជាមួយឧបករណ៍ដែលទទួលបានអត្ថប្រយោជន៍ពីការទំនាក់ទំនងគំនូរជីវចល។ ដោយការកាត់បន្ថយការខុសគ្នានៅរវាងសមត្ថភាពដែលមានប្រសិទ្ធិភាពនៃ MCP និងគុណភាពទំនាក់ទំនងនៃអ៊ីនធឺណិតបណ្ដាញយើងបានបង្កើតដំណើរការការងារដែលមានប្រយោជន៍សម្រាប់អ្នកប្រើ។ គោលបំណងនេះគឺជាប្រយោជន៍ពិសេសសម្រាប់ការបង្កើតផ្នែកផ្នែក UI ដែលមានគោលបំណងសំខាន់សម្រាប់ការដោះស្រាយបញ្ហា។ ប៉ុន្តែគំរូនេះអាចត្រូវបានបន្ថែមទៅនឹងឧបករណ៍ផ្សេងទៀតដែលនឹងទទួលបានអត្ថ

លេខកូដប្រភពអាចរកបាននៅលើហ្វេសប៊ុក.