@xiaou66/vite-plugin-vue-mcp-next 0.0.1 → 0.0.3

package/README.md

@@ -28,33 +28,34 @@ pnpm add -D @xiaou66/vite-plugin-vue-mcp-next
 ```ts
 import vue from '@vitejs/plugin-vue'
 import { defineConfig } from 'vite'
-import vueMcpNext from 'vite-plugin-vue-mcp-next'
+import vueMcpNext from '@xiaou66/vite-plugin-vue-mcp-next'
 
 export default defineConfig({
   plugins: [vue(), vueMcpNext()]
 })
 ```
 
-启动 Vite 后，默认 MCP SSE 入口为：
+启动 Vite 后，默认会暴露两个 MCP 入口：
 
 ```text
-http://localhost:<vite-port>/__mcp/sse
+SSE: http://localhost:<vite-port>/__mcp/sse
+Streamable HTTP: http://localhost:<vite-port>/__mcp/mcp
 ```
 
-启动 Vite dev server 后，插件会自动写入常见 AI 客户端的项目级 MCP 配置，服务名默认是 `vue-mcp-next`。自动配置只新增或更新本插件的 server 条目，不会删除已有 MCP Server。
+启动 Vite dev server 后，插件会自动写入常见 AI 客户端的项目级 MCP 配置，服务名默认是 `vue-mcp-next`。自动配置只会在缺少同名 server 条目时新增配置；如果用户已经配置了 `vue-mcp-next`，插件不会重复写入或覆盖原配置。
 
-| 客户端 | 自动配置文件 |
-|---|---|
-| Cursor | `.cursor/mcp.json` |
-| Codex | `.codex/config.toml` |
-| Claude Code | `.mcp.json` |
-| Trae | `.trae/mcp.json` |
+| 客户端 | 自动配置文件 | 默认端点 |
+|---|---|---|
+| Cursor | `.cursor/mcp.json` | SSE |
+| Codex | `.codex/config.toml` | Streamable HTTP |
+| Claude Code | `.mcp.json` | SSE |
+| Trae | `.trae/mcp.json` | SSE |
 
-实际端口以启动日志中的 `MCP: Server is running at ...` 为准。
+实际端口以启动日志中的 `MCP: SSE server is running at ...` 和 `MCP: Streamable HTTP server is running at ...` 为准。
 
 ### 手动配置 MCP 客户端
 
-如果你不想使用自动配置，或需要把地址复制到其他支持 HTTP MCP 的客户端，可以手动配置当前 Vite dev server 的 SSE 地址。
+如果你不想使用自动配置，或需要把地址复制到其他支持 HTTP MCP 的客户端，可以手动配置当前 Vite dev server 的 MCP 地址。
 
 Cursor、Claude Code、Trae 等 JSON 配置客户端可以使用：
 
@@ -62,6 +63,7 @@ Cursor、Claude Code、Trae 等 JSON 配置客户端可以使用：
 {
   "mcpServers": {
     "vue-mcp-next": {
+      "type": "sse",
       "url": "http://localhost:5173/__mcp/sse"
     }
   }
@@ -72,7 +74,7 @@ Codex 使用 TOML 配置：
 
 ```toml
 [mcp_servers.vue-mcp-next]
-url = "http://localhost:5173/__mcp/sse"
+url = "http://localhost:5173/__mcp/mcp"
 ```
 
 `5173` 是示例端口。若 Vite 使用了其他端口，请替换为启动日志中打印的 MCP 地址。
@@ -128,7 +130,7 @@ vueMcpNext({
 
 | 配置 | 类型 | 默认值 | 说明 |
 |---|---|---|---|
-| `mcpPath` | `string` | `'/__mcp'` | MCP 服务挂载路径，实际 SSE 地址是 `${mcpPath}/sse` |
+| `mcpPath` | `string` | `'/__mcp'` | MCP 服务挂载路径，实际 SSE 地址是 `${mcpPath}/sse`，Streamable HTTP 地址是 `${mcpPath}/mcp` |
 | `host` | `string` | `'localhost'` | 打印 MCP 地址和写入 MCP 客户端配置时使用的 host |
 | `printUrl` | `boolean` | `true` | 是否在 Vite 启动日志中打印 MCP SSE 地址 |
 | `mcpClients` | `{ cursor?: boolean; codex?: boolean; claudeCode?: boolean; trae?: boolean; serverName?: string }` | 全部启用 | 是否自动写入 Cursor、Codex、Claude Code、Trae 的项目级 MCP 配置 |
@@ -366,7 +368,8 @@ pnpm run play
 
 ```text
 Local: http://localhost:3456/
-MCP: Server is running at http://localhost:3456/__mcp/sse
+MCP: SSE server is running at http://localhost:3456/__mcp/sse
+MCP: Streamable HTTP server is running at http://localhost:3456/__mcp/mcp
 ```
 
 当前 playground 页面入口为：

package/dist/index.cjs

@@ -846,18 +846,39 @@ function createMcpServer(ctx, vite) {
 
 // src/mcp/transport.ts
 var import_sse = require("@modelcontextprotocol/sdk/server/sse.js");
-function setupMcpTransport(base, server, vite) {
+var import_streamableHttp = require("@modelcontextprotocol/sdk/server/streamableHttp.js");
+function setupMcpTransport(base, createServer, vite) {
   const transports = /* @__PURE__ */ new Map();
   vite.middlewares.use(`${base}/sse`, (_req, res) => {
     const transport = new import_sse.SSEServerTransport(`${base}/messages`, res);
-    transports.set(transport.sessionId, transport);
+    const server = createServer();
+    transports.set(transport.sessionId, { server, transport });
     res.on("close", () => {
       transports.delete(transport.sessionId);
+      void server.close();
     });
     void server.connect(transport).catch((error) => {
       res.destroy(error instanceof Error ? error : new Error(String(error)));
     });
   });
+  vite.middlewares.use(`${base}/mcp`, (req, res) => {
+    if (req.method !== "POST") {
+      res.statusCode = 405;
+      res.end("Method Not Allowed");
+      return;
+    }
+    const transport = new import_streamableHttp.StreamableHTTPServerTransport({
+      sessionIdGenerator: void 0
+    });
+    const server = createServer();
+    res.on("close", () => {
+      void transport.close();
+      void server.close();
+    });
+    void server.connect(transport).then(() => transport.handleRequest(req, res)).catch((error) => {
+      res.destroy(error instanceof Error ? error : new Error(String(error)));
+    });
+  });
   vite.middlewares.use(`${base}/messages`, (req, res) => {
     if (req.method !== "POST") {
       res.statusCode = 405;
@@ -871,13 +892,13 @@ function setupMcpTransport(base, server, vite) {
       res.end("Bad Request");
       return;
     }
-    const transport = transports.get(sessionId);
-    if (!transport) {
+    const entry = transports.get(sessionId);
+    if (!entry) {
       res.statusCode = 404;
       res.end("Not Found");
       return;
     }
-    void transport.handlePostMessage(req, res).catch((error) => {
+    void entry.transport.handlePostMessage(req, res).catch((error) => {
       res.destroy(error instanceof Error ? error : new Error(String(error)));
     });
   });
@@ -1195,7 +1216,7 @@ function createRuntimeInjectionController(options, getConfig) {
       if (id !== RESOLVED_VIRTUAL_RUNTIME_ID) {
         return void 0;
       }
-      return "import { startRuntimeClient } from 'vite-plugin-vue-mcp-next/runtime/client';\nvoid startRuntimeClient();";
+      return "import { startRuntimeClient } from '@xiaou66/vite-plugin-vue-mcp-next/runtime/client';\nvoid startRuntimeClient();";
     },
     transformIndexHtml(html) {
       if (options.appendTo) {
@@ -1253,7 +1274,7 @@ function replaceOrAppendOwnedBlock(current, options) {
   const block = createCodexServerBlock(options);
   const matcher = createOwnedBlockMatcher(options.serverName);
   if (matcher.test(current)) {
-    return current.replace(matcher, block);
+    return ensureTrailingNewline(current);
   }
   const separator = current.trim() ? "\n\n" : "";
   return `${trimEndNewline(current)}${separator}${block}`;
@@ -1295,6 +1316,10 @@ async function readOptionalTextFile(filePath) {
 function trimEndNewline(value) {
   return value.replace(/\n+$/u, "");
 }
+function ensureTrailingNewline(value) {
+  return value.endsWith("\n") ? value : `${value}
+`;
+}
 function escapeRegExp(value) {
   return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
@@ -1316,7 +1341,10 @@ async function updateJsonMcpClientConfig(options) {
       return;
     }
     const mcpServers = isPlainRecord(config.mcpServers) ? config.mcpServers : {};
-    mcpServers[options.serverName] = { url: options.mcpUrl };
+    if (Object.hasOwn(mcpServers, options.serverName)) {
+      return;
+    }
+    mcpServers[options.serverName] = { type: "sse", url: options.mcpUrl };
     config.mcpServers = mcpServers;
     await import_promises2.default.mkdir(import_node_path3.default.dirname(options.configPath), { recursive: true });
     await import_promises2.default.writeFile(
@@ -1361,7 +1389,7 @@ function isNodeError2(error) {
 }
 
 // src/plugin/mcpClientConfig/index.ts
-async function updateMcpClientConfigs(root, mcpUrl, options) {
+async function updateMcpClientConfigs(root, sseUrl, streamableHttpUrl, options) {
   const serverName = options.serverName;
   const jobs = [];
   if (options.cursor) {
@@ -1369,7 +1397,7 @@ async function updateMcpClientConfigs(root, mcpUrl, options) {
       updateJsonMcpClientConfig({
         clientName: "Cursor",
         configPath: import_node_path4.default.join(root, ".cursor", "mcp.json"),
-        mcpUrl,
+        mcpUrl: sseUrl,
         serverName
       })
     );
@@ -1378,7 +1406,7 @@ async function updateMcpClientConfigs(root, mcpUrl, options) {
     jobs.push(
       updateCodexMcpClientConfig({
         configPath: import_node_path4.default.join(root, ".codex", "config.toml"),
-        mcpUrl,
+        mcpUrl: streamableHttpUrl,
         serverName
       })
     );
@@ -1388,7 +1416,7 @@ async function updateMcpClientConfigs(root, mcpUrl, options) {
       updateJsonMcpClientConfig({
         clientName: "Claude Code",
         configPath: import_node_path4.default.join(root, ".mcp.json"),
-        mcpUrl,
+        mcpUrl: sseUrl,
         serverName
       })
     );
@@ -1398,7 +1426,7 @@ async function updateMcpClientConfigs(root, mcpUrl, options) {
       updateJsonMcpClientConfig({
         clientName: "Trae",
         configPath: import_node_path4.default.join(root, ".trae", "mcp.json"),
-        mcpUrl,
+        mcpUrl: sseUrl,
         serverName
       })
     );
@@ -1434,8 +1462,11 @@ function vueMcpNext(userOptions = {}) {
           timeout: -1
         }
       );
-      const mcpServer = createMcpServer(ctx, server);
-      setupMcpTransport(options.mcpPath, mcpServer, server);
+      setupMcpTransport(
+        options.mcpPath,
+        () => createMcpServer(ctx, server),
+        server
+      );
       server.ws.on(
         "vite-plugin-vue-mcp-next:page-connected",
         (payload) => {
@@ -1462,12 +1493,21 @@ function vueMcpNext(userOptions = {}) {
         }
       );
       const port = String(server.config.server.port || 5173);
-      const mcpUrl = `http://${options.host}:${port}${options.mcpPath}/sse`;
+      const mcpSseUrl = `http://${options.host}:${port}${options.mcpPath}/sse`;
+      const mcpStreamableHttpUrl = `http://${options.host}:${port}${options.mcpPath}/mcp`;
       const root = (0, import_vite2.searchForWorkspaceRoot)(server.config.root);
-      await updateMcpClientConfigs(root, mcpUrl, options.mcpClients);
+      await updateMcpClientConfigs(
+        root,
+        mcpSseUrl,
+        mcpStreamableHttpUrl,
+        options.mcpClients
+      );
       if (options.printUrl) {
         setTimeout(() => {
-          console.log(`  \u279C  MCP:     Server is running at ${mcpUrl}`);
+          console.log(`  \u279C  MCP:     SSE server is running at ${mcpSseUrl}`);
+          console.log(
+            `  \u279C  MCP:     Streamable HTTP server is running at ${mcpStreamableHttpUrl}`
+          );
         }, 300);
       }
       server.httpServer?.once("close", () => {