ChatMCP – AI 브라우저 채팅을 코딩 에이전트에 연결
hackernews
|
|
📦 오픈소스
#ai 서비스
#anthropic
#claude
#mistral
#openai
원문 출처: hackernews · Genesis Park에서 요약 및 분석
요약
AI 채팅 탭의 내용을 클로드 코드 등 AI 코딩 툴로 직접 가져오는 'ChatMCP' 사용법을 소개합니다. Node.js LTS를 설치하고 크롬 확장 프로그램과 MCP 서버를 설정하면 ChatGPT, 클로드, 젬니니 등 다양한 플랫폼의 대화 맥락을 코딩 에이전트와 연동할 수 있습니다. 이 도구는 stdio와 HTTP 두 가지 모드를 지원하며, 모든 데이터는 로컬 머신 내에서만 처리되어 보안성을 유지합니다.
본문
Pull context from your AI browser tabs directly into Claude Code (and other AI coding tools) via MCP. Claude Code / Copilot CLI / Codex CLI ← stdio (spawns server as subprocess) OR Cursor / Antigravity / Copilot (VS Code) ← HTTP http://127.0.0.1:27183/mcp ↕ Node MCP Server ←── WebSocket on localhost:27182 ↕ Chrome Extension (background service worker) ↕ AI Chat Tabs (ChatGPT, Claude, Gemini, Grok, DeepSeek, Mistral, Perplexity) You need two things: a Chrome extension and a small server program. Here's exactly what to do. - Go to nodejs.org and download the LTS version - Run the installer — click Next through everything, keep all defaults - When it's done, open Terminal (Mac) or Command Prompt (Windows) and type: You should see something like node --version v20.x.x . If so, you're good. In Terminal / Command Prompt: npm install -g @anthropic-ai/claude-code Then run claude and follow the login prompt. Copy and paste this one line into your terminal: claude mcp add chatmcp -- npx -y chatmcp-server That's it. Claude Code will automatically start the server whenever you use it. - Download or clone this repository — click the green Code button on GitHub, then Download ZIP, and unzip it somewhere on your computer - Open Chrome and go to chrome://extensions in the address bar - In the top-right corner, turn on Developer mode - Click Load unpacked - Select the chrome-extension folder from what you just unzipped - You should see the ChatMCP extension appear with an OFF badge - Start Claude Code by typing claude in your terminal - The extension badge should turn ON (green) within a few seconds - Open any AI chat tab (ChatGPT, Gemini, etc.) in Chrome - In Claude Code, ask: "pull context from my browser tabs" Two modes: Tools that can spawn subprocesses use stdio (simpler — no background process needed). Tools that connect to a running server use HTTP mode — start the server once and leave it running. claude mcp add chatmcp -- npx -y chatmcp-server Copilot in VS Code (1.99+) spawns the server for you — no background process needed. Workspace — create .vscode/mcp.json in your project: { "servers": { "chatmcp": { "command": "npx", "args": ["-y", "chatmcp-server"] } } } Global (all projects) — open VS Code, run MCP: Open User Configuration from the Command Palette, and add: { "servers": { "chatmcp": { "command": "npx", "args": ["-y", "chatmcp-server"] } } } Then open Copilot Chat, switch to Agent mode, and the chatmcp tools appear automatically. (MCP tools are invisible in Ask / Edit mode.) Config lives at ~/.copilot/mcp-config.json (created automatically on first use). Add: { "mcpServers": { "chatmcp": { "type": "local", "command": "npx", "args": ["-y", "chatmcp-server"] } } } Or use the interactive command inside the CLI: /mcp add Config lives at ~/.codex/config.toml . Add a section: [mcp_servers.chatmcp] command = "npx" args = ["-y", "chatmcp-server"] Or scope it to a project by placing the same block in .codex/config.toml inside your repo. You can also use the CLI helper: codex mcp add Project-level — create .cursor/mcp.json in your project root: { "mcpServers": { "chatmcp": { "type": "stdio", "command": "npx", "args": ["-y", "chatmcp-server"] } } } Global — add the same block to ~/.cursor/mcp.json . Verify in Cursor Settings → Tools & MCP — you should see chatmcp with a green status indicator. Open an Agent session, click ⋯ → MCP Servers → Manage MCP Servers → View raw config, and add to mcp_config.json : { "mcpServers": { "chatmcp": { "command": "npx", "args": ["-y", "chatmcp-server"] } } } Save the file — Antigravity picks up the new server immediately. If your tool connects to MCP servers over HTTP/SSE rather than spawning subprocesses (OpenCode, Windsurf, custom agents, etc.), start the server in HTTP mode first: npx -y chatmcp-server --http The server runs persistently on http://127.0.0.1:27183/mcp and accepts multiple simultaneous clients. Point your tool at that URL. Keep the terminal open (or add it to your system startup / launchd / systemd ). git clone https://github.com/indiantinker/chatMCP.git cd chatMCP/mcp-server npm install && npm run build # stdio (Claude Code, Copilot, Codex, Cursor, Antigravity) node /path/to/chatMCP/mcp-server/dist/index.js # HTTP (OpenCode, Windsurf, or any HTTP MCP client) node /path/to/chatMCP/mcp-server/dist/index.js --http For Claude Code with a local build: claude mcp add chatmcp -- node /path/to/chatMCP/mcp-server/dist/index.js # See what AI chats are open list_ai_tabs # Pull the full conversation (auto-selects active AI tab) get_chat_context # Pull from a specific tab get_chat_context tabId=12345 # Get a summary instead of the full transcript get_chat_context summaryOnly=true # Read any tab (docs, GitHub issues, articles) get_page_content # Check extension status extension_status Or just ask naturally: "Pull context from my ChatGPT tab and continue building on that idea." | Platform | URL | |---|---| | ChatGPT | chat.openai.com / chatgpt.com | | Claude | claude.ai | | Gemini | gemini.google.com | | Grok | grok.com | | DeepSeek | chat.deepseek.com | | Mistral | chat.mistral.ai | | Perplexity | perplexity.ai | All data stays on your machine. The MCP server and Chrome extension communicate over localhost only — nothing is sent to any external server. Chat content is passed directly to your local Claude Code session. - The MCP server starts automatically when Claude Code launches if registered (stdio mode). - In HTTP mode, start the server manually and keep it running. - The extension auto-reconnects every 3 seconds if the server restarts. - Chat extraction uses DOM scraping — may need updates when AI platforms change their markup. MIT — see LICENSE. If this saves you time, buy me a coffee. ☕
Genesis Park 편집팀이 AI를 활용하여 작성한 분석입니다. 원문은 출처 링크를 통해 확인할 수 있습니다.
공유