El teu assistent d'IA ara pot mostrar-te opcions abans de prendre decisions - gràcies a un hack de navegador intel·ligent

El Model Calling Protocol (MCP) ha millorat significativament la forma en què els assistents d'IA interactuen amb eines externes, permetent aplicacions més potents i versàtils. No obstant això, existeix una limitació clau dins de la implementació estàndard de MCP: les trucades d'eines són essencialment operacions de "caixa negra" sense interfície d'usuari incorporada per a la interacció.

En aquest article, exploraré un enfocament innovador que hem desenvolupat en21è Màgic MCPper superar aquesta limitació mitjançant la creació d'una interfície basada en el navegador per a les comunicacions MCP, específicament enfocada a la generació de components de la interfície d'usuari amb la nostra integració 21st.dev.

Problema: Interacció d'usuari limitada en MCP

El Model Calling Protocol permet als assistents d'IA invocar eines externes per realitzar tasques especialitzades.Encara que potent, la implementació estàndard té un desavantatge significatiu:

Aquesta restricció és particularment problemàtica quan es generen components de la interfície d'usuari.Quan una IA suggereix un component de la interfície d'usuari, els usuaris sovint han de:

1. See various design options

2. Compare different implementations

3. Customize details before integration

4. Make informed choices based on visual representation

   
   

L'enfocament MCP estàndard no ofereix un mecanisme integrat per a aquest tipus de bucle de retroalimentació interactiu.

Solució: Comunicació MCP basada en navegador

Per abordar aquesta limitació, hem desenvolupat un sistema que permet la comunicació amb els MCP a través d'una interfície de navegador.

1. Crea un MCP local que pot allotjar un paquet i obrir un navegador web
2. Serveix un paquet local al costat del MCP en NPM
3. Obre automàticament un navegador que redirigeix a una interfície d'usuari
4. Permet als usuaris interactuar i seleccionar entre les opcions disponibles
5. Tanca el servidor i reprèn l'execució amb la selecció de l'usuari

El resultat és una integració sense problemes que manté la potència de MCP alhora que afegeix el feedback visual i les capacitats d'interacció necessàries per als usuaris.

Implementació tècnica

Vegem com s’aplica això.

Servei de Callback

Al nucli de la nostra solució hi ha un servidor de trucades que facilita la comunicació entre el MCP i la interfície del navegador:

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

Aquest servidor:

1. Troba dinàmicament un port disponible
2. Crea un ID de sessió únic per a cada sol·licitud
3. Serveix el bundle de la UI
4. Obre el navegador per mostrar opcions
5. Rebre la selecció de l'usuari a través d'una trucada
6. Resoldre la promesa amb les dades seleccionades

Integration with MCP tool

Hem aplicat aquest enfocament per millorar la nostra eina 21st_magic_component_builder, que genera components d'interfície d'usuari:

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

Flux d'experiència de l'usuari

Així és com flueix l'experiència de l'usuari quan es sol·licita un component de la interfície d'usuari:

1. Invocació d'eines: L'assistent d'IA invoca l'eina 21st_magic_component_builder quan un usuari sol·licita un nou component d'interfície d'usuari.
2. API Request: L'eina envia una sol·licitud a l'API 21st.dev per generar múltiples variacions de components de la interfície d'usuari basades en el missatge i el context de l'usuari.
3. Llançament del navegador: s'inicia un servidor local i s'obre automàticament una finestra del navegador, mostrant les opcions de components de la interfície d'usuari generades.
4. Interacció de l'usuari: L'usuari pot visualitzar, interactuar i seleccionar la seva variació de component preferida.
5. Captura de selecció: Quan l'usuari fa una selecció, el navegador envia la selecció de nou al servidor de trucades.
6. Recuperació d'execució: el servidor es tanca i l'execució es reprèn amb les dades del component seleccionat.
7. Guia d'integració: L'assistent d'IA rep el component seleccionat i proporciona orientació sobre la seva integració a la base de codi de l'usuari.

Aquest enfocament crea una experiència sense problemes que permet als usuaris prendre decisions informades sobre els components de la interfície d'usuari, mantenint el flux de treball general de MCP.

Consideracions de seguretat i privacitat

La nostra implementació comporta diverses mesures de seguretat:

1. Hosting local: Tota la comunicació es fa localment a la màquina de l'usuari (127.0.0.1)
2. Identificadors de sessió únics: Cada sessió del navegador té un identificador únic per evitar interferències de sessió creuada
3. Mecanisme d'extinció de temps: les sessions s'extingeixen automàticament després d'un període configurable (per defecte 5 minuts)
4. Seguretat del port: el servidor troba dinàmicament un port disponible per evitar conflictes

Conclusió

L'enfocament basat en el navegador de la comunicació MCP representa una millora significativa de l'experiència de l'usuari quan es treballa amb eines que beneficien de la interacció visual. Mitjançant l'ampliació de la bretxa entre les potents capacitats de MCP i la naturalesa interactiva de les interfícies web, hem creat un flux de treball més intuïtiu per als usuaris. Aquest enfocament és particularment valuós per a la generació de components de la interfície d'usuari, on la representació visual és crucial per a la presa de decisions informades.

El codi font està disponible enGitHub.