Váš AI asistent vám nyní může ukázat možnosti před přijetím rozhodnutí – díky chytrému prohlížeči

Modelový protokol pro volání (MCP) výrazně zlepšil způsob, jakým asistenti umělé inteligence interagují s externími nástroji, což umožňuje výkonnější a univerzálnější aplikace. klíčové omezení však existuje uvnitř standardní implementace MCP: volání nástrojů jsou v podstatě operace „černé skříňky“ bez vestavěného uživatelského rozhraní pro interakci.

V tomto článku budu zkoumat inovativní přístup, který jsme vyvinuli v21. magické MCPpřekonat toto omezení vytvořením rozhraní založeného na prohlížeči pro komunikaci MCP, zaměřeného konkrétně na generování komponent uživatelského rozhraní s naší integrací 21st.dev.

Problém: Omezená uživatelská interakce v MCP

Model Calling Protocol umožňuje AI asistentům zavolat externí nástroje k provádění specializovaných úkolů, zatímco výkonná standardní implementace má jednu významnou nevýhodu:

Toto omezení je obzvláště problematické při vytváření komponent uživatelského rozhraní.Když AI navrhuje součást uživatelského rozhraní, uživatelé často potřebují:

1. See various design options

2. Compare different implementations

3. Customize details before integration

4. Make informed choices based on visual representation

   
   

Standardní přístup MCP neposkytuje vestavěný mechanismus pro tento typ interaktivní zpětné vazby.

Řešení: Komunikace MCP založená na prohlížeči

Pro řešení tohoto omezení jsme vyvinuli systém, který umožňuje komunikaci s MCP prostřednictvím rozhraní prohlížeče.

1. Vytváří místní MCP, který může hostit balíček a otevřít webový prohlížeč
2. Poskytuje lokální balíček vedle MCP v NPM
3. Automaticky otevírá prohlížeč, který přesměruje na uživatelské rozhraní
4. Umožňuje uživatelům komunikovat a vybírat z dostupných možností
5. Zavře server a obnoví provedení s výběrem uživatele

Výsledkem je bezproblémová integrace, která udržuje výkon MCP a přidává vizuální zpětnou vazbu a interakční schopnosti, které uživatelé potřebují.

Technická implementace

Podívejme se, jak je to realizováno.

Callback server

Jádrem našeho řešení je callback server, který usnadňuje komunikaci mezi MCP a rozhraním prohlížeče:

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

Na tomto serveru:

1. Dynamicky najde dostupný port
2. Vytvoří unikátní ID relace pro každou žádost
3. Použijte UI bundle
4. Otevře prohlížeč pro zobrazení možností
5. Přijímá výběr uživatele prostřednictvím zpětného hovoru
6. Vyřeší slib pomocí vybraných dat

Integration with MCP tool

Tento přístup jsme použili k vylepšení nástroje 21st_magic_component_builder, který generuje součásti rozhraní uživatele:

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

Uživatelská zkušenost Flow

Zde je návod, jak uživatelská zkušenost proudí při žádosti o součást rozhraní uživatele:

1. Vyvolání nástroje: Asistent AI vyvolá nástroj 21st_magic_component_builder, když uživatel požádá o novou komponentu rozhraní uživatele.
2. API Request: Nástroj odesílá žádost do rozhraní 21st.dev API, aby generoval více variant komponent rozhraní uživatele na základě zprávy a kontextu uživatele.
3. Spuštění prohlížeče: Spustí se lokální server a automaticky se otevře okno prohlížeče, které zobrazí generované možnosti komponentu rozhraní uživatele.
4. Uživatelská interakce: Uživatel si může prohlížet, interagovat a vybrat svou preferovanou variaci komponentu.
5. Selection Capture: Když uživatel provede výběr, prohlížeč odesílá výběr zpět na callback server.
6. Opětovné spuštění: Server se vypne a spuštění se obnoví s vybranými daty součástek.
7. Integrační vedení: Asistent AI obdrží vybranou komponentu a poskytuje pokyny pro její integraci do uživatelské kódové databáze.

This approach creates a seamless experience that allows users to make informed decisions about UI components while maintaining the overall MCP workflow.

Bezpečnostní a soukromé úvahy

Naše implementace zahrnuje několik bezpečnostních opatření:

1. Lokální hosting: Veškerá komunikace probíhá lokálně na počítači uživatele (127.0.0.1)
2. Unikátní ID relace: Každá relace prohlížeče má unikátní ID, aby se zabránilo interferenci mezi relacemi
3. Timeout mechanismus: relace automaticky vyprší po konfiguračním období (default 5 minut)
4. Bezpečnost portu: server dynamicky najde dostupný port, aby se zabránilo konfliktům

Závěr

Přístup založený na prohlížeči k komunikaci MCP představuje významné zlepšení uživatelského zážitku při práci s nástroji, které mají prospěch z vizuální interakce. Překonáním mezery mezi výkonnými schopnostmi MCP a interaktivní povahou webových rozhraní jsme vytvořili intuitivnější pracovní postup pro uživatele. Tento přístup je zvláště cenný pro generování komponent rozhraní uživatele, kde je vizuální reprezentace rozhodující pro přijímání informovaných rozhodnutí.

Zdrojový kód je k dispoziciGitHub.