Slack → Claude Code 集成项目
Slack从…开始Claude Code中所述修改相应参数的值。多人的开发团队Claude Code对较大场景进行渲染期间已观察到该故障。
🎯 概要
此项目包括:Slack作为接口Claude Code中所述修改相应参数的值。MCP (Model Context Protocol)来修改标记元素的显示属性Claude Code作为服务器包装Slack Bot中所述修改相应参数的值。
体系结构
Slack → Slack Bot → Claude Code MCP Server → Claude Code CLI主要功能
- Slack成员:
@ClaudeBot单击功能区上Claude Code打开和保存文件 - 直接消息: Bot和的DM私人工作
- 斜线命令:
/claude快速执行命令 - 支持多项目:
--project可选切换多个项目 - 团队共享:多个成员相同Claude Code利用环境
🚀 安装指南
前提条件
- Node.js 22以上(推荐)或Node.js 20大于等于
- npm 在工作空间的边缘yarn
- TypeScript 的基本知识(开发时)
- Claude Code CLI已安装(
npm install -g @anthropic-ai/claude-code) - Slack Workspace管理者権限
- Docker & Docker Compose(可选)
第一步:Slack应用程序作成と設定
1-1.新建Slack App创建
- https://api.slack.com/apps にアクセス
- “创建新应用程序” 来修改标记元素的显示属性
- “从头开始” 列表框中,此格式对应于条目“无”
- App名(例:
Claude Code Bot)和Workspace列表框中,此格式对应于条目“无” - “创建应用程序” 来修改标记元素的显示属性
1-2. Socket Mode启用
- 从左侧菜单 “插座模式” 列表框中,此格式对应于条目“无”
- “启用套接字模式” 打开ON切换到
- App Level Token显示生成弹出窗口
1-3. App Level Token生成
- Token Name的名称(例如:
socket-token) - “添加范围” 按钮关闭对话框
connections:write列表框中,此格式对应于条目“无”- “生成” 按钮关闭对话框
- 生成的标记(
xapp-1-...)并保存
1-4. OAuth & Permissions配置
- 从左侧菜单 “OAuth和权限” 列表框中,此格式对应于条目“无”
- “范围” 滚动到区域
- “机器人令牌范围” 单击功能区上 “添加OAuth作用域” 来修改标记元素的显示属性
- 添加以下范围:
- app_mentions:read 读取成员 - chat:write -发送消息 - chat:write.public -发送到公共频道 - commands -接收斜线命令 - im:history - DM阅历 - im:read - DM阅读 - im:write - DM发送 - users:read -阅读用户信息(可选)
1-5. Event Subscriptions配置
- 从左侧菜单 “活动订阅” 列表框中,此格式对应于条目“无”
- “启用事件” 打开ON切换到
- Request URL表示Socket Mode不需要设置以供使用
- “订阅机器人事件” 在节中添加:
- app_mention -@成员事件 - message.im -直接消息事件
- “保存更改” 来修改标记元素的显示属性
1-6. Slash Commands配置
- 从左侧菜单 “屠杀命令” 列表框中,此格式对应于条目“无”
- “创建新命令” 来修改标记元素的显示属性
- 输入以下信息:
- 命令: /claude - 请求URL: https://example.com (Socket Mode),模板名称将采用不同的格式 - 简短描述: Claude Codeアシスタント - 使用提示: [タスクの説明] [--project /path/to/project]
- “保存” 来修改标记元素的显示属性
1-7. App Manifest的确认(可选)
- 从左侧菜单 “应用程序清单” 列表框中,此格式对应于条目“无”
- 确认设置是否正确反映
1-8.安装到工作区
- 从左侧菜单 “安装应用程序” 列表框中,此格式对应于条目“无”
- “安装到工作区” 按钮关闭对话框
- 在权限确认画面中 “允许” 来修改标记元素的显示属性
- Bot用户OAuth令牌 (
xoxb-...),模板名称将采用不同的格式
1-9. Basic Information获得认证信息
- 从左侧菜单 “基本信息” 列表框中,此格式对应于条目“无”
- “应用程序凭据” 从节中复制:
- 签名密码:应用程序的签名密码
Step 2: 项目设置
2-1.克隆存储库
# GitHubからクローン(または直接ダウンロード)
git clone https://github.com/your-org/slack-claude-code-integration.git
cd slack-claude-code-integration
# またはプロジェクトディレクトリを直接使用
cd /home/yusuke/engineers-hub.ltd/in-house-project/slack-claude-code-integration2-2.设置环境变量
# .env.exampleから.envファイルを作成
cp .env.example .env
# .envファイルを編集
nano .env # またはお好みのエディタで編集.env文件内容:
# Slack App認証情報(Step 1で取得した値を設定)
SLACK_BOT_TOKEN=xoxb-your-bot-token-here
SLACK_SIGNING_SECRET=your-signing-secret-here
SLACK_APP_TOKEN=xapp-your-app-token-here
# Claude Code設定
CLAUDE_PATH=claude # Claude CLIのパス(通常はこのまま)
PROJECT_PATH=/home/yusuke/your-project # デフォルトで操作するプロジェクトのパス
# デバッグ設定
DEBUG=true # 開発時はtrueに設定2-3. Claude Code CLI确认
# Claude CLIがインストールされているか確認
which claude
# インストールされていない場合
npm install -g @anthropic-ai/claude-code
# 認証が完了しているか確認
claude --versionStep 3: 安装相关性
# ルートディレクトリで実行
npm run setup
# TypeScriptをビルド
npm run build
# または個別にインストール
npm install # ルートディレクトリ
cd claude-code-mcp && npm install && cd ..
cd slack-bot && npm install && cd ..
npm run build # TypeScriptをビルドStep 4: 启动应用程序
4-1.本地运行(开发环境)
# 開発モードで起動(TypeScript自動ビルド + ホットリロード付き)
npm run dev
# または個別に起動
# ターミナル1: TypeScriptウォッチモード
npm run build:watch
# ターミナル2: MCPサーバー
npm run start:mcp
# ターミナル3: Slack Bot
npm run start:bot正常启动时的输出示例:
> slack-claude-code-integration@1.0.0 dev
> npm run build && concurrently "npm run build:watch" "npm run start:mcp" "npm run start:bot"
[0] TypeScript compilation complete
[1] Watching for file changes...
[2] [MCP] Claude Code MCP Server started
[2] [MCP] Claude path: claude
[2] [MCP] Project path: /home/yusuke/your-project
[3] Connecting to Claude Code MCP Server...
[3] Connected to Claude Code MCP Server
[3] Available tools: [ { name: 'claude_code', ... } ]
[3] ⚡️ Slack Claude Code Bot is running!
[3] Project path: /home/yusuke/your-project4-2. Docker実行(本番环境推奨)
# Dockerイメージをビルド
npm run docker:build
# または
docker-compose build
# サービスを起動
npm run docker:up
# または
docker-compose up -d
# ログを確認
docker-compose logs -f
# 停止
npm run docker:downStep 5: 检查应用程序行为
5-1.起动确认
成功启动后,将显示以下日志:
[MCP] Claude Code MCP Server started
[MCP] Claude path: claude
[MCP] Project path: /home/yusuke/engineers-hub.ltd/in-house-project
Connecting to Claude Code MCP Server...
Connected to Claude Code MCP Server
Available tools: [
{
"name": "claude_code",
"description": "Execute Claude Code commands in a project directory",
"inputSchema": { ... }
}
]
[INFO] socket-mode:SocketModeClient:0 Going to establish a new connection to Slack ...
⚡️ Slack Claude Code Bot is running!
Project path: /home/yusuke/engineers-hub.ltd/in-house-project
🧪 Running in TEST MODE - using echo commands
[INFO] socket-mode:SocketModeClient:0 Now connected to Slack5-2.动作模式
测试模式(默认):
TEST_MODE=true的形式Claude Code不是,不是echo命令模拟- 可以安全地确认动作
- 示例:输入列出文件-输出列出文件
生产模式:
TEST_MODE=false中描述的场景,使用下列步骤创建明细表,以便在概念设计中分析体量的周长Claude Code执行- 可以进行实际的文件操作和代码变更
5-3.从测试模式切换到生产模式
方法1:环境变数で设定(推奨)
# アプリケーションを停止(Ctrl+C)してから
# .env ファイルに追加
echo "TEST_MODE=false" >> .env
# または直接編集
nano .env
# TEST_MODE=false を追加
# アプリケーションを再起動
./start-test.sh方法2:编辑启动脚本
# start-test.sh を編集
export TEST_MODE=false # true から false に変更方法3:直接在代码中设置
// slack-bot/index.js の 263行目付近
process.env.TEST_MODE = 'false'; // 'true' から 'false' に変更Step 6: Slack开始测试和使用
6-1. Bot邀请到频道
- Slack打开要测试的通道
- 输入以下命令:
/invite @Claude Code Bot(Bot名称是创建时设置的名称)
6-2.首次测试
帮助消息:
@Claude Code Bot help応答例:
こんにちは!Claude Codeコマンドを実行できます。
使い方:@ClaudeBot \ @ClaudeBot \ --project /path/to/project
例:
• @ClaudeBot このプロジェクトのテストを実行して
• @ClaudeBot package.jsonの内容を確認して
• @ClaudeBot src/index.jsのバグを修正して6-3.测试模式下的动作确认
获取文件列表(测试模式):
@Claude Code Assistant ファイルをリストして响应(测试模式):
Claude would execute: "ファイルをリストして" in /home/yusuke/engineers-hub.ltd/in-house-project⚠️ 注意: Bot名称是实际设置的名称(例如: @Claude Code Assistant),模板名称将采用不同的格式。
6-4.生产模式下的实际使用示例
检查项目结构:
@Claude Code Bot このプロジェクトの構造を教えて文件确认:
@Claude Code Bot package.jsonの内容を確認して修改代码:
@Claude Code Bot src/index.js のエラーを修正して运行测试:
@Claude Code Bot テストを実行して結果を教えて在另一个项目中运行:
@Claude Code Bot ビルドを実行して --project /home/user/another-projectStep 7: 管理应用程序
7-1.启动应用程序
在开发环境中启动:
# シンプルな起動
cd /path/to/slack-claude-code-integration
npm run dev
# テストモードで起動
./start-test.sh
# バックグラウンドで起動
nohup npm run dev > app.log 2>&1 &在生产环境中启动(系统服务示例):
# /etc/systemd/system/slack-claude-bot.service
[Unit]
Description=Slack Claude Code Bot
After=network.target
[Service]
Type=simple
User=your-user
WorkingDirectory=/path/to/slack-claude-code-integration
Environment="NODE_ENV=production"
Environment="TEST_MODE=false"
ExecStartPre=/usr/bin/npm run build
ExecStart=/usr/bin/node dist/slack-bot/index.js
Restart=always
RestartSec=10
[Install]
WantedBy=multi-user.target7-2.流程管理
PM2使用的管理(建议):
# PM2のインストール
npm install -g pm2
# TypeScriptをビルド
npm run build
# アプリケーションの起動
pm2 start dist/slack-bot/index.js --name slack-claude-bot
# ログの確認
pm2 logs slack-claude-bot
# 再起動
pm2 restart slack-claude-bot
# 停止
pm2 stop slack-claude-bot
# 自動起動設定
pm2 startup
pm2 save7-3.日志管理
检查日志文件:
# PM2使用時
pm2 logs slack-claude-bot --lines 100
# 直接実行時
tail -f app.log
# エラーログのみ
grep ERROR app.log
# MCPサーバーのログ
grep "\[MCP\]" app.log日志轮换设置:
# /etc/logrotate.d/slack-claude-bot
/path/to/logs/*.log {
daily
rotate 7
compress
delaycompress
missingok
notifempty
create 0640 user group
}📖 详细的使用方法
3个利用方法
1.成员(在频道内使用)
在通道中 @Claude Code Bot 使用:
@Claude Code Bot テストを実行して結果を教えて
@Claude Code Bot src/components/Button.tsx のバグを修正して
@Claude Code Bot 新機能のブランチを作成して
@Claude Code Bot このプロジェクトのREADMEを改善して优点:
- 所有小组都可以确认工作内容
- 留下履历,成为知识共享
- 在帖子上继续讨论
2.直接消息(专用工作)
Bot和的DM中的个人工作:
テストを実行して
README.mdを更新して
バグを見つけて修正して
コードレビューをして优点:
- 不让别人看到试行错误的工作
- 最适合个人学习和实验
- 不污染频道
3.斜线命令(快速执行)
无论从何处 /claude 命令:
/claude run tests
/claude fix the bug in auth.js
/claude analyze performance issues
/claude create unit tests for user.service.ts优点:
- 最快
- 任何频道都可以使用
- 执行结果只显示给自己(别人看不到)
切换项目
默认项目
.env中所述修改相应参数的值PROJECT_PATH默认值为:
@Claude Code Bot パッケージをアップデートして指定其他项目
--project可选操作其他项目:
@Claude Code Bot ビルドエラーを修正して --project /home/user/web-app
@Claude Code Bot テストを実行 --project /home/user/api-server
/claude analyze c```