Ang iyong AI assistant ay maaaring ngayon ipakita sa iyo ng mga pagpipilian bago ang pagkuha ng mga resolusyon - salamat sa isang clever browser hack

Ang Model Calling Protocol (MCP) ay nangangahulugan na mapabuti ang paraan ng mga assistant ng AI na nag-interact sa mga eksternal na mga tool, na nagbibigay-daan para sa mas malakas at kapaki-pakinabang mga application. Gayunpaman, isang pangunahing limitasyon ay mayroon sa ilalim ng standard MCP implementation: tool calls ay karaniwang "black box" operations na walang built-in user interface para sa interaction.

Sa artikulong ito, i-explore ang isang innovative approach na kami ay binuo sa21 Ang Magical MCPupang ibalik ang limitasyon na ito sa pamamagitan ng paglikha ng isang browser-based interface para sa MCP communications, na itinatampok sa UI component generation sa aming 21st.dev integration.

Problema: Ang limitadong user interaction sa MCP

Ang Model Calling Protocol ay nagbibigay-daan sa mga assistant ng AI upang i-invocate ang mga eksternal na mga tool upang bumuo ng mga espesyalista na mga trabaho. Habang malakas, ang mga standard na implementasyon ay may isang malaking disadvantage:

Ang limitasyon na ito ay lalo na problema sa pag-generate ng mga bahagi ng UI. Kapag ang isang AI ay nag-suggest ng isang bahagi ng UI, ang mga gumagamit ay karaniwang kailangan:

1. See various design options

2. Compare different implementations

3. Customize details before integration

4. Make informed choices based on visual representation

   
   

Ang standard MCP approach ay nag-aalok ng walang built-in mekanismo para sa uri ng interactive feedback loop.

Mga Solusyon: Browser-Based MCP Communication

Upang matugunan ang limitasyon na ito, natuklasan namin ang isang sistema na nagbibigay-daan ng komunikasyon sa MCPs sa pamamagitan ng isang browser interface.

1. Lumikha ng isang local MCP na maaaring mag-host ng isang bundle at mag-open ng isang web browser
2. Nagbibigay ng isang lokal na bundle kasama ang MCP sa NPM
3. Automatically opens a browser na redirect sa isang user interface
4. Nagbibigay-daan sa mga gumagamit upang makipag-ugnayan sa at piliin mula sa mga magagamit na mga opsyon
5. I-shut down ang server at nagpatuloy ang pag-execute sa seleksyon ng user

Ang resulta ay isang malusog na integrasyon na matatagpuan ang kapangyarihan ng MCP habang sumali ang mga visual feedback at mga kapasidad ng interaction na kailangan ng mga gumagamit.

Technical Implementasyon

Tingnan natin kung paano ito ginagamit.

Paggamit ng server

Sa core ng aming solusyon ay isang callback server na nagpapahintulot sa komunikasyon sa pagitan ng MCP at ang browser interface:

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;
    }
  }
}

Ang mga server:

1. Dinamically makikita ang isang available port
2. I-create a unique session ID para sa bawat request
3. Pumunta ang UI bundle
4. Buksan ang browser upang ipakita ang mga opsyon
5. Nakuha ang seleksyon ng user sa pamamagitan ng isang callback
6. I-resolve ang promise sa pamamagitan ng mga selected data

Integration with MCP tool

Kami ay nagtatrabaho ito upang mapabuti ang aming 21st_magic_component_builder tool, na nagpapakita ng mga bahagi ng 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;
    }
  }
}

User Experience sa pamamagitan ng Flow

Narito ang kung paano ang user experience flows kapag nag-request ng isang UI component:

1. Tool Invocation: Ang AI assistant invokes ang tool ng 21st_magic_component_builder kapag ang isang user ay nag-request ng isang bagong component ng UI.
2. API Request: Ang tool ay nagpadala ng isang request sa 21st.dev API upang generate multiple UI component variations batay sa mensahe ng user at konteksto.
3. Browser Launch: Ang isang lokal na server ay nagsisimula at ang isang window ng browser ay automatically buksan, na nagpapakita ng mga opsyon ng mga bahagi ng UI na nilikha.
4. User Interaction: Ang user ay maaaring ipakita, makipag-ugnayan sa, at piliin ang kanilang preferred component variation.
5. Selection Capture: Kapag ang user ay gumawa ng isang seleksyon, ang browser ay magpadala ng seleksyon sa callback server.
6. Execution Resumption: Ang server ay umalis, at ang pag-uugali ay nagsimula sa mga selected component data.
7. Integration Guidance: Ang AI assistant ay makakuha ng ang selected component at nagbibigay ng mga pangunahing orientasyon sa pag-integrate ito sa user's codebase.

Ang paraan na ito ay lumikha ng isang malusog na karanasan na nagbibigay-daan sa mga gumagamit upang gumawa ng impormasyon tungkol sa mga bahagi ng UI habang nagtataguyod ang pangkalahatang workflow ng MCP.

Security at Privacy Considerations

Ang aming implementasyon ay nangangailangan ng ilang mga pagsusuri ng seguridad:

1. Local Hosting: Ang lahat ng komunikasyon ay lumikha lokal sa computer ng user (127.0.0.1)
2. Unique Session IDs: Ang bawat session ng browser ay may isang unikat na ID upang maiwasan ang interference sa cross-session
3. Timeout Mechanism: Session automatically time out pagkatapos ng isang configurable period (default 5 minuto)
4. Port Safety: Ang server dynamically makahanap ng isang available port upang makakuha ng mga conflict

Konklusyon

Ang browser-based approach sa MCP communication ay nagpapakita ng isang malaking pag-unlad sa user experience kapag nagtatrabaho sa mga tool na gumagamit ng visual interaction. By bridging the gap between the powerful capabilities of MCP and the interactive nature of web interfaces, kami ay lumikha ng isang mas intuitive workflow para sa mga gumagamit. Ang pag-unlad na ito ay karamihan na mahalaga para sa UI component generation, kung saan ang visual representation ay mahalaga para sa pagkuha ng informed decisions. Gayunpaman, ang pattern ay maaaring bumuo sa iba pang mga tool na maaaring gumagana mula sa user interaction sa panahon ng execution.

Ang source code ay magagamitang github.