Din AI-assistent kan nu visa dig alternativ innan du fattar beslut – tack vare en smart webbläsare hack

Model Calling Protocol (MCP) har avsevärt förbättrat hur AI-assistenter interagerar med externa verktyg, vilket möjliggör mer kraftfulla och mångsidiga applikationer. emellertid finns det en viktig begränsning inom standard MCP-implementationen: verktygsamtal är i huvudsak "black box" -operationer utan inbyggt användargränssnitt för interaktion.

I den här artikeln kommer jag att utforska ett innovativt tillvägagångssätt som vi har utvecklat i21:e magiska MCPatt övervinna denna begränsning genom att skapa ett webbläsarbaserat gränssnitt för MCP-kommunikation, specifikt inriktat på UI-komponentgenerering med vår 21st.dev-integration.

Problem: Begränsad användarinteraktion i MCP

Model Calling Protocol tillåter AI-assistenter att använda externa verktyg för att utföra specialiserade uppgifter.

Denna begränsning är särskilt problematisk vid generering av UI-komponenter.När en AI föreslår en UI-komponent behöver användarna ofta:

1. See various design options

2. Compare different implementations

3. Customize details before integration

4. Make informed choices based on visual representation

   
   

Standard MCP-metoden erbjuder ingen inbyggd mekanism för denna typ av interaktiv feedback loop.

Lösning: Browser-baserad MCP-kommunikation

För att ta itu med denna begränsning har vi utvecklat ett system som möjliggör kommunikation med MCP via ett webbläsargränssnitt.

1. Skapar en lokal MCP som kan vara värd för ett paket och öppna en webbläsare
2. Tjänar en lokal bunt bredvid MCP i NPM
3. Öppnar automatiskt en webbläsare som omdirigerar till ett användargränssnitt
4. Tillåter användare att interagera med och välja från tillgängliga alternativ
5. Stänger av servern och återupptar utförandet med användarens val

Resultatet är en sömlös integration som upprätthåller kraften i MCP samtidigt som man lägger till visuell feedback och interaktionsfunktioner som användarna behöver.

Teknisk genomförande

Låt oss se hur detta genomförs.

Callback Servern

Kärnan i vår lösning är en callback-server som underlättar kommunikationen mellan MCP och webbläsargränssnittet:

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

Den här servern:

1. Dynamiskt hittar en tillgänglig port
2. Skapar ett unikt session-ID för varje begäran
3. Tjänar UI bundle
4. Öppnar webbläsaren för att visa alternativ
5. Får användarens val genom en callback
6. Löser löftet med de valda uppgifterna

Integration with MCP tool

Vi har tillämpat detta tillvägagångssätt för att förbättra vårt verktyg 21st_magic_component_builder, som genererar UI-komponenter:

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

Användarupplevelse Flow

Så här flödar användarupplevelsen när du begär en UI-komponent:

1. Verktygsinriktning: AI-assistenten inbjuder verktyget 21st_magic_component_builder när en användare begär en ny UI-komponent.
2. API-begäran: Verktyget skickar en begäran till 21st.dev API för att generera flera UI-komponentvariationer baserat på användarens meddelande och sammanhang.
3. Browser Launch: En lokal server startar och ett webbläsarfönster öppnas automatiskt, vilket visar de genererade UI-komponentalternativen.
4. Användarinteraktion: Användaren kan visa, interagera med och välja sin föredragna komponentvariation.
5. Selection Capture: När användaren gör ett urval skickar webbläsaren urvalet tillbaka till återkopplingsservern.
6. Exekveringsåterupptagning: Servern stängs av och utförandet återupptas med de valda komponentdata.
7. Integrationsvägledning: AI-assistenten tar emot den valda komponenten och ger vägledning om att integrera den i användarens kodbas.

Detta tillvägagångssätt skapar en sömlös upplevelse som gör det möjligt för användare att fatta välgrundade beslut om UI-komponenter samtidigt som det övergripande MCP-arbetsflödet upprätthålls.

Säkerhets- och integritetsöverväganden

Vår implementering kräver flera säkerhetsåtgärder:

1. Lokal hosting: All kommunikation sker lokalt på användarens maskin (127.0.0.1)
2. Unika session-ID: Varje webbläsarsession har ett unikt ID för att förhindra interferens mellan sessioner
3. Timeout-mekanism: Sessioner slutar automatiskt efter en konfigurerbar period (standard 5 minuter)
4. Portsäkerhet: Servern hittar dynamiskt en tillgänglig port för att undvika konflikter

Slutsats

Det webbaserade tillvägagångssättet för MCP-kommunikation representerar en betydande förbättring av användarupplevelsen när man arbetar med verktyg som drar nytta av visuell interaktion. Genom att överbrygga klyftan mellan MCP:s kraftfulla funktioner och webbgränssnittens interaktiva karaktär har vi skapat ett mer intuitivt arbetsflöde för användarna. Detta tillvägagångssätt är särskilt värdefullt för UI-komponentgenerering, där visuell representation är avgörande för att fatta välgrundade beslut.

Källkoden finns tillgänglig påGitHub.