docs: write a blog post about testplane mcp

blog/mcp-release.mdx

@@ -0,0 +1,179 @@
+---
+title: Testplane MCP
+slug: mcp-release
+hide_table_of_contents: false
+date: 2025-06-16T17:00
+---
+
+import Admonition from "@theme/Admonition";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import investigateVideoUrl from "/video/blog/mcp/investigate.mp4";
+import generateVideoUrl from "/video/blog/mcp/generate.mp4";
+
+Рады представить Testplane MCP — проект, который позволяет AI-агентам быть в контексте происходящего в браузере, совершать действия и генерировать тесты с учетом реального состояния страницы.
+
+![](/img/blog/mcp/cover.png)
+
+{/* truncate */}
+
+## Какие возможности открывает Testplane MCP?
+
+### Значительное улучшение генерации тестов
+
+Представим, что мы добавили в приложение новую функциональность и теперь хотим сгенерировать тесты на неё с помощью AI-агента. Ранее, AI-агент мог лишь предположить как выглядит эта страница — селекторы скорее всего получились бы вымышленными, и тест требовал бы серьезных правок.
+
+Testplane MCP выводит этот процесс на новый уровень: AI-агент во время написания теста может открыть нужную страницу в браузере, взглянуть на её верстку, выполнять любые действия, например, нажать на кнопку или заполнить форму.
+
+В результате AI-агент может сгенерировать тест имея полный контекст происходящего в браузере — включая селекторы, которые действительно есть на странице.
+
+### Использование браузера AI-агентами
+
+Testplane MCP делает возможным автоматизировать повторяющиеся процессы. Например, можно построить воркфлоу для извлечения информации из фото, после чего с помощью Testplane MCP заходить на панель управления своей организации и заполнять форму заявки с соответствующей информацией.
+
+## Установка
+
+Необходимо запустить сервер из пакета `@testplane/mcp`. Для bleeding-edge сборок используйте тег `@next`, для стабильных — `@latest`:
+
+```shell
+npx @testplane/mcp@next
+```
+
+Установка зависит от среды, в которой будет использоваться Testplane MCP.
+
+<Tabs>
+    <TabItem value="cursor" label="Cursor">
+        Откройте настройки Cursor (кнопка в правом верхнем углу IDE), в секции `MCP` нажмите на кнопку `Add new global MCP server`, добавьте в конфиг Testplane MCP как в примере ниже.
+
+        ```json
+        {
+            "mcpServers": {
+                "testplane-mcp": {
+                    "command": "npx",
+                    "args": ["@testplane/mcp@next"]
+                }
+            }
+        }
+        ```
+    </TabItem>
+
+    <TabItem value="cline" label="VS Code + Cline">
+        1. Установите [расширение Cline](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev).
+        2. На вкладке расширения необходимо перейти на вкладу "MCP" и нажать "Configure MCP Servers".
+           ![](/img/blog/mcp/cline-setup.png)
+        3. Добавьте в конфиг Testplane MCP как в примере ниже.
+            ```json
+            {
+                "mcpServers": {
+                    "testplane-mcp": {
+                        "command": "npx",
+                        "args": ["@testplane/mcp@next"]
+                    }
+                }
+            }
+            ```
+    </TabItem>
+
+    <TabItem value="copilot" label="VS Code + Copilot">
+        Откройте настройки VS Code, введите в поиск `MCP`, нажмите на `Edit in settings.json`, добавьте в конфиг Testplane MCP как в примере ниже.
+
+        ```json
+        {
+            "mcp": {
+                "inputs": [],
+                "servers": {
+                    "testplane-mcp": {
+                        "command": "npx",
+                        "args": ["@testplane/mcp@next"]
+                    }
+                }
+            }
+        }
+        ```
+    </TabItem>
+
+    <TabItem value="claude" label="Claude Desktop">
+        Откройте настройки [как показано в оф. документации](https://modelcontextprotocol.io/quickstart/user), добавьте в конфиг Testplane MCP как в примере ниже.
+
+        ```json
+        {
+            "mcpServers": {
+                "testplane-mcp": {
+                    "command": "npx",
+                    "args": ["@testplane/mcp@next"]
+                }
+            }
+        }
+        ```
+    </TabItem>
+
+    <TabItem value="windsurf" label="Windsurf">
+        Откройте настройки [как показано в оф. документации](https://docs.windsurf.com/windsurf/cascade/mcp), добавьте в конфиг Testplane MCP как в примере ниже.
+
+        ```json
+        {
+            "mcpServers": {
+                "testplane-mcp": {
+                    "command": "npx",
+                    "args": ["@testplane/mcp@next"]
+                }
+            }
+        }
+        ```
+    </TabItem>
+
+    <TabItem value="jetbrains" label="Jetbrains">
+        Откройте настройки [как показано в оф. документации](https://www.jetbrains.com/help/ai-assistant/configure-an-mcp-server.html), добавьте в конфиг Testplane MCP как в примере ниже.
+
+        ```json
+        {
+            "mcpServers": {
+                "testplane-mcp": {
+                    "command": "npx",
+                    "args": ["@testplane/mcp@next"]
+                }
+            }
+        }
+        ```
+    </TabItem>
+
+</Tabs>
+
+После установки AI-агент сможет использовать Testplane MCP, можно прямо указать на это в промпте: "Используй testplane mcp, чтобы открыть страницу ...".
+
+## Использование
+
+Рассмотрим кейс разработки интернет-магазина книг. Представим, что у нас появилась новая фича — отображение оценок книг и мы хотим сгенерировать тесты на эту фичу.
+
+Сначала попросим AI-агента проанализировать страницу и составить план тестирования.
+
+<video src={investigateVideoUrl} width="100%" controls="controls">
+    Тег video не поддерживается вашим браузером.
+    <a href="video/blog/mcp/investigate.mp4">Скачайте видео</a>.
+</video>
+
+<br />
+
+Теперь попробуем сгенерировать тесты и запустить их.
+
+<video src={generateVideoUrl} width="100%" controls="controls">
+    Тег video не поддерживается вашим браузером.
+    <a href="video/blog/mcp/generate.mp4">Скачайте видео</a>.
+</video>
+
+<br />
+
+Как мы видим, AI-агент с первого раза сгенерировал тесты, которые проходят и содержат корректные селекторы.
+
+## Отличия от других решений
+
+Testplane MCP — не единственная реализация возможности взаимодействия AI-агента с браузером.
+
+На данный момент Testplane MCP обеспечивает следующие преимущества:
+
+-   Очень компактные и гибкие снапшоты страниц, модели не нужно работать со скриншотами. Это значительная экономия токенов API LLM.
+-   Бесшовная интеграция с экосистемой Testplane, которая в будущем будет только улучшаться. Например, каждый ответ сервера содержит код, который был запущен, чтобы модель могла встроить его в тесты.
+
+Следите за новыми релизами в нашем блоге и в разделе [Release Notes на GitHub](https://github.com/gemini-testing/testplane-mcp/releases), а в случае обнаружения проблем приходите в [issue GitHub][gh-issues] или наш [чат в Telegram](https://t.me/testplane) — мы вам обязательно поможем!
+
+[gh-issues]: https://github.com/gemini-testing/testplane-mcp/issues

i18n/en/docusaurus-plugin-content-blog/mcp-release.mdx

@@ -0,0 +1,179 @@
+---
+title: Testplane MCP
+slug: mcp-release
+hide_table_of_contents: false
+date: 2025-06-16T17:00
+---
+
+import Admonition from "@theme/Admonition";
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
+import investigateVideoUrl from "/video/blog/mcp/investigate.mp4";
+import generateVideoUrl from "/video/blog/mcp/generate.mp4";
+
+We're excited to present Testplane MCP — a project that allows AI agents to be aware of what's happening in the browser, perform actions, and generate tests based on the real state of the page.
+
+![](/img/blog/mcp/cover.png)
+
+{/* truncate */}
+
+## What capabilities does Testplane MCP unlock?
+
+### Significant improvement in test generation
+
+Imagine you've added new functionality to your application and now want to generate tests for it using an AI agent. Previously, an AI agent could only guess what this page looks like — the selectors would likely be fictional, and the test would require serious edits.
+
+Testplane MCP takes this process to a new level: while writing tests, the AI agent can open the required page in a browser, look at its layout, and perform any actions, such as clicking a button or filling out a form.
+
+As a result, the AI agent can generate tests with full context of what's happening in the browser — including selectors that actually exist on the page.
+
+### Browser usage by AI agents
+
+Testplane MCP makes it possible to automate repetitive processes. For example, you can build a workflow to extract information from photos, then use Testplane MCP to access your organization's management panel and fill out application forms with the corresponding information.
+
+## Installation
+
+You need to run the server from the `@testplane/mcp` package. For bleeding-edge builds use the `@next` tag, for stable ones use `@latest`:
+
+```shell
+npx @testplane/mcp@next
+```
+
+Installation depends on the environment where Testplane MCP will be used.
+
+<Tabs>
+    <TabItem value="cursor" label="Cursor">
+        Open Cursor settings (button in the top right corner of the IDE), in the `MCP` section click on the `Add new global MCP server` button, add Testplane MCP to the config as in the example below.
+
+        ```json
+        {
+            "mcpServers": {
+                "testplane-mcp": {
+                    "command": "npx",
+                    "args": ["@testplane/mcp@next"]
+                }
+            }
+        }
+        ```
+    </TabItem>
+
+    <TabItem value="cline" label="VS Code + Cline">
+        1. Install the [Cline extension](https://marketplace.visualstudio.com/items?itemName=saoudrizwan.claude-dev).
+        2. On the extension tab, you need to go to the "MCP" tab and click "Configure MCP Servers".
+           ![](/img/blog/mcp/cline-setup.png)
+        3. Add Testplane MCP to the config as in the example below.
+            ```json
+            {
+                "mcpServers": {
+                    "testplane-mcp": {
+                        "command": "npx",
+                        "args": ["@testplane/mcp@next"]
+                    }
+                }
+            }
+            ```
+    </TabItem>
+
+    <TabItem value="copilot" label="VS Code + Copilot">
+        Open VS Code settings, search for `MCP`, click on `Edit in settings.json`, add Testplane MCP to the config as in the example below.
+
+        ```json
+        {
+            "mcp": {
+                "inputs": [],
+                "servers": {
+                    "testplane-mcp": {
+                        "command": "npx",
+                        "args": ["@testplane/mcp@next"]
+                    }
+                }
+            }
+        }
+        ```
+    </TabItem>
+
+    <TabItem value="claude" label="Claude Desktop">
+        Open settings [as shown in the official documentation](https://modelcontextprotocol.io/quickstart/user), add Testplane MCP to the config as in the example below.
+
+        ```json
+        {
+            "mcpServers": {
+                "testplane-mcp": {
+                    "command": "npx",
+                    "args": ["@testplane/mcp@next"]
+                }
+            }
+        }
+        ```
+    </TabItem>
+
+    <TabItem value="windsurf" label="Windsurf">
+        Open settings [as shown in the official documentation](https://docs.windsurf.com/windsurf/cascade/mcp), add Testplane MCP to the config as in the example below.
+
+        ```json
+        {
+            "mcpServers": {
+                "testplane-mcp": {
+                    "command": "npx",
+                    "args": ["@testplane/mcp@next"]
+                }
+            }
+        }
+        ```
+    </TabItem>
+
+    <TabItem value="jetbrains" label="Jetbrains">
+        Open settings [as shown in the official documentation](https://www.jetbrains.com/help/ai-assistant/configure-an-mcp-server.html), add Testplane MCP to the config as in the example below.
+
+        ```json
+        {
+            "mcpServers": {
+                "testplane-mcp": {
+                    "command": "npx",
+                    "args": ["@testplane/mcp@next"]
+                }
+            }
+        }
+        ```
+    </TabItem>
+
+</Tabs>
+
+After installation, the AI agent will be able to use Testplane MCP. You can directly mention this in the prompt: "Use testplane mcp to open the page ...".
+
+## Usage
+
+Let's consider the case of developing an online bookstore. Imagine we have a new feature — displaying book ratings and we want to generate tests for this feature.
+
+First, let's ask the AI agent to analyze the page and create a testing plan.
+
+<video src={investigateVideoUrl} width="100%" controls="controls">
+    The video tag is not supported by your browser.
+    <a href="video/blog/mcp/investigate.mp4">Download the video</a>.
+</video>
+
+<br />
+
+Now let's try to generate tests and run them.
+
+<video src={generateVideoUrl} width="100%" controls="controls">
+    The video tag is not supported by your browser.
+    <a href="video/blog/mcp/generate.mp4">Download the video</a>.
+</video>
+
+<br />
+
+As we can see, the AI agent generated tests on the first try that pass and contain correct selectors.
+
+## Differences from other solutions
+
+Testplane MCP is not the only implementation that enables AI agent interaction with browsers.
+
+Currently, Testplane MCP provides the following advantages:
+
+-   Very compact and flexible page snapshots, models don't need to work with screenshots. This significantly saves LLM API token usage.
+-   Seamless integration with the Testplane ecosystem, which will only improve in the future. For example, each server response contains the code that was executed, so the model can embed it into tests.
+
+Follow new releases in our blog and in the [Release Notes section on GitHub](https://github.com/gemini-testing/testplane-mcp/releases), and if you encounter any issues, come to [GitHub issues][gh-issues] or our [Telegram chat](https://t.me/testplane) — we'll definitely help you!
+
+[gh-issues]: https://github.com/gemini-testing/testplane-mcp/issues