Merge pull request #127 from executeautomation/Added-support-for-MCP-with-updated-documentation

Added support for mcp with updated documentation

Author: executeautomation

README.md

@@ -57,6 +57,7 @@ const urlForWebsites = `vscode:mcp/install?${encodeURIComponent(config)}`;
 const urlForGithub = `https://insiders.vscode.dev/redirect?url=${encodeURIComponent(urlForWebsites)}`;
 -->
 
+[<img src="https://img.shields.io/badge/VS_Code-VS_Code?style=flat-square&label=Install%20Server&color=0098FF" alt="Install in VS Code">](https://insiders.vscode.dev/redirect?url=vscode%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522-y%2522%252C%2522%2540executeautomation%252Fplaywright-mcp-server%2522%255D%257D) 
 [<img alt="Install in VS Code Insiders" src="https://img.shields.io/badge/VS_Code_Insiders-VS_Code_Insiders?style=flat-square&label=Install%20Server&color=24bfa5">](https://insiders.vscode.dev/redirect?url=vscode-insiders%3Amcp%2Finstall%3F%257B%2522name%2522%253A%2522playwright%2522%252C%2522command%2522%253A%2522npx%2522%252C%2522args%2522%253A%255B%2522-y%2522%252C%2522%2540executeautomation%252Fplaywright-mcp-server%2522%255D%257D)
 
 Alternatively, you can install the Playwright MCP server using the VS Code CLI:
@@ -87,6 +88,36 @@ Here's the Claude Desktop configuration to use the Playwright server:
 }
 ```
 
+## SSE (Server-Sent Events) Support
+
+Playwright MCP Server now supports real-time event streaming via Server-Sent Events (SSE).
+
+### How to Use
+
+- The server exposes an SSE endpoint at `http://localhost:3001/events`.
+- You can connect to this endpoint using any SSE-compatible client (such as EventSource in the browser or curl).
+- Events are sent in real-time as they occur (e.g., new console logs, screenshots, etc.).
+
+### Example (JavaScript)
+```js
+const evtSource = new EventSource('http://localhost:3001/events');
+evtSource.addEventListener('console_log_entry', (event) => {
+  const data = JSON.parse(event.data);
+  console.log('Console log:', data.log);
+});
+evtSource.addEventListener('screenshot', (event) => {
+  const data = JSON.parse(event.data);
+  console.log('Screenshot event:', data);
+});
+```
+
+### Available Events
+- `console_log_entry`: Fired when a new console log is captured.
+- `console_logs`: Fired when all logs are requested.
+- `screenshot`: Fired when a screenshot is taken or requested.
+
+This allows you to build real-time dashboards, monitoring tools, or simply observe browser activity as it happens.
+
 ## Testing
 
 This project uses Jest for testing. The tests are located in the `src/__tests__` directory.

docs/docs/intro.mdx

@@ -70,3 +70,31 @@ Modify your `claude-desktop-config.json` file as shown below
 This video should give you an high level overview of what Claude's MCP is and how helpful it will soon become for AI agents
 
 <YouTubeVideoEmbed videoId="hGJQMbpsTi4" />
+
+## 🟢 Real-Time Event Streaming (SSE)
+
+Playwright MCP Server now supports real-time event streaming via Server-Sent Events (SSE).
+
+- The server exposes an SSE endpoint at `http://localhost:3001/events`.
+- You can connect to this endpoint using any SSE-compatible client (such as EventSource in the browser or curl).
+- Events are sent in real-time as they occur (e.g., new console logs, screenshots, etc.).
+
+**Example (JavaScript):**
+```js
+const evtSource = new EventSource('http://localhost:3001/events');
+evtSource.addEventListener('console_log_entry', (event) => {
+  const data = JSON.parse(event.data);
+  console.log('Console log:', data.log);
+});
+evtSource.addEventListener('screenshot', (event) => {
+  const data = JSON.parse(event.data);
+  console.log('Screenshot event:', data);
+});
+```
+
+**Available Events:**
+- `console_log_entry`: Fired when a new console log is captured.
+- `console_logs`: Fired when all logs are requested.
+- `screenshot`: Fired when a screenshot is taken or requested.
+
+This allows you to build real-time dashboards, monitoring tools, or simply observe browser activity as it happens.

docs/docs/playwright-web/Supported-Tools.mdx

@@ -4,9 +4,14 @@ sidebar_position: 1
 
 import YouTubeVideoEmbed from '@site/src/components/HomepageFeatures/YouTubeVideoEmbed';
 
-
 # 🛠️ Supported Tools
 
+> **🟢 Real-Time Event Streaming (SSE) is now supported!**
+>
+> - Connect to `http://localhost:3001/events` for real-time updates (console logs, screenshots, etc.).
+> - Use any SSE-compatible client (e.g., EventSource in the browser).
+> - Events: `console_log_entry`, `console_logs`, `screenshot`.
+
 Playwright MCP for Browser automation has following key features
 - Console log monitoring
 - Code Generation

docs/docs/release.mdx

@@ -5,6 +5,28 @@ import YouTubeVideoEmbed from '@site/src/components/HomepageFeatures/YouTubeVide
 
 # Release Notes
 
+## Version 1.0.4
+- **SSE (Server-Sent Events) Support**: Added real-time event streaming via SSE
+  - New SSE server runs on `http://localhost:3001/events`
+  - Real-time streaming of browser console logs and screenshots to any SSE-compatible client
+  - Example usage and event types (`console_log_entry`, `console_logs`, `screenshot`) documented in README and docs
+  - Enables building real-time dashboards, monitoring tools, or observing browser activity as it happens
+
+- **New Tool: `playwright_iframe_fill`**
+  - Fill input fields inside iframes using CSS selectors
+
+- **New Tool: `playwright_click_and_switch_tab`**
+  - Click a link and automatically switch to the newly opened browser tab
+
+- **Improved Error Logging**
+  - Captures uncaught exceptions and unhandled Promise rejections in browser logs for better debugging
+
+- **Documentation Updates**
+  - Added/updated documentation for new tools, SSE support, and improved installation/configuration instructions
+
+- **Test Coverage**
+  - Added and updated tests for new tools and features
+
 ## Version 1.0.3
 - **Code Generation Capabilities**: Added new code generation capability 🎭
   - `start_codegen_session`: Start a new session to record Playwright actions