给Claude Code装上左膀右臂 :Chrome DevTools+Postgres MCP实战

2026-01-11 113 0

1. 什么是 MCP?

MCP(Model Context Protocol)是Anthropic推出的模型上下文协议标准,让大语言模型LLM(Large Language Model)通过统一接口安全调用外部工具、数据源,实现动态扩展能力,简单说就是把AI工具从「纯聊天」升级成「能直连数据库、能操作浏览器」的Agent。
看完本文,10 分钟给 Claude 装上 Postgres + Chrome 双 MCP,查库、跑报表、线上数据一键核对,建新库、迁数据、写稿发稿全自动。把活交给 AI,你只管躺平收工

2. 前置检查

工具 最低版本 检查命令
Node.js ≥ 18 node -v
Claude CLI ≥ 0.8 claude --version
Postgres ≥ 12 psql --version
Chrome ≥ 120 google-chrome --version

缺啥装啥,Debian系(Ubuntu / deepin 等)用户可直接用 apt,Mac 用 brew。

3. 安装 Postgres 数据源 MCP

  • 一键安装及注册MCP-Server

    claude mcp add --transport stdio local_pg_test_db -- \
    npx -y @bytebase/dbhub \
    --dsn "postgresql://user1:passwd123@localhost:5432/test_db"

    参数拆解

    • local_pg_test_db:你给这个连接起的别名,后面 Claude 里用。
    • dsn:标准 Postgres 连接串,格式 postgresql://用户:密码@主机:端口/库名
  • 验证mcp server是否配置

    hushow@hushow-pc:~/wk/mcp-demo$ claude mcp list
    Checking MCP server health...
    local_pg_test_db: npx -y @bytebase/dbhub --dsn postgresql://user1:passwd123@localhost:5432/test_db - ✓ Connected

    看到 local_pg_test_db 状态是连接上的即可。

  • 对话尝试
    打开 Claude Code 交互界面:

    ▐▛███▜▌   Claude Code v2.1.4
    ▝▜█████▛▘  Sonnet 4.5 · API Usage Billing
    ▘▘ ▝▝    ~/wk/mcp-demo
    /model to try Opus 4.5
    ❯ 帮我统计用户表今天新增了多少个用户?
    ● 我来帮你统计今天新增的用户数量。首先让我查找一下数据库中的用户表。
    ● 找到了用户表 users,它有 created_at 字段记录创建时间。现在让我查询今天新增的用户数量:
    ● local_pg_db_test - Execute SQL (postgres) (MCP)(sql: "SELECT COUNT(*) AS today_new_users FROM users WHERE DATE(created_at) = CURRENT_DATE;")
    ⎿  {
       "success": true,
       "data": {
     … +9 lines (ctrl+o to expand)
    ● local_pg_db_test - Execute SQL (postgres) (MCP)(sql: "SELECT id, username, phone, created_at FROM users WHERE DATE(created_at) = CURRENT_DATE ORDER BY created_at DESC;")
    ⎿  {
       "success": true,
       "data": {
     … +18 lines (ctrl+o to expand)
    ● 统计结果
    今天(2026-01-11)新增用户数:2 人
    新增用户详情:
    ┌─────┬────────┬─────────────┬─────────────────────┐
    │ ID  │ 用户名 │   手机号    │      注册时间       │
    ├─────┼────────┼─────────────┼─────────────────────┤
    │ 2   │ 李四   │ 13299999999 │ 2026-01-11 11:53:05 │
    ├─────┼────────┼─────────────┼─────────────────────┤
    │ 1   │ 张三   │ 1318888888  │ 2026-01-11 11:52:49 │
    └─────┴────────┴─────────────┴─────────────────────┘
    查询基于 users 表的 created_at 字段,使用 CURRENT_DATE 过滤今天的记录。

4. 安装Chrome DevTools MCP

  • 安装 Chrome(若已装可跳过)

    wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
    sudo dpkg -i google-chrome-stable_current_amd64.deb && sudo apt install -f -y
  • 一键安装及注册MCP-Server

    claude mcp add chrome-devtools npx chrome-devtools-mcp@latest
  • 验证

    hushow@hushow-pc:~/wk/mcp-demo$ claude mcp list
    Checking MCP server health...
    chrome-devtools: npx chrome-devtools-mcp@latest - ✓ Connected
    local_pg_db_test: npx -y @bytebase/dbhub --dsn postgresql://user1:passwd123@localhost:5432/db-test - ✓ Connected

    出现 chrome-devtools 且状态连接即可。

5. 一键卸载(如需)

claude mcp remove local_pg_db_test
claude mcp remove chrome-devtools

6. 结语

下一步你还可以:

  • 让Claude查看在线大屏和报表统计数据,直连数据库进行数据验证,实现复杂报表的自动检查和测试
  • 让Claude操作游览器进行UI功能测试,获取console错误,修复程序bug

相关文章

开源神器planning-with-files:让Claude拥有“硬盘记忆”,复杂任务不跑偏

发布评论