{"id":477839,"date":"2026-04-28T19:06:54","date_gmt":"2026-04-28T19:06:54","guid":{"rendered":"https:\/\/savepearlharbor.com\/?p=477839"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=477839","title":{"rendered":"\u041a\u0430\u043a \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043d\u043e\u0433\u043e AI-\u0430\u0433\u0435\u043d\u0442\u0430 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 MCP \u0437\u0430 \u0432\u0435\u0447\u0435\u0440"},"content":{"rendered":"<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 n0x \u0438 \u0437\u0430\u0447\u0435\u043c \u0435\u043c\u0443 MCP<\/h3>\n<p>n0x \u2014 \u044d\u0442\u043e open-source AI-\u0432\u043e\u0440\u043a\u0441\u0442\u0435\u0439\u0448\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 <strong>\u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435<\/strong>. LLM, RAG, Python-\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430, \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0412\u0441\u0451 \u044d\u0442\u043e \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f \u043d\u0430 WebGPU \u0438 WASM. \u041d\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043d\u0435\u0442 API-\u043a\u043b\u044e\u0447\u0435\u0439, \u0432\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u043f\u043e\u043a\u0438\u0434\u0430\u044e\u0442 \u0432\u0430\u0448 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440.<\/p>\n<p>\u041f\u0440\u043e\u0435\u043a\u0442 \u0443\u0436\u0435 \u0443\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0433\u043e\u0435, \u043d\u043e \u0435\u0441\u0442\u044c \u043d\u044e\u0430\u043d\u0441: <strong>\u0430\u0433\u0435\u043d\u0442 \u043c\u043e\u0433 \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u043e\u043b\u0442\u0430\u0442\u044c<\/strong>. \u041e\u043d \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0432\u043e\u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u0442\u0443\u043b\u044b (\u043f\u043e\u0438\u0441\u043a, Python, \u043f\u0430\u043c\u044f\u0442\u044c), \u043d\u043e \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0432\u043d\u0435\u0448\u043d\u0438\u043c \u043c\u0438\u0440\u043e\u043c.<\/p>\n<p>\u0410 \u043c\u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430 \u0444\u0440\u0430\u0437\u0443 \u00ab\u043e\u0442\u043a\u0440\u043e\u0439 \u0425\u0430\u0431\u0440\u00bb \u043e\u043d \u043c\u043e\u0433 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0441 habr.com.<\/p>\n<p>\u0422\u0430\u043a \u044f \u0440\u0435\u0448\u0438\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c MCP.<\/p>\n<hr\/>\n<h3>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 MCP (Model Context Protocol)<\/h3>\n<p>MCP \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 LLM-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0447\u0435\u0440\u0435\u0437 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u041f\u0440\u0438\u0434\u0443\u043c\u0430\u043d \u043e\u043d \u0431\u044b\u043b \u0432 Anthropic (\u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 Claude), \u043d\u043e \u0441\u0442\u0430\u043b \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u043c \u043f\u043e \u0432\u0441\u0435\u0439 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435.<\/p>\n<p>\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0442\u0430\u043a:<\/p>\n<pre><code>[\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c] \u2192 [LLM] \u2192 [MCP Client] \u2192 [MCP Server] \u2192 [\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442]                     \u2193              \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:87px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>MCP Server \u2014 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u0442\u0443\u043b\u043e\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, <code>chrome-devtools-mcp<\/code> \u0434\u0430\u0451\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c: \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c URL, \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c JS.<\/p>\n<p>LLM \u0432 \u043e\u0442\u0432\u0435\u0442\u0435 \u043f\u0438\u0448\u0435\u0442 \u0447\u0442\u043e-\u0442\u043e \u043d\u0430 \u043f\u043e\u0434\u043e\u0431\u0438\u0438:<\/p>\n<pre><code class=\"json\">{\"tool\": \"chrome_devtools_navigate\", \"args\": {\"url\": \"https:\/\/habr.com\"}}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>MCP \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438 \u043e\u0442\u0434\u0430\u0451\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e LLM \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430.<\/p>\n<hr\/>\n<h3>\u043a\u0430\u043a \u044f \u0432\u0441\u0442\u0440\u043e\u0438\u043b MCP \u0432 n0x<\/h3>\n<p>\u0412 n0x \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f React + Zustand + Web Workers. MCP-\u043a\u043b\u0438\u0435\u043d\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0432\u043e\u0440\u043a\u0435\u0440\u0435, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c UI.<\/p>\n<p>\u0412\u043e\u0442 \u0441\u0445\u0435\u043c\u0430:<\/p>\n<pre><code>\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u2502                         UI (React)                          \u2502\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502  \u2502 ChatInput   \u2502  \u2502 AgentTrace  \u2502  \u2502 McpToolDrawer       \u2502 \u2502\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518          \u2502                \u2502                    \u2502          \u25bc                \u25bc                    \u25bc\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u2502                      Zustand Store                          \u2502\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502  \u2502                    useAgent.ts                         \u2502 \u2502\u2502  \u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502 \u2502\u2502  \u2502  \u2502 parseToolCall\u2502  \u2502 executeTool  \u2502  \u2502 buildPrompt \u2502  \u2502 \u2502\u2502  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502 \u2502\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\u2502            \u2502                  \u2502                  \u2502          \u2502\u2502            \u25bc                  \u25bc                  \u25bc          \u2502\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502  \u2502                    useMCP.ts                           \u2502 \u2502\u2502  \u2502         (Zustand store + Worker communication)        \u2502 \u2502\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518                             \u2502                             \u25bc\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u2502                      Web Worker                             \u2502\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502  \u2502                   mcp.worker.ts                        \u2502 \u2502\u2502  \u2502  \u2022 Client (StreamableHTTPClientTransport)             \u2502 \u2502\u2502  \u2502  \u2022 Tool registration &amp; state management               \u2502 \u2502\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518                             \u2502                             \u25bc\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u2502                      MCP Server                             \u2502\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502  \u2502   chrome-devtools-mcp + supergateway                  \u2502 \u2502\u2502  \u2502   (\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043d\u0430 localhost:8080\/mcp)          \u2502 \u2502\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041a\u0430\u0436\u0434\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u0432\u043e\u0451:<\/p>\n<ul>\n<li>\n<p><strong>UI<\/strong> \u2014 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0443\u043b\u0430\u043c\u0438 (McpToolDrawer)<\/p>\n<\/li>\n<li>\n<p><strong>useAgent.ts<\/strong> \u2014 \u043f\u0430\u0440\u0441\u0438\u0442 \u043e\u0442\u0432\u0435\u0442\u044b LLM \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0442\u0443\u043b\u044b<\/p>\n<\/li>\n<li>\n<p><strong>useMCP.ts<\/strong> \u2014 Zustand-\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0438 \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u044f \u0441 \u0432\u043e\u0440\u043a\u0435\u0440\u043e\u043c<\/p>\n<\/li>\n<li>\n<p><strong>mcp.worker.ts<\/strong> \u2014 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a MCP-\u0441\u0435\u0440\u0432\u0435\u0440\u0443<\/p>\n<\/li>\n<li>\n<p><strong>MCP Server<\/strong> \u2014 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 (chrome-devtools-mcp)<\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h3>\u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u043e\u0434\u0430<\/h3>\n<h4>1. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a MCP-\u0441\u0435\u0440\u0432\u0435\u0440\u0443 (mcp.worker.ts)<\/h4>\n<pre><code class=\"typescript\">async function connectToServer(url: string) {  const serverUrl = new URL(url);  const transport = new StreamableHTTPClientTransport(serverUrl);  const client = new Client({    name: \"n0x-mcp-client\",    version: \"1.0.0\"  });    await client.connect(transport);  const { tools } = await client.listTools();    return { client, tools };}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u2014 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043a\u043b\u0438\u0435\u043d\u0442, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u0443\u043b\u043e\u0432.<\/p>\n<h4>2. \u041f\u0430\u0440\u0441\u0438\u043d\u0433 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434 (useAgent.ts)<\/h4>\n<p>\u0421\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0431\u044b\u043b\u043e \u2014 \u043d\u0430\u0443\u0447\u0438\u0442\u044c LLM \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a:<\/p>\n<pre><code class=\"typescript\">function parseToolCall(text: string) {  \/\/ \u041f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438  const navPatterns = [    \/(?:\u043e\u0442\u043a\u0440\u043e\u0439|open|goto|\u043f\u0435\u0440\u0435\u0439\u0434\u0438|\u0437\u0430\u0433\u0440\u0443\u0437\u0438)\\s+(?:https?:\\\/\\\/)?([a-zA-Z0-9][a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}(?::\\d+)?(?:\\\/[\\w\\-.\/?%&amp;=]*)?)\/i,    \/^(?:\u043e\u0442\u043a\u0440\u043e\u0439|open)\\s+([\\w\\-]+(?:\\.[\\w\\-]+)+)\/i,  ];    for (const pattern of navPatterns) {    const match = text.match(pattern);    if (match) {      let url = match[1];      if (!url.startsWith('http')) url = 'https:\/\/' + url;      return {        thought: \"\",        tool: \"mcp_navigate\",  \/\/ \u0438\u043c\u044f \u0442\u0443\u043b\u0430 \u0438\u0437 MCP        args: { url }      };    }  }  \/\/ ... \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0430\u0440\u0441\u0438\u043d\u0433 JSON}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438, \u0444\u0440\u0430\u0437\u0430 \u00ab\u043e\u0442\u043a\u0440\u043e\u0439 \u044f\u043d\u0434\u0435\u043a\u0441\u00bb \u0430\u0433\u0435\u043d\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u0442\u0443\u043b\u0430, \u0430 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0435\u043a\u0441\u0442.<\/p>\n<h4>3. \u0410\u043b\u0438\u0430\u0441\u044b \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 (useChat.ts)<\/h4>\n<p>\u041a\u043e\u0433\u0434\u0430 MCP-\u0442\u0443\u043b\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f, \u044f \u043d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0435 \u0430\u043b\u0438\u0430\u0441\u044b:<\/p>\n<pre><code class=\"typescript\">for (const tool of server.tools) {  if (tool.isEnabled) {    toolkit[tool.name] = async (args) =&gt; {      return await mcpState.callTool(server.url, tool.name, args);    };        \/\/ \u0410\u043b\u0438\u0430\u0441\u044b \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439    if (tool.name.includes('navigate')) {      toolkit['open'] = toolkit[tool.name];      toolkit['goto'] = toolkit[tool.name];    }  }}<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0430\u043b\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u00abopen google.com\u00bb \u0432\u043c\u0435\u0441\u0442\u043e \u0434\u043b\u0438\u043d\u043d\u043e\u0433\u043e <code>chrome_devtools_navigate<\/code>.<\/p>\n<h4>4. \u0421\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0439 \u043f\u0440\u043e\u043c\u043f\u0442 \u0441 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c\u0438<\/h4>\n<p>\u0427\u0442\u043e\u0431\u044b LLM \u043f\u043e\u043d\u0438\u043c\u0430\u043b\u0430, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0442\u0443\u043b\u044b, \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0439 \u043f\u0440\u043e\u043c\u043f\u0442 \u0441\u0435\u043a\u0446\u0438\u044e:<\/p>\n<pre><code>BROWSER CONTROL TOOLS:\u2022 http___localhost_8080_mcp_navigate \u2014 OPEN ANY URL IN BROWSER.CRITICAL INSTRUCTIONS:- When user asks to \"open\", \"go to\", \"visit\", \"\u043e\u0442\u043a\u0440\u043e\u0439\", \"\u043f\u0435\u0440\u0435\u0439\u0434\u0438\" \u2014 use navigate tool IMMEDIATELY.- Do NOT respond with just a text link.- ALWAYS add https:\/\/ if not specified.<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<hr\/>\n<h3>\u041a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f<\/h3>\n<ol>\n<li>\n<p>\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0438\u0448\u0435\u0442: <em>\u00ab\u043e\u0442\u043a\u0440\u043e\u0439 \u0445\u0430\u0431\u0440\u00bb<\/em><\/p>\n<\/li>\n<li>\n<p>\u0410\u0433\u0435\u043d\u0442 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0451\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 MCP-\u0442\u0443\u043b <code>navigate<\/code><\/p>\n<\/li>\n<li>\n<p>Chrome \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0441 habr.com<\/p>\n<\/li>\n<li>\n<p>\u0410\u0433\u0435\u043d\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442: <em>\u00ab\u2713 \u041e\u0442\u043a\u0440\u044b\u043b <\/em><a href=\"https:\/\/habr.com\" rel=\"noopener noreferrer nofollow\"><em>https:\/\/habr.com<\/em><\/a><em>\u00bb<\/em><\/p>\n<\/li>\n<\/ol>\n<p>\u0412\u0441\u0451 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e. \u041d\u0438\u043a\u0430\u043a\u0438\u0445 \u043b\u0438\u0448\u043d\u0438\u0445 \u043a\u043b\u0438\u043a\u043e\u0432.<\/p>\n<hr\/>\n<p>\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/p>\n<p>\u0415\u0441\u0442\u044c \u0434\u0432\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043c\u043e\u0441\u0442 \u043c\u0435\u0436\u0434\u0443 n0x \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c Chrome:<\/p>\n<pre><code>n0x (\u0431\u0440\u0430\u0443\u0437\u0435\u0440) \u2192 supergateway (\u043f\u0440\u043e\u043a\u0441\u0438) \u2192 chrome-devtools-mcp \u2192 Chrome (\u0441 \u043e\u0442\u043b\u0430\u0434\u043a\u043e\u0439)<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u0434\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c Chrome \u0441 remote debugging<\/p>\n<pre><code class=\"bash\">chromium --remote-debugging-port=9222 --user-data-dir=\/tmp\/chrome-profile<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e Chrome \u0437\u0430\u043f\u0443\u0449\u0435\u043d \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e:<\/p>\n<pre><code class=\"bash\"># \u0412 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435curl http:\/\/localhost:9222\/json\/version<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0414\u0430\u043b\u044c\u0448\u0435 \u043d\u0430\u0434\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c supergateway \u0441 chrome-devtools-mcp<\/p>\n<pre><code class=\"bash\">npx supergateway --stdio \"npx chrome-devtools-mcp@latest --browser-url=http:\/\/127.0.0.1:9222\" \\  --port 8080 --outputTransport streamableHttp<\/code><div class=\"code-explainer\"><a href=\"https:\/\/sourcecraft.dev\/\" class=\"tm-button code-explainer__link\" style=\"visibility: hidden;\"><img style=\"width:14px;height:14px;object-fit:cover;object-position:left;\"\/><\/a><\/div><\/pre>\n<p>\u0418 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0443\u0442\u044c \u0432 MCP Tools <a href=\"http:\/\/localhost:8080\/mcp\" rel=\"noopener noreferrer nofollow\">http:\/\/localhost:8080\/mcp<\/a><\/p>\n<p>\u0412\u043e\u0442 \u0438 \u0432\u0441\u0435.<\/p>\n<h3>\u0427\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435?<\/h3>\n<p>\u0421\u0435\u0439\u0447\u0430\u0441 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 URL. \u041d\u043e MCP \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438:<\/p>\n<ul>\n<li>\n<p><strong>\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b<\/strong> \u2014 \u00ab\u0441\u0434\u0435\u043b\u0430\u0439 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\u00bb<\/p>\n<\/li>\n<li>\n<p><strong>\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 JS<\/strong> \u2014 \u00ab\u043d\u0430\u0439\u0434\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432\u0441\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 h1\u00bb<\/p>\n<\/li>\n<li>\n<p><strong>\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 DOM<\/strong> \u2014 \u00ab\u043a\u043b\u0438\u043a\u043d\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u201c\u0412\u043e\u0439\u0442\u0438\u201d\u00bb<\/p>\n<\/li>\n<li>\n<p><strong>\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0444\u043e\u0440\u043c<\/strong> \u2014 \u00ab\u0437\u0430\u043f\u043e\u043b\u043d\u0438 \u043f\u043e\u043b\u0435 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043b\u043e\u0432\u043e\u043c \u201cMCP\u201d\u00bb<\/p>\n<\/li>\n<\/ul>\n<p>\u0412 \u043f\u043b\u0430\u043d\u0430\u0445 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0433\u043e AI-\u0430\u0441\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u043e <em>\u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442<\/em> \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0430 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u0449\u0435\u043d\u0438\u0435.<\/p>\n<h3>\u0418\u0442\u043e\u0433<\/h3>\n<p>\u0417\u0430 \u043e\u0434\u0438\u043d \u0432\u0435\u0447\u0435\u0440 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432 n0x \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 MCP. \u041c\u043d\u0435 \u043f\u043e\u043d\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u0442\u043e, \u043d\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0430\u0433\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c. \u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u0447\u0442\u043e \u044f \u043f\u043e\u043d\u044f\u043b: <strong>MCP \u2014 \u044d\u0442\u043e \u043c\u043e\u0441\u0442 \u043c\u0435\u0436\u0434\u0443 LLM \u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u043c\u0438\u0440\u043e\u043c<\/strong>. \u0418 \u043e\u043d \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0415\u0441\u043b\u0438 \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c \u2014 \u0432\u0441\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u044b \u0432 <a href=\"https:\/\/github.com\/ZababurinSergei\/n0x\" rel=\"noopener noreferrer nofollow\">\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 n0x<\/a>.<\/p>\n<p><strong>\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438:<\/strong><\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/github.com\/ZababurinSergei\/n0x\" rel=\"noopener noreferrer nofollow\">n0x \u043d\u0430 GitHub<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/modelcontextprotocol.io\/specification\/2025-11-25\" rel=\"noopener noreferrer nofollow\">MCP Specification<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/ChromeDevTools\/chrome-devtools-mcp\" rel=\"noopener noreferrer nofollow\">chrome-devtools-mcp<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/github.com\/supercorp-ai\/supergateway\" rel=\"noopener noreferrer nofollow\">supergateway<\/a><\/p>\n<\/li>\n<\/ul>\n<\/div>\n<p>\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/1029300\/\">https:\/\/habr.com\/ru\/articles\/1029300\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 n0x \u0438 \u0437\u0430\u0447\u0435\u043c \u0435\u043c\u0443 MCPn0x \u2014 \u044d\u0442\u043e open-source AI-\u0432\u043e\u0440\u043a\u0441\u0442\u0435\u0439\u0448\u043d, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u043f\u043e\u043b\u043d\u043e\u0441\u0442\u044c\u044e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. LLM, RAG, Python-\u043f\u0435\u0441\u043e\u0447\u043d\u0438\u0446\u0430, \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u044f \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0439. \u0412\u0441\u0451 \u044d\u0442\u043e \u043a\u0440\u0443\u0442\u0438\u0442\u0441\u044f \u043d\u0430 WebGPU \u0438 WASM. \u041d\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440\u0430, \u043d\u0435\u0442 API-\u043a\u043b\u044e\u0447\u0435\u0439, \u0432\u0430\u0448\u0438 \u0434\u0430\u043d\u043d\u044b\u0435 \u043d\u0435 \u043f\u043e\u043a\u0438\u0434\u0430\u044e\u0442 \u0432\u0430\u0448 \u043a\u043e\u043c\u043f\u044c\u044e\u0442\u0435\u0440.\u041f\u0440\u043e\u0435\u043a\u0442 \u0443\u0436\u0435 \u0443\u043c\u0435\u0435\u0442 \u043c\u043d\u043e\u0433\u043e\u0435, \u043d\u043e \u0435\u0441\u0442\u044c \u043d\u044e\u0430\u043d\u0441: \u0430\u0433\u0435\u043d\u0442 \u043c\u043e\u0433 \u0442\u043e\u043b\u044c\u043a\u043e \u0431\u043e\u043b\u0442\u0430\u0442\u044c. \u041e\u043d \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0432\u043e\u0438 \u0432\u043d\u0443\u0442\u0440\u0435\u043d\u043d\u0438\u0435 \u0442\u0443\u043b\u044b (\u043f\u043e\u0438\u0441\u043a, Python, \u043f\u0430\u043c\u044f\u0442\u044c), \u043d\u043e \u043d\u0435 \u043c\u043e\u0436\u0435\u0442 \u0432\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0441 \u0432\u043d\u0435\u0448\u043d\u0438\u043c \u043c\u0438\u0440\u043e\u043c.\u0410 \u043c\u043d\u0435 \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430 \u0444\u0440\u0430\u0437\u0443 \u00ab\u043e\u0442\u043a\u0440\u043e\u0439 \u0425\u0430\u0431\u0440\u00bb \u043e\u043d \u043c\u043e\u0433 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u044c \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0441 habr.com.\u0422\u0430\u043a \u044f \u0440\u0435\u0448\u0438\u043b \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c MCP.\u0427\u0442\u043e \u0442\u0430\u043a\u043e\u0435 MCP (Model Context Protocol)MCP \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 LLM-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u043c \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0432\u043d\u0435\u0448\u043d\u0438\u0435 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u044b \u0447\u0435\u0440\u0435\u0437 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441. \u041f\u0440\u0438\u0434\u0443\u043c\u0430\u043d \u043e\u043d \u0431\u044b\u043b \u0432 Anthropic (\u0441\u043e\u0437\u0434\u0430\u0442\u0435\u043b\u0438 Claude), \u043d\u043e \u0441\u0442\u0430\u043b \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043e\u043c \u043f\u043e \u0432\u0441\u0435\u0439 \u044d\u043a\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435.\u0412\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u044d\u0442\u043e \u0442\u0430\u043a:[\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c] \u2192 [LLM] \u2192 [MCP Client] \u2192 [MCP Server] \u2192 [\u0418\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442]                     \u2193              \u0420\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044fMCP Server \u2014 \u044d\u0442\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u0435\u0434\u043e\u0441\u0442\u0430\u0432\u043b\u044f\u0435\u0442 \u043d\u0430\u0431\u043e\u0440 \u0442\u0443\u043b\u043e\u0432. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, chrome-devtools-mcp \u0434\u0430\u0451\u0442 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c: \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0442\u044c URL, \u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b, \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0442\u044c JS.LLM \u0432 \u043e\u0442\u0432\u0435\u0442\u0435 \u043f\u0438\u0448\u0435\u0442 \u0447\u0442\u043e-\u0442\u043e \u043d\u0430 \u043f\u043e\u0434\u043e\u0431\u0438\u0438:{&#171;tool&#187;: &#171;chrome_devtools_navigate&#187;, &#171;args&#187;: {&#171;url&#187;: &#171;https:\/\/habr.com&#187;}}MCP \u043a\u043b\u0438\u0435\u043d\u0442 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u044b\u0432\u0430\u0435\u0442 \u043e\u0431\u044a\u0435\u043a\u0442, \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0441\u0435\u0440\u0432\u0435\u0440, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u0442 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0438 \u043e\u0442\u0434\u0430\u0451\u0442 \u043e\u0431\u0440\u0430\u0442\u043d\u043e LLM \u0434\u043b\u044f \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0444\u0438\u043d\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u043e\u0442\u0432\u0435\u0442\u0430.\u043a\u0430\u043a \u044f \u0432\u0441\u0442\u0440\u043e\u0438\u043b MCP \u0432 n0x\u0412 n0x \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0441\u044f React + Zustand + Web Workers. MCP-\u043a\u043b\u0438\u0435\u043d\u0442 \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0432\u043e\u0440\u043a\u0435\u0440\u0435, \u0447\u0442\u043e\u0431\u044b \u043d\u0435 \u0431\u043b\u043e\u043a\u0438\u0440\u043e\u0432\u0430\u0442\u044c UI.\u0412\u043e\u0442 \u0441\u0445\u0435\u043c\u0430:\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u2502                         UI (React)                          \u2502\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502  \u2502 ChatInput   \u2502  \u2502 AgentTrace  \u2502  \u2502 McpToolDrawer       \u2502 \u2502\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518          \u2502                \u2502                    \u2502          \u25bc                \u25bc                    \u25bc\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u2502                      Zustand Store                          \u2502\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502  \u2502                    useAgent.ts                         \u2502 \u2502\u2502  \u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510  \u2502 \u2502\u2502  \u2502  \u2502 parseToolCall\u2502  \u2502 executeTool  \u2502  \u2502 buildPrompt \u2502  \u2502 \u2502\u2502  \u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2518  \u2502 \u2502\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\u2502            \u2502                  \u2502                  \u2502          \u2502\u2502            \u25bc                  \u25bc                  \u25bc          \u2502\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502  \u2502                    useMCP.ts                           \u2502 \u2502\u2502  \u2502         (Zustand store + Worker communication)        \u2502 \u2502\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518                             \u2502                             \u25bc\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u2502                      Web Worker                             \u2502\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502  \u2502                   mcp.worker.ts                        \u2502 \u2502\u2502  \u2502  \u2022 Client (StreamableHTTPClientTransport)             \u2502 \u2502\u2502  \u2502  \u2022 Tool registration &amp; state management               \u2502 \u2502\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518                             \u2502                             \u25bc\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u2502                      MCP Server                             \u2502\u2502  \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510 \u2502\u2502  \u2502   chrome-devtools-mcp + supergateway                  \u2502 \u2502\u2502  \u2502   (\u043e\u0442\u0434\u0435\u043b\u044c\u043d\u044b\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u043d\u0430 localhost:8080\/mcp)          \u2502 \u2502\u2502  \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518 \u2502\u041a\u0430\u0436\u0434\u044b\u0439 \u0443\u0440\u043e\u0432\u0435\u043d\u044c \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442 \u0437\u0430 \u0441\u0432\u043e\u0451:UI \u2014 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442 \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0442\u0443\u043b\u0430\u043c\u0438 (McpToolDrawer)useAgent.ts \u2014 \u043f\u0430\u0440\u0441\u0438\u0442 \u043e\u0442\u0432\u0435\u0442\u044b LLM \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 \u0442\u0443\u043b\u044buseMCP.ts \u2014 Zustand-\u0445\u0440\u0430\u043d\u0438\u043b\u0438\u0449\u0435 \u0438 \u043a\u043e\u043c\u043c\u0443\u043d\u0438\u043a\u0430\u0446\u0438\u044f \u0441 \u0432\u043e\u0440\u043a\u0435\u0440\u043e\u043cmcp.worker.ts \u2014 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u0435 HTTP-\u0437\u0430\u043f\u0440\u043e\u0441\u044b \u043a MCP-\u0441\u0435\u0440\u0432\u0435\u0440\u0443MCP Server \u2014 \u0432\u043d\u0435\u0448\u043d\u0438\u0439 \u043f\u0440\u043e\u0446\u0435\u0441\u0441 (chrome-devtools-mcp)\u041a\u043b\u044e\u0447\u0435\u0432\u044b\u0435 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u044b \u043a\u043e\u0434\u04301. \u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435 \u043a MCP-\u0441\u0435\u0440\u0432\u0435\u0440\u0443 (mcp.worker.ts)async function connectToServer(url: string) {  const serverUrl = new URL(url);  const transport = new StreamableHTTPClientTransport(serverUrl);  const client = new Client({    name: &#171;n0x-mcp-client&#187;,    version: &#171;1.0.0&#187;  });    await client.connect(transport);  const { tools } = await client.listTools();    return { client, tools };}\u041d\u0438\u0447\u0435\u0433\u043e \u0441\u043b\u043e\u0436\u043d\u043e\u0433\u043e \u2014 \u0441\u043e\u0437\u0434\u0430\u0451\u043c \u0442\u0440\u0430\u043d\u0441\u043f\u043e\u0440\u0442, \u043f\u043e\u0434\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u043a\u043b\u0438\u0435\u043d\u0442, \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u0441\u043f\u0438\u0441\u043e\u043a \u0442\u0443\u043b\u043e\u0432.2. \u041f\u0430\u0440\u0441\u0438\u043d\u0433 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u043a\u043e\u043c\u0430\u043d\u0434 (useAgent.ts)\u0421\u0430\u043c\u043e\u0435 \u0438\u043d\u0442\u0435\u0440\u0435\u0441\u043d\u043e\u0435 \u0434\u043b\u044f \u043c\u0435\u043d\u044f \u0431\u044b\u043b\u043e \u2014 \u043d\u0430\u0443\u0447\u0438\u0442\u044c LLM \u043f\u043e\u043d\u0438\u043c\u0430\u0442\u044c \u0435\u0441\u0442\u0435\u0441\u0442\u0432\u0435\u043d\u043d\u044b\u0439 \u044f\u0437\u044b\u043a:function parseToolCall(text: string) {  \/\/ \u041f\u0430\u0442\u0442\u0435\u0440\u043d\u044b \u0434\u043b\u044f \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0432\u0430\u043d\u0438\u044f \u043a\u043e\u043c\u0430\u043d\u0434 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438  const navPatterns = [    \/(?:\u043e\u0442\u043a\u0440\u043e\u0439|open|goto|\u043f\u0435\u0440\u0435\u0439\u0434\u0438|\u0437\u0430\u0433\u0440\u0443\u0437\u0438)\\s+(?:https?:\\\/\\\/)?([a-zA-Z0-9][a-zA-Z0-9.-]+\\.[a-zA-Z]{2,}(?::\\d+)?(?:\\\/[\\w\\-.\/?%&amp;=]*)?)\/i,    \/^(?:\u043e\u0442\u043a\u0440\u043e\u0439|open)\\s+([\\w\\-]+(?:\\.[\\w\\-]+)+)\/i,  ];    for (const pattern of navPatterns) {    const match = text.match(pattern);    if (match) {      let url = match[1];      if (!url.startsWith(&#8216;http&#8217;)) url = &#8216;https:\/\/&#8217; + url;      return {        thought: &#171;&#187;,        tool: &#171;mcp_navigate&#187;,  \/\/ \u0438\u043c\u044f \u0442\u0443\u043b\u0430 \u0438\u0437 MCP        args: { url }      };    }  }  \/\/ &#8230; \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043f\u0430\u0440\u0441\u0438\u043d\u0433 JSON}\u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u044d\u0442\u043e\u0439 \u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438, \u0444\u0440\u0430\u0437\u0430 \u00ab\u043e\u0442\u043a\u0440\u043e\u0439 \u044f\u043d\u0434\u0435\u043a\u0441\u00bb \u0430\u0433\u0435\u043d\u0442 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0441\u0442\u0440\u0443\u043a\u0442\u0443\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0439 \u0432\u044b\u0437\u043e\u0432 \u0442\u0443\u043b\u0430, \u0430 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u0442\u0435\u043a\u0441\u0442.3. \u0410\u043b\u0438\u0430\u0441\u044b \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 (useChat.ts)\u041a\u043e\u0433\u0434\u0430 MCP-\u0442\u0443\u043b\u044b \u0437\u0430\u0433\u0440\u0443\u0436\u0430\u044e\u0442\u0441\u044f, \u044f \u043d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439 \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u043a\u043e\u0440\u043e\u0442\u043a\u0438\u0435 \u0430\u043b\u0438\u0430\u0441\u044b:for (const tool of server.tools) {  if (tool.isEnabled) {    toolkit[tool.name] = async (args) =&gt; {      return await mcpState.callTool(server.url, tool.name, args);    };        \/\/ \u0410\u043b\u0438\u0430\u0441\u044b \u0434\u043b\u044f \u0443\u0434\u043e\u0431\u0441\u0442\u0432\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439    if (tool.name.includes(&#8216;navigate&#8217;)) {      toolkit[&#8216;open&#8217;] = toolkit[tool.name];      toolkit[&#8216;goto&#8217;] = toolkit[tool.name];    }  }}\u041f\u043e\u0441\u043b\u0435 \u044d\u0442\u043e\u0433\u043e \u0441\u0442\u0430\u043b\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0438\u0441\u0430\u0442\u044c \u00abopen google.com\u00bb \u0432\u043c\u0435\u0441\u0442\u043e \u0434\u043b\u0438\u043d\u043d\u043e\u0433\u043e chrome_devtools_navigate.4. \u0421\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0439 \u043f\u0440\u043e\u043c\u043f\u0442 \u0441 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c\u0438\u0427\u0442\u043e\u0431\u044b LLM \u043f\u043e\u043d\u0438\u043c\u0430\u043b\u0430, \u043a\u043e\u0433\u0434\u0430 \u043d\u0430\u0434\u043e \u0432\u044b\u0437\u044b\u0432\u0430\u0442\u044c \u0442\u0443\u043b\u044b, \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u043d\u044b\u0439 \u043f\u0440\u043e\u043c\u043f\u0442 \u0441\u0435\u043a\u0446\u0438\u044e:BROWSER CONTROL TOOLS:\u2022 http___localhost_8080_mcp_navigate \u2014 OPEN ANY URL IN BROWSER.CRITICAL INSTRUCTIONS:- When user asks to &#171;open&#187;, &#171;go to&#187;, &#171;visit&#187;, &#171;\u043e\u0442\u043a\u0440\u043e\u0439&#187;, &#171;\u043f\u0435\u0440\u0435\u0439\u0434\u0438&#187; \u2014 use navigate tool IMMEDIATELY.- Do NOT respond with just a text link.- ALWAYS add https:\/\/ if not specified.\u041a\u0430\u043a \u044d\u0442\u043e \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043e \u0441\u0442\u043e\u0440\u043e\u043d\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u041f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043f\u0438\u0448\u0435\u0442: \u00ab\u043e\u0442\u043a\u0440\u043e\u0439 \u0445\u0430\u0431\u0440\u00bb\u0410\u0433\u0435\u043d\u0442 \u0440\u0430\u0441\u043f\u043e\u0437\u043d\u0430\u0451\u0442 \u043a\u043e\u043c\u0430\u043d\u0434\u0443 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 MCP-\u0442\u0443\u043b navigateChrome \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043d\u043e\u0432\u0443\u044e \u0432\u043a\u043b\u0430\u0434\u043a\u0443 \u0441 habr.com\u0410\u0433\u0435\u043d\u0442 \u043e\u0442\u0432\u0435\u0447\u0430\u0435\u0442: \u00ab\u2713 \u041e\u0442\u043a\u0440\u044b\u043b https:\/\/habr.com\u00bb\u0412\u0441\u0451 \u043f\u0440\u043e\u0438\u0441\u0445\u043e\u0434\u0438\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u044b\u0441\u0442\u0440\u043e. \u041d\u0438\u043a\u0430\u043a\u0438\u0445 \u043b\u0438\u0448\u043d\u0438\u0445 \u043a\u043b\u0438\u043a\u043e\u0432.\u041f\u043e\u0434\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435\u0415\u0441\u0442\u044c \u0434\u0432\u0430 \u043f\u0440\u043e\u0446\u0435\u0441\u0441\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u043c\u0435\u0441\u0442\u0435 \u0441\u043e\u0437\u0434\u0430\u044e\u0442 \u043c\u043e\u0441\u0442 \u043c\u0435\u0436\u0434\u0443 n0x \u0438 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c Chrome:n0x (\u0431\u0440\u0430\u0443\u0437\u0435\u0440) \u2192 supergateway (\u043f\u0440\u043e\u043a\u0441\u0438) \u2192 chrome-devtools-mcp \u2192 Chrome (\u0441 \u043e\u0442\u043b\u0430\u0434\u043a\u043e\u0439)\u0414\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u043d\u0430\u0434\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c Chrome \u0441 remote debuggingchromium &#8212;remote-debugging-port=9222 &#8212;user-data-dir=\/tmp\/chrome-profile\u041f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c, \u0447\u0442\u043e Chrome \u0437\u0430\u043f\u0443\u0449\u0435\u043d \u043f\u0440\u0430\u0432\u0438\u043b\u044c\u043d\u043e:# \u0412 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u043c \u0442\u0435\u0440\u043c\u0438\u043d\u0430\u043b\u0435curl http:\/\/localhost:9222\/json\/version\u0414\u0430\u043b\u044c\u0448\u0435 \u043d\u0430\u0434\u043e \u0437\u0430\u043f\u0443\u0441\u0442\u0438\u0442\u044c supergateway \u0441 chrome-devtools-mcpnpx supergateway &#8212;stdio &#171;npx chrome-devtools-mcp@latest &#8212;browser-url=http:\/\/127.0.0.1:9222&#187; \\  &#8212;port 8080 &#8212;outputTransport streamableHttp\u0418 \u0443\u043a\u0430\u0437\u0430\u0442\u044c \u043f\u0443\u0442\u044c \u0432 MCP Tools http:\/\/localhost:8080\/mcp\u0412\u043e\u0442 \u0438 \u0432\u0441\u0435.\u0427\u0442\u043e \u0434\u0430\u043b\u044c\u0448\u0435?\u0421\u0435\u0439\u0447\u0430\u0441 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0442\u043e\u043b\u044c\u043a\u043e \u043e\u0442\u043a\u0440\u044b\u0442\u0438\u0435 URL. \u041d\u043e MCP \u043e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u043e\u0433\u0440\u043e\u043c\u043d\u044b\u0435 \u0432\u043e\u0437\u043c\u043e\u0436\u043d\u043e\u0441\u0442\u0438:\u0421\u043a\u0440\u0438\u043d\u0448\u043e\u0442\u044b \u2014 \u00ab\u0441\u0434\u0435\u043b\u0430\u0439 \u0441\u043a\u0440\u0438\u043d\u0448\u043e\u0442 \u0442\u0435\u043a\u0443\u0449\u0435\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b\u00bb\u0412\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 JS \u2014 \u00ab\u043d\u0430\u0439\u0434\u0438 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 \u0432\u0441\u0435 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0438 h1\u00bb\u0412\u0437\u0430\u0438\u043c\u043e\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0435 \u0441 DOM \u2014 \u00ab\u043a\u043b\u0438\u043a\u043d\u0438 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0443 \u201c\u0412\u043e\u0439\u0442\u0438\u201d\u00bb\u0417\u0430\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0444\u043e\u0440\u043c \u2014 \u00ab\u0437\u0430\u043f\u043e\u043b\u043d\u0438 \u043f\u043e\u043b\u0435 \u043f\u043e\u0438\u0441\u043a\u0430 \u0441\u043b\u043e\u0432\u043e\u043c \u201cMCP\u201d\u00bb\u0412 \u043f\u043b\u0430\u043d\u0430\u0445 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043f\u043e\u043b\u043d\u043e\u0446\u0435\u043d\u043d\u043e\u0433\u043e AI-\u0430\u0441\u0441\u0438\u0441\u0442\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0440\u0435\u0430\u043b\u044c\u043d\u043e \u0440\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435, \u0430 \u043d\u0435 \u043f\u0440\u043e\u0441\u0442\u043e \u043e\u0431\u0449\u0435\u043d\u0438\u0435.\u0418\u0442\u043e\u0433\u0417\u0430 \u043e\u0434\u0438\u043d \u0432\u0435\u0447\u0435\u0440 \u044f \u0434\u043e\u0431\u0430\u0432\u0438\u043b \u0432 n0x \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443 MCP. \u041c\u043d\u0435 \u043f\u043e\u043d\u0430\u0432\u0438\u043b\u043e\u0441\u044c \u0442\u043e, \u043d\u0430 \u0441\u043a\u043e\u043b\u044c\u043a\u043e \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0430\u0433\u0435\u043d\u0442\u0430, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u0435\u0442 \u0443\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u043e\u043c. \u0413\u043b\u0430\u0432\u043d\u043e\u0435 \u0447\u0442\u043e \u044f \u043f\u043e\u043d\u044f\u043b: MCP \u2014 \u044d\u0442\u043e \u043c\u043e\u0441\u0442 \u043c\u0435\u0436\u0434\u0443 LLM \u0438 \u0440\u0435\u0430\u043b\u044c\u043d\u044b\u043c \u043c\u0438\u0440\u043e\u043c. \u0418 \u043e\u043d \u0443\u0436\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442 \u043f\u0440\u044f\u043c\u043e \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435. \u0415\u0441\u043b\u0438 \u0437\u0430\u0445\u043e\u0442\u0438\u0442\u0435 \u043f\u043e\u0432\u0442\u043e\u0440\u0438\u0442\u044c \u2014 \u0432\u0441\u0435 \u0438\u0441\u0445\u043e\u0434\u043d\u0438\u043a\u0438 \u043e\u0442\u043a\u0440\u044b\u0442\u044b \u0432 \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0438 n0x.\u041f\u043e\u043b\u0435\u0437\u043d\u044b\u0435 \u0441\u0441\u044b\u043b\u043a\u0438:n0x \u043d\u0430 GitHubMCP Specificationchrome-devtools-mcpsupergateway\u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 https:\/\/habr.com\/ru\/articles\/1029300\/<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-477839","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/477839","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=477839"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/477839\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=477839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=477839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=477839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}