chat-tool-ui-preview
Provides a local preview of Slack messages before they are sent, rendering Slack mrkdwn and Block Kit JSON, displaying context such as channel, thread replies, and sender identity, and warning about unresolved mentions or unsupported blocks.
chat-tool-ui-preview
AIエージェント(Claude Codeなど)がSlackに投稿する前に、その投稿を人が画面で確認するための小さなローカルツール。Go製の単体バイナリ chat-preview。
表示はSlackの画面を写したものではなく、本ツール独自のチャット風レイアウトです。書式(太字・引用・メンション・ブロックの並び)と文脈(宛先・スレッド返信かどうか・ボットとしてか)の意味が正しく伝わることを目的にしています。Slackのロゴ・配色・フォント・画面構成は使いません。本ツールはSlack Technologies, LLCが制作・提携・支援するものではありません。
何ができるか
入力形式3つ: 標準Markdown(Claude CodeのSlack連携の
message)、Slack記法(mrkdwn)、Block Kit JSON書式の描画: 太字/斜体/打消/コード/コードブロック/引用/リンク/メンション/日付/絵文字/箇条書き/表、Block Kitの section・header・divider・context・image・actions・rich_text
文脈の表示: 宛先、スレッド返信とチャンネルにも表示、送信主体(ユーザー/ボット)
自動検査の警告: 表示名が分からないメンション、未知の絵文字、長さ超過、不正・未対応のブロック
Claude CodeのPreToolUseフックとして動き、Slack送信ツールの呼び出しに自動で割り込む。プレビューをブラウザで開いたうえで、判断はClaude Codeの通常の許可ダイアログに委ねる
やらないこと: Slackへの送信そのもの、Slack APIへの問い合わせ(トークンを持たない)、常駐、投稿内容の保存。画像やリンク先は読み込まない(投稿前に相手サーバーへアクセスが飛ぶのを避ける)。
Related MCP server: Terrarium
インストール
chat-previewは実行時の依存を持たない単一の静的バイナリです。PATHの通った場所に置いてください。シェルも、Claude Codeのフックも、MCPクライアントも、同じchat-previewコマンドを呼びます。
# macOS/Linux
curl -fsSL https://raw.githubusercontent.com/gridhra/chat-tool-ui-preview/main/scripts/install.sh | sh
# Windows(PowerShell)。CIでクロスビルドはしていますが、Windowsの実機では未検証です
irm https://raw.githubusercontent.com/gridhra/chat-tool-ui-preview/main/scripts/install.ps1 | iexスクリプトは、最新のGitHub ReleaseからOSとCPUに合うアーカイブを選び、そのSHA-256がリリースのchecksums.txtと一致しない限り何もインストールせず、chat-previewを~/.local/binに置きます。sudoは求めません。置き場所はCHAT_PREVIEW_INSTALL_DIR、バージョンはCHAT_PREVIEW_VERSIONで指定できます。更新はもう一度実行するだけです。
アーカイブが「このリポジトリのリリース用ワークフローが、タグの付いたソースからビルドしたもの」であることを確かめるには:
gh release download --repo gridhra/chat-tool-ui-preview --pattern '*darwin_arm64.tar.gz' --pattern checksums.txt
shasum -a 256 -c --ignore-missing checksums.txt
gh attestation verify chat-preview_*_darwin_arm64.tar.gz --repo gridhra/chat-tool-ui-previewGoのツールチェーン(1.24以上)があるなら:
go install github.com/gridhra/chat-tool-ui-preview/cmd/chat-preview@latestコンテナイメージとnpxランチャーは用意しません。ブラウザを開く必要があるので、ホストで動かすのが前提です。
使い方
# 入力JSONをプレビューしてブラウザで開く
chat-preview preview input.json
echo '{"format":"mrkdwn","text":"*hi* <@U0AAA>","context":{"channel_id":"C0GEN","names":{"U0AAA":"aquila"}}}' | chat-preview preview
# 書式要素の見本を1枚で見る
chat-preview gallery入力JSONの形:
{
"target": "slack",
"format": "markdown | mrkdwn | blocks",
"text": "本文(markdown / mrkdwn のとき。blocks のときは通知用の代替文)",
"blocks": [ ... ],
"context": {
"channel_id": "C0123", "channel_name": "general",
"thread_ts": "1700000000.000100", "reply_broadcast": false,
"as": "user | bot", "sender_name": "Deploy Bot",
"names": { "U0123": "aquila", "C0123": "general" }
},
"source": "claude-slack-mcp | slack-web-api | manual"
}formatは必須で、推定しません(標準MarkdownとSlack記法は *bold* の意味が違うため)。namesはID→表示名の対応表で、無いIDは「未解決」として警告に出ます。
Claude Codeとの連携(フック)
~/.claude/settings.json(または対象プロジェクトの.claude/settings.json)に:
{
"hooks": {
"PreToolUse": [
{
"matcher": "mcp__claude_ai_Slack__slack_send_message|mcp__claude_ai_Slack__slack_schedule_message|mcp__claude_ai_Slack__slack_send_message_draft",
"hooks": [{ "type": "command", "command": "chat-preview hook claude", "timeout": 600 }]
}
]
}
}動き: エージェントがSlack送信ツールを呼ぶ → フックがプレビューHTMLを一時ファイル(本人のみ読める権限)に書いてブラウザで開く → Claude Codeの許可ダイアログに「プレビューを開いた。確認が必要な点: …」と出る → 人が許可/拒否を選ぶ。文面を直したいときは拒否して理由に書くと、エージェントが書き直して再びプレビューが開く。一時ファイルは1時間で自動的に消える。
MCPサーバーとして使う
chat-preview mcp はstdioのMCPサーバーで、ツールは preview_message の1本です。入力はCLIの入力JSONと同じ項目(format text blocks channel_id thread_ts names など)で、出力はプレビューのパス、ブラウザを開けたか、警告一覧、次にすべきこと(「ユーザーに確認し、はいと言うまで送らない」)です。送信もSlackへの問い合わせも行いません。
Claude Codeに登録する例(ユーザースコープ):
claude mcp add --scope user chat-tool-ui-preview -- chat-preview mcpフックとMCPの使い分け: フックはエージェントが呼び忘れる余地がなく、Claude CodeのSlack送信ツールに自動で割り込みます。MCPは、他のクライアントや、送信ツールを経由しない場面(Web APIを直接叩くスクリプトを書いている最中など)でエージェントが任意に呼ぶためのものです。両方登録して構いません。
開発
go test -race ./... # 全テスト
go test ./internal/render -update # 描画のゴールデンファイルを更新(差分を見てから)
go run ./cmd/chat-preview gallery # 見本ページ設計と判断の記録は docs/DESIGN.md、進捗と予定は docs/ROADMAP.md。
ライセンス
MIT。絵文字の短縮名→Unicodeの対応は kyokomi/emoji(MIT)、Markdownの構文解析は goldmark(MIT)を使っています。絵文字の描画はOSのフォントに任せ、画像は同梱しません。
This server cannot be deployed
Maintenance
Related MCP Connectors
Give any AI agent a way to ask a person — for approval, a decision, an answer or a review.
Human-owned review for agent plans, rendered documents, Forms, research, and live previews.
Human-in-the-loop for AI coding agents — ask questions, get approvals via Slack.
Human feedback for AI agents: share HTML, get a live review link, read anchored notes as markdown.
Related MCP Servers
- AlicenseAqualityAmaintenanceHuman-in-the-loop approval inbox for AI agents: an agent proposes an action (send email, post comment, run a command), a human approves, rejects, or edits it from a web, mobile, or Slack/Discord/Telegram inbox, and the agent only runs on approval. Full audit trail, self-hostable (MIT).85MIT
- FlicenseNot gradedqualityFmaintenanceEnables AI agents to publish HTML artifacts for human review, receive anchored feedback, and iterate until approval.2-
- AlicenseNot gradedqualityAmaintenanceEnables AI agents to prepare, preview, and get human approval before publishing Reddit posts and comments via a local authenticated browser session, without Reddit API credentials.MIT
- AlicenseAqualityAmaintenanceThe open-source review layer for AI agents. Work done for humans is decided by humans.1819 npm1AGPL 3.0