Your AI Assistant Can Now Show You Options Before Making Decisions — Thanks to a Clever Browser Hack

The Protocol Calling model (MCP) significantly improved the way of contacting AI assistants with external tools, allowing stronger and versatile applications. However, a major limit exists within the standard MCP implementation: Tool callings are essentially “black box” operations without a user's built-in interface for contact. This creates a connectivity to the user experience, especially in cases where visual feedback or user input will be useful during the tool implementation process.

In this article, I will explore an innovative approach we developed in the 21st Magic MCP to overcome this limitation by creating a browser-based interface for MCP communications, specifically focusing on the generation of UI component with our joint 21st.dev.

Problem: Limited user interaction with MCP

The Model Calling Protocol allows AI assistants to invite external tools to perform specialized activities. While strong, the standard implementation has a significant drawback:

This restriction is particularly problematic when forming UI components. When an AI suggests an UI component, users often need:

1. See different design options

2. Compare different implementations

3. Customize the details before the integration

4. Make informed options based on visual representation

The standard MCP approach offers no built-in mechanism for this type of interactive feedback loop.

Solution: Browser -based communication

To meet this limit, we have developed a system that provides communication with MCPs through a browser interface. This method:

1. Creates a local MCP that can dost a bundle and open a web browser
2. Serves a local bundle next to MCP in NPM
3. Automatically opens a browser that recites a user interface
4. Allows users to interact and select from available options
5. Down the server and continues the implementation of the user's selection

The result is a seamless integration that maintains MCP's strength while adding the visual feedback and interaction capabilities that users need.

Technical implementation

Let's see how it was implemented.

Callback server

At the core of our solution is a callback server that facilitates communication between MCP and 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 {
    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((resolve, reject) => {
        this.promiseResolve = resolve;
        this.promiseReject = reject;
        
        // ... server setup code
        
        // Open browser with unique session ID
        const url = `
        open(url).catch((error) => {
          console.warn("Failed to open browser:", error);
          resolve({ data: { browserOpenFailed: true } });
          this.shutdown();
        });
      });
    } catch (error) {
      await this.shutdown();
      throw error;
    }
  }
}

This server:

1. Dynamic finds an available port
2. Creates a unique session ID for each request
3. Serves a bundle of UI
4. Opens the browser to display options
5. Receives user choice through a callback
6. Resolves promise to selected data

Integration with the MCP tool

We applied this method to enhance our 21st_magic_component_builder tool, forming UI components:

export class CreateUiTool extends BaseTool {
  name = UI_TOOL_NAME;
  description = UI_TOOL_DESCRIPTION;
  
  // ... schema definition
  
  async execute({
    message,
    searchQuery,
    absolutePathToCurrentFile,
    context,
  }: z.infer): 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("
        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;
    }
  }
}

Experience of the user's experience

Here's how the user experience flows when asking for a UI component:

1. Invocation of tool: AI's assistant encourages the 21st_magic_component_builder tool when a user requests a new UI component.
2. API request: The tool sends a request to 21st.Dev API to produce many differences -UI component variety based on user's message and context.
3. Launching a browser: A local server begins and a browser window automatically opens, showing the generated UI outfit options.
4. Co -of -use of the user: The user can view, interact with, and select their preferred difference -a variety of outfit.
5. Choosing a choice: When the user makes a choice, the browser sends the selection to the callback server.
6. Implementation of implementation: The server has fallen, and the implementation continues the selected component data.
7. Guide to integration: The AI's assistant receives the selected component and provides a guide to its integration with the user's codebase.

This method creates a seamless experience that gives users to make informed decisions about UI components while maintaining the overall flow of the MCP.

Security and Privacy Concerns

Our implementation takes many security measures:

1. Local Home -Host: All communications occur locally to the user's machine (127.0.0.1)
2. Unique session IDs: Each browser session has a unique ID to prevent cross-session disruption
3. Mechanism of time: Automatic Time Sessions after a Mai -Configure period (Default 5 minutes)
4. Port safety: The server is dynamic finds an available port to avoid conflicts

Conclusion

The MCP-based browser-based approach to the MCP communication represents a significant improvement in the user experience when working with tools that benefit from visual contact. By bridging the gap between the MCP's strong capabilities and the interactive nature of the web interfaces, we create an easier intuitive workflow for users. This method is particularly important for the generation of the UI component, where visual representation is essential for making knowledgeable decisions. However, the pattern can expand with other tools that will benefit from the user's contact during the implementation.

The source code is available in GitHub.