chat-tool-ui-preview

io.github.gridhrav0.1.1更新於 Oct 7, 2026

Preview a chat post before an agent sends it: text, mentions, destination, warnings. Never sends.

概覽

AI 產生的概覽

讓助理在送出前以 Slack 風格預覽訊息,顯示格式與警告,且不會真正送出。

功能
這個本機工具會把聊天貼文渲染成瀏覽器中的預覽頁面,讓人在送出前檢查。它接受標準 Markdown、Slack mrkdwn 或 Block Kit JSON 三種輸入,呈現粗體、引用、程式碼、連結、提及、表情符號、清單、表格等格式,以及目標頻道、是否為討論串回覆、以使用者或機器人身分張貼等脈絡。它也會提出警告,例如無法解析的提及、未知表情符號、長度超限、不合法或未支援的區塊。作為 MCP 伺服器,它只提供一個工具 preview_message,回傳預覽路徑、瀏覽器是否開啟、警告清單,以及「先請使用者確認再送出」的提醒。
適用情境
當助理起草 Slack 訊息,而你希望有人在張貼前看到渲染結果與警告時使用。它適合 Claude Code 工作流程,可作為 PreToolUse 鉤子自動攔截 Slack 傳送工具;也適合其他 MCP 用戶端,由代理自行呼叫預覽工具。
執行需求
以本機程序在使用者機器上執行,僅限桌面端,不提供網頁版。以無執行時相依性的單一靜態二進位檔散布,或作為 Claude Desktop(macOS 與 Windows)的 .mcpb 套件。可透過發行封存檔、Go 工具鏈(1.24 以上)或 MCP 套件安裝。開啟預覽需要瀏覽器。未宣告任何帳號、API 金鑰、環境變數或標頭。
安裝前請注意
此工具不傳送訊息、不呼叫 Slack API、不持有權杖,也不儲存貼文內容;它也不載入圖片或連結,以免在張貼前對遠端伺服器發出請求。預覽 HTML 寫入僅本人可讀的暫存檔,一小時後自動刪除。透過提供的 shell 或 PowerShell 指令碼安裝會下載並執行遠端程式碼;README 稱指令碼會驗證 SHA-256 校驗和且不需要 sudo,並提供來源證明驗證。macOS 版 Claude Desktop 套件透過 /bin/sh 啟動以繞過已知權限問題,Windows 版本據稱未在實機驗證。

安裝

在 SourceWeft 中

  1. 開啟 儀表板中的 chat-tool-ui-preview,將其新增到工作區。
  2. 為需要使用其工具的對話啟用該服務。

Desktop only,透過 STDIO。 STDIO 服務會啟動本機處理程序,因此需要 SourceWeft 桌面主機。

其他 MCP 客戶端

參照 儲存庫 中的啟動說明。

README

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への問い合わせ(トークンを持たない)、常駐、投稿内容の保存。画像やリンク先は読み込まない(投稿前に相手サーバーへアクセスが飛ぶのを避ける)。

インストール

chat-previewは実行時の依存を持たない単一の静的バイナリです。PATHの通った場所に置いてください。シェルも、Claude Codeのフックも、MCPクライアントも、同じchat-previewコマンドを呼びます。

sh
# macOS/Linuxcurl -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で指定できます。更新はもう一度実行するだけです。

アーカイブが「このリポジトリのリリース用ワークフローが、タグの付いたソースからビルドしたもの」であることを確かめるには:

sh
gh release download --repo gridhra/chat-tool-ui-preview --pattern '*darwin_arm64.tar.gz' --pattern checksums.txtshasum -a 256 -c --ignore-missing checksums.txtgh attestation verify chat-preview_*_darwin_arm64.tar.gz --repo gridhra/chat-tool-ui-preview

Goのツールチェーン(1.24以上)があるなら:

sh
go install github.com/gridhra/chat-tool-ui-preview/cmd/chat-preview@latest

コンテナイメージとnpxランチャーは用意しません。ブラウザを開く必要があるので、ホストで動かすのが前提です。

Claude Desktopに入れる(MCP Bundle)

各リリースには、OSとCPUごとのchat-preview_<版>_<os>_<arch>.mcpbも付いています。MCP Bundle(.mcpb)は、manifest.jsonとバイナリを1つのzipにした配布形式で、Claude Desktop(macOS/Windows)がそのまま取り込めます。Releasesから自分のOSとCPUに合う.mcpbを落とし、ダブルクリック(またはClaude Desktopの設定 → エクステンション → 詳細設定 → エクステンションをインストール)で入ります。中身は上のアーカイブと同じバイナリで、checksums.txtとgh attestation verifyで同じように確かめられます。

macOSのClaude Desktopには、取り込んだバイナリの実行権限を落とす不具合(modelcontextprotocol/mcpb issue #294、2026-10-06時点で未修理)があるため、macOS用のバンドルは/bin/sh経由で起動して実行権限を付け直してからchat-preview mcpを実行します。Windows用は.exeを直接起動します。

同じバンドルを公式MCPレジストリにio.github.gridhra/chat-tool-ui-previewとして登録しています。レジストリから入れられるクライアントでは、その名前で探せます。

使い方

sh
# 入力JSONをプレビューしてブラウザで開くchat-preview preview input.jsonecho '{"format":"mrkdwn","text":"*hi* <@U0AAA>","context":{"channel_id":"C0GEN","names":{"U0AAA":"aquila"}}}' | chat-preview preview
# 書式要素の見本を1枚で見るchat-preview gallery

入力JSONの形:

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)に:

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に登録する例(ユーザースコープ):

sh
claude mcp add --scope user chat-tool-ui-preview -- chat-preview mcp

フックとMCPの使い分け: フックはエージェントが呼び忘れる余地がなく、Claude CodeのSlack送信ツールに自動で割り込みます。MCPは、他のクライアントや、送信ツールを経由しない場面(Web APIを直接叩くスクリプトを書いている最中など)でエージェントが任意に呼ぶためのものです。両方登録して構いません。

開発

sh
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のフォントに任せ、画像は同梱しません。

來源:README.md,提交 d24cd87

工具

0
工具後設資料尚未被收錄。

版本歷史

1
  1. v0.1.1最新Oct 7, 2026