vite插件终端mcp

](https://www.npmjs.com/package/vite-plugin-terminal-mcp)

使用浏览器登录节点终端 MCP（模型上下文协议）服务器集成 AI助手。

这是一把叉子 vite插件终端添加了MCP服务器支持，允许Claude、Cursor和Windsurf等AI助手实时查询浏览器控制台日志。

![](https://github.com/kiwina/vite-plugin-terminal-mcp/blob/main/vite-plugin-terminal-mcp.png)

特性

🖥️ 从浏览器登录到终端
🤖 MCP服务器 用于AI助手集成
🔍 通过MCP工具查询控制台日志
⚛️ 适用于React、Vue、Svelte和所有框架
🎯 零配置-开箱即用
🌲 生产中可摇动的树

安装

npm i -D vite-plugin-terminal-mcp

可选：安装MCP依赖项

对于MCP服务器支持（AI助手集成）：

npm i @modelcontextprotocol/sdk zod pathe

快速开始

将插件添加到您的 vite.config.ts:

// vite.config.ts
import Terminal from 'vite-plugin-terminal-mcp'

export default {
  plugins: [
    Terminal()
  ]
}

配备MCP服务器（适用于AI助手）

// vite.config.ts
import Terminal from 'vite-plugin-terminal-mcp'

export default {
  plugins: [
    Terminal({
      console: 'terminal',
      mcp: {
        maxLogs: 1000,
        printUrl: true,
        updateConfig: ['cursor'], // Auto-update Cursor MCP config
        serverName: 'my-app-terminal',
      }
    })
  ]
}

用法

在源代码导入中 terminal，并像使用它一样使用它 console.log.

import { terminal } from 'virtual:terminal'

terminal.log('Hey terminal! A message from the browser')

构建应用程序时，终端日志调用将被删除。

类型

有两种方法可以告诉typescript虚拟导入的类型：

在你的 global.d.ts file添加以下行：

///

在你的 tsconfig.json 将以下内容添加到您的 compilerOptions.types 数组：

  {
    "compilerOptions": {
      "types": [
        "vite-plugin-terminal-mcp/client"
      ]
    }
  }

在你的 tsconfig.json 将以下内容添加到您的 compilerOptions.types 数组：

  {
    // ...
    "compilerOptions": {
      // ...
      "types": [
        "vite-plugin-terminal-mcp/client"
      ]
    }
  }

API

支持的方法：

terminal.log(obj1 [, obj2, ..., objN])
terminal.info(obj1 [, obj2, ..., objN])
terminal.warn(obj1 [, obj2, ..., objN])
terminal.error(obj1 [, obj2, ..., objN])
terminal.assert(assertion, obj1 [, obj2, ..., objN])
terminal.group()
terminal.groupCollapsed()
terminal.groupEnd()
terminal.table(obj)
terminal.time(id)
terminal.timeLog(id, obj1 [, obj2, ..., objN])
terminal.timeEnd(id)
terminal.clear()
terminal.count(label)
terminal.countReset(label)
terminal.dir(obj)
terminal.dirxml(obj)

这些方法将工作，但使用控制台

terminal.trace(...args: any[])
terminal.profile(...args: any[])
terminal.profileEnd(...args: any[])

重定向 `console` 登录到终端

如果你想要标准 console 日志显示在终端中，您可以使用 console: 'terminal' 您的选项 vite.config.ts:

// vite.config.ts
import Terminal from 'vite-plugin-terminal-mcp'

export default {
  plugins: [
    Terminal({
      console: 'terminal'
    })
  ]
}

在这种情况下，您不需要导入虚拟终端来使用插件。

console.log('Hey terminal! A message from the browser')

您也可以在您的 index.html 手动控制头部，以防您需要更多控制。

  
    // Redirect console logs to the terminal
    import terminal from 'virtual:terminal'
    globalThis.console = terminal

检查控制台游乐场举个完整的例子。

同时登录终端和控制台

您可以使用 output 选项来定义 terminal 应记录日志。接受 terminal, console，或两者都有的数组。

// vite.config.ts
import Terminal from 'vite-plugin-terminal-mcp'

export default {
  plugins: [
    Terminal({
      output: ['terminal', 'console']
    })
  ]
}

框架示例

反应

// vite.config.ts
import react from '@vitejs/plugin-react'
import Terminal from 'vite-plugin-terminal-mcp'

export default {
  plugins: [
    react(),
    Terminal({
      console: 'terminal',
      mcp: {
        maxLogs: 1000,
        printUrl: true,
        updateConfig: ['cursor'],
        serverName: 'my-react-app',
      }
    })
  ]
}

// App.tsx
import { terminal } from 'virtual:terminal'

function App() {
  const handleClick = () => {
    terminal.log('Button clicked!')
    terminal.error('Simulated error for debugging')
  }

  return Test Terminal
}

Vue

// vite.config.ts
import vue from '@vitejs/plugin-vue'
import Terminal from 'vite-plugin-terminal-mcp'

export default {
  plugins: [
    vue(),
    Terminal({ console: 'terminal' })
  ]
}

原生 JavaScript

import { terminal } from 'virtual:terminal'

terminal.log('Hello from vanilla JS!')

操场

基础 -使用所有可用方法的Vanilla JS
控制台 -将标准控制台日志重定向到终端
Vue -Vue 3示例
反应 -使用MCP的React 18示例

选项

`console`

类型： 'terminal' | undefined

违约： undefined

吃起来 'terminal' 制造 globalThis.console 等于 terminal 应用程序中的对象。

`output`

类型： 'terminal' | 'console' | ['terminal', 'console']

违约： terminal

定义日志的输出位置。

`strip`

类型： boolean

违约： true

脱衣 terminal.*() 在捆绑生产时。

`include`

类型： String | RegExp | Array[...String|RegExp]

违约： /.+\.(js|ts|mjs|cjs|mts|cts)/

例子： include: '**/*.(mjs|js)',

一个模式或一组模式，指定插件在删除生产调用时应操作的构建文件。

`exclude`

类型： String | RegExp | Array[...String|RegExp]

违约： []

例子： exlude: 'tests/**/*',

一个模式或一组模式，用于指定插件构建中的文件 _忽略_ 在删除生产呼叫时。

`mcp`

类型： boolean | MCPOptions

违约： false

启用MCP（模型上下文协议）服务器以集成AI助手。吃起来 true 对于默认值或使用对象进行配置：

{
  mcp: {
    maxLogs: 1000,              // Max logs to store in memory
    mcpPath: '/__terminal_mcp', // MCP endpoint path
    printUrl: true,             // Print MCP URL on startup
    updateConfig: ['cursor'],   // Auto-update AI config files
    serverName: 'terminal',     // Server name in config
    levels: ['error', 'warn', 'info', 'log', 'debug', 'assert'], // Log levels to capture (default: all)
    silent: false,              // Only store in MCP without printing to terminal
  }
}

MCP选项

levels -筛选MCP捕获的日志类型

类型： Array
违约： ['error', 'warn', 'info', 'log', 'debug', 'assert'] （全部）
例子： levels: ['error'] -仅捕获错误

updateConfig -自动更新AI助手配置文件

类型： 'auto' | false | Array
违约： 'auto'
'auto' -如果满足以下条件，则自动更新配置文件 .cursor, .vscode，或 ~/.codeium/windsurf 存在
false -不更新任何配置文件
['cursor', 'vscode'] -仅更新特定配置文件
创建/更新：

- 光标: .cursor/mcp.json - VSCode: .vscode/mcp.json - 帆板运动: ~/.codeium/windsurf/mcp_config.json

silent -抑制MCP捕获日志的终端输出

类型： boolean
违约： false
当 true，日志匹配 levels 仅存储在MCP中，不打印到终端
不匹配的日志仍能正常打印

MCP使用示例

只捕获错误，对终端隐藏错误：

Terminal({
  console: 'terminal',
  mcp: {
    levels: ['error'],
    silent: true,  // Errors only in MCP, not printed
  }
})
// Result: Errors → MCP only, other logs → terminal

捕获错误和警告，打印所有内容：

Terminal({
  console: 'terminal',
  mcp: {
    levels: ['error', 'warn'],
    silent: false,  // Print to terminal too
  }
})
// Result: Errors & warnings → MCP + terminal, other logs → terminal

捕捉一切，隐藏一切：

Terminal({
  console: 'terminal',
  mcp: {
    silent: true,  // All logs only in MCP
  }
})
// Result: All logs → MCP only, nothing prints to terminal

捕捉一切，展示一切：

Terminal({
  console: 'terminal',
  mcp: true  // or { silent: false }
})
// Result: All logs → MCP + terminal (default behavior)

MCP工具可用

get-console-errors -获取最近的控制台错误
get-console-logs -通过筛选获取控制台日志
get-console-logs-since -获取自时间戳以来的日志
get-console-stats -获取控制台日志统计信息
clear-console-logs -清除存储的日志

支持的AI助手

光标
克劳德桌面（通过MCP）
帆板运动
任何兼容MCP的客户端

自动配置更新

当 updateConfig 如果启用，插件将自动更新您的AI助手的配置文件（例如。， .cursor/mcp.json 用于Cursor）与MCP服务器端点。

常见场景

场景1：调试类生产环境

目标： 保持开发干净，只让AI看到错误

Terminal({
  console: 'terminal',
  mcp: {
    levels: ['error'],
    silent: true,  // Errors only in MCP, not cluttering terminal
    serverName: 'my-app-errors',
  }
})

结果：

✅ MCP捕获的错误（AI可以查询）
✅ 终端保持干净（无错误垃圾邮件）
✅ 其他日志（警告、信息、日志）打印正常

场景2：人工智能辅助调试会话

目标： 让AI在调试时看到一切

Terminal({
  console: 'terminal',
  output: ['terminal', 'console'],  // See logs everywhere
  mcp: true,  // AI can see everything too
})

结果：

✅ 所有登录终端
✅ 浏览器控制台中的所有日志
✅ 所有日志均可通过MCP提供给AI

场景3：无声监控

目标： 无需任何终端输出即可捕获AI日志

Terminal({
  console: 'terminal',
  mcp: {
    silent: true,  // Nothing prints
    maxLogs: 5000,
    serverName: 'background-monitor',
  }
})

结果：

✅ MCP捕获的所有日志
✅ 零端子输出
✅ AI可以查询历史日志

场景4：错误+警告跟踪

目标： 跟踪错误和警告，对终端隐藏

Terminal({
  console: 'terminal',
  mcp: {
    levels: ['error', 'warn'],
    silent: true,
    serverName: 'issue-tracker',
  }
})

结果：

✅ 错误和警告→ 仅限MCP
✅ 信息和调试日志→ 终端
✅ 干净的终端，全面的错误跟踪

场景5：使用实时AI助手进行开发

目标： AI监控问题的正常开发

Terminal({
  console: 'terminal',
  mcp: {
    levels: ['error', 'warn'],
    silent: false,  // Print errors/warnings too
    updateConfig: ['cursor'],
    printUrl: true,
  }
})

结果：

✅ 终端和MCP中的错误/警告
✅ AI可以主动发现问题
✅ 您可以实时查看所有内容

MCP集成

MCP服务器允许AI助手实时查询您的浏览器控制台日志。启用时：

日志从浏览器中捕获并存储在内存中
MCP服务器公开了查询这些日志的工具
AI助手可以提出以下问题：

- “发生了什么控制台错误？” - “显示最后10个警告” - “过去5分钟有什么错误吗？”

如何 `output` 和 `mcp.silent` 一起工作

这 output 选项控制哪里显示日志，同时 mcp.silent 控制是否打印MCP捕获的日志：

配置	错误	警告	信息/日志	注释
`output: 'terminal'`
`mcp: { levels: ['error'], silent: true }`	仅限MCP	终端	终端	对终端隐藏的错误
`output: 'console'`
`mcp: { levels: ['error'], silent: true }`	仅限MCP	浏览器控制台	浏览器控制台	浏览器控制台中也没有错误
`output: ['terminal', 'console']`
`mcp: { levels: ['error'], silent: false }`	MCP+两者	两者	两者都	到处都是
`output: 'terminal'`
`mcp: { silent: false }`	MCP+终端	MCP+终端		MCP+终端	默认：捕获和显示

要点：

mcp.silent: true 禁止打印匹配的日志 mcp.levels，不管 output 设置
日志不在 mcp.levels 遵循 output 正常设置
output 仅影响打印，不影响MCP存储

带光标的MCP使用示例

// .cursor/mcp.json (auto-generated)
{
  "mcpServers": {
    "my-app-terminal": {
      "url": "http://localhost:5173/__terminal_mcp"
    }
  }
}

然后在Cursor的AI聊天中：

“检查控制台是否有错误”
“控制台日志中有什么？”
“清除控制台日志”

为什么是这个叉子？

此分叉将MCP服务器集成添加到原始版本中 vite插件终端，启用：

人工智能辅助调试 -让AI助手查询控制台日志
实时日志访问 -查询日志而不切换到devtools
框架无关 -适用于React、Vue、Svelte等。
零浏览器扩展 -无需浏览器插件
可选的 -MCP是可选择加入的，不会影响现有功能

鸣谢

MCP集成猕猴桃
最初的想法来自多梅尼克·埃尔姆
项目设置来自 @安福的vite插件检查
捆绑方式拆毁
在构建使用过程中剥离功能汇总插件条

Vite Plugin Terminal MCP

快速接入

详细介绍

vite插件终端mcp

特性

安装

可选：安装MCP依赖项

快速开始

配备MCP服务器（适用于AI助手）

用法

类型

API

重定向 console 登录到终端

同时登录终端和控制台

框架示例

反应

Vue

原生 JavaScript

操场

选项

console

output

strip

include

exclude

mcp

MCP选项

MCP使用示例

MCP工具可用

支持的AI助手

自动配置更新

常见场景

场景1：调试类生产环境

场景2：人工智能辅助调试会话

场景3：无声监控

场景4：错误+警告跟踪

场景5：使用实时AI助手进行开发

MCP集成

如何 output 和 mcp.silent 一起工作

带光标的MCP使用示例

为什么是这个叉子？

鸣谢

许可证

目录标签

接入字段

权限和风险

来源信息

继续浏览同类 MCP

重定向 `console` 登录到终端

`console`

`output`

`strip`

`include`

`exclude`

`mcp`

如何 `output` 和 `mcp.silent` 一起工作