Introducing WebInteractMCP: Transforming Web Applications into MCP Servers

January 7, 2025•By Vijay Nirmal

mcpweb-automationchatbot-integrationannouncement

Introducing WebInteractMCP: Transforming Web Applications into MCP Servers

Today, I'm excited to introduce WebInteractMCP, an innovative open-source ecosystem that bridges the gap between web applications and the Model Context Protocol (MCP). This groundbreaking project enables any web application to become an MCP server, allowing chatbots and AI clients to control user sessions seamlessly.

The Problem We're Solving

Modern web applications are becoming increasingly complex, and users often need guidance navigating through various features and workflows. While chatbots and AI assistants have become more sophisticated, they've been limited in their ability to directly interact with web applications. Until now.

Traditional solutions require:

Complex browser automation setups
Brittle selectors that break with UI changes
Limited real-time communication capabilities
Framework-specific implementations

Enter WebInteractMCP

WebInteractMCP solves these challenges by creating a standardized way for web applications to expose their functionality through the Model Context Protocol. This enables:

Real-time Communication: Robust bidirectional communication using SignalR
Framework Agnostic: Works with React, Angular, Vue, or any JavaScript framework
Dynamic Tool Registration: Configure tools with simple JSON files
Session-based Control: Secure per-user session management
Production Ready: Comprehensive error handling and Docker support

Architecture Overview

The ecosystem consists of two main components:

1. @web-interact-mcp/client (TypeScript Library)

A lightweight, framework-agnostic library that integrates into your web application:

import { createWebInteractMCPController } from '@web-interact-mcp/client';

const controller = createWebInteractMCPController();
await controller.loadTools('/mcp-tools.json');
await controller.createSession('http://localhost:8080');

2. WebInteractMCPServer (.NET Server)

A robust MCP server built with .NET 9 and ASP.NET Core:

# Quick start with Docker
docker run -p 8080:8080 webinteract-mcp-server

Real-World Use Cases

1. Automated Testing

Transform your manual testing workflows into automated, AI-driven test scenarios:

{
  "toolId": "user-registration-test",
  "title": "Test User Registration",
  "description": "Automated testing of user registration flow",
  "mode": "silent",
  "steps": [
    {
      "targetElement": "#email",
      "action": { "type": "type", "element": "#email", "value": "{{email}}" }
    },
    {
      "targetElement": "#password",
      "action": { "type": "type", "element": "#password", "value": "{{password}}" }
    },
    {
      "targetElement": "#register-btn",
      "action": { "type": "click", "element": "#register-btn" }
    }
  ]
}

2. User Onboarding

Create intelligent, guided tours that adapt to user behavior:

{
  "toolId": "smart-onboarding",
  "title": "Smart User Onboarding",
  "description": "Intelligent onboarding that adapts to user progress",
  "mode": "guided",
  "steps": [
    {
      "targetElement": "#dashboard",
      "action": { "type": "highlight", "element": "#dashboard" },
      "description": "Welcome to your dashboard! This is where you'll find all your important information."
    }
  ]
}

3. Process Automation

Automate repetitive tasks with AI-powered workflows:

{
  "toolId": "invoice-processing",
  "title": "Process Invoice",
  "description": "Automates invoice data entry and processing",
  "mode": "interactive",
  "parameters": {
    "type": "object",
    "properties": {
      "invoiceData": {
        "type": "object",
        "description": "Invoice information extracted from document"
      }
    }
  }
}

Key Features That Set Us Apart

1. Full MCP Protocol Support

Complete implementation including tool discovery, invocation, and all response types (Text, Image, Audio, etc.).

2. Real-time Communication

Built on SignalR with support for WebSockets, ServerSentEvents, and LongPolling for maximum compatibility.

3. Visual Feedback

Provides users with clear visual feedback during tool execution, enhancing the user experience.

4. Page-specific Tools

Define tools that work with specific pages or application states for precise control.

5. Security First

Session-based isolation ensures that multiple users can safely use the system simultaneously.

Getting Started in Minutes

1. Install the Library

npm install @web-interact-mcp/client

2. Create Your Tools Configuration

[
  {
    "toolId": "welcome-demo",
    "title": "Welcome Demo",
    "description": "A simple demonstration tool",
    "mode": "guided",
    "steps": [
      {
        "targetElement": "#welcome-button",
        "action": { "type": "click", "element": "#welcome-button" },
        "description": "Click the welcome button to get started!"
      }
    ]
  }
]

3. Initialize in Your App

// Works with any framework!
const controller = createWebInteractMCPController();
await controller.loadTools('/mcp-tools.json');
await controller.createSession('http://localhost:8080');

The Technology Stack

We've chosen modern, robust technologies:

Client Library: TypeScript 5.8+, SignalR, Shepherd.js
MCP Server: .NET 9, ASP.NET Core, SignalR
Sample App: Angular 20, Semantic Kernel

What's Next?

WebInteractMCP is actively being developed with exciting features on the roadmap:

🔄 Enhanced Tool Types: More action types and validation options
🎨 Visual Tool Builder: GUI for creating tools without JSON
📊 Analytics Dashboard: Insights into tool usage and performance
🔌 Plugin System: Extensible architecture for custom actions
🌐 Multi-language Support: Support for additional programming languages

Join the Community

WebInteractMCP is open source and welcomes contributions from the community:

GitHub: Vijay-Nirmal/WebInteractMCP
Documentation: WebInteractMCP.com/docs
Issues: Report bugs and request features
Discussions: Join our community discussions

Development Status

⚠️ Important Note: WebInteractMCP is currently in active development and hasn't reached version 1.0 yet. While the core functionality is working and production-ready components are available, breaking changes may occur. We recommend using it in your projects while being prepared for potential updates.

Conclusion

WebInteractMCP represents a new paradigm in web application automation and AI integration. By making it simple for any web application to become an MCP server, we're opening up endless possibilities for intelligent user assistance, automated testing, and process automation.

Whether you're building the next generation of web applications or looking to enhance existing ones with AI capabilities, WebInteractMCP provides the tools and infrastructure you need.

Ready to transform your web application? Get started today and join the MCP revolution!

Have questions or want to contribute? Feel free to reach out or join our GitHub discussions. I'd love to hear from you!

Back to All Posts