chat-tool-ui-preview

io.github.gridhrav0.1.1Updated Oct 7, 2026

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

VerifiedSTDIODesktop onlyDeveloper ToolsProductivity & WorkflowCommunication & Collaboration

Overview

AI-generated overview

Lets an assistant render a Slack-style preview of a message before it is sent, with formatting and warnings, without sending anything.

What it does
This local tool renders a chat post as a preview page in the browser so a person can check it before it goes out. It accepts standard Markdown, Slack mrkdwn, or Block Kit JSON, and displays formatting such as bold, quotes, code, links, mentions, emoji, lists and tables, plus context like destination channel, thread reply, and whether it is posted as a user or bot. It flags warnings such as unresolved mentions, unknown emoji, over-length text, and invalid or unsupported blocks. As an MCP server it exposes a single tool, preview_message, which returns the preview path, whether the browser opened, the warning list, and a reminder to get user confirmation before sending.
When to use it
Use it when an assistant drafts Slack messages and you want a human to see the rendered result and warnings before anything is posted. It fits Claude Code workflows, where it can also run as a PreToolUse hook that intercepts Slack send tools, and other MCP clients where the agent calls the preview tool itself.
Requirements
Runs as a local process on the user's machine; desktop only, no web executable. Distributed as a single static binary with no runtime dependencies, or as an .mcpb bundle for Claude Desktop (macOS and Windows). Install via the release archive, the Go toolchain (1.24+), or the MCP bundle. A browser is needed to open the preview. No accounts, API keys, environment variables, or headers are declared.
Before you install
The tool does not send messages, does not call the Slack API, holds no token, and does not store post content; it also does not load images or follow links, to avoid contacting remote servers before posting. Preview HTML is written to a temporary file readable only by the user and is deleted after one hour. Installing via the provided shell or PowerShell script downloads and runs remote code; the README says it verifies a SHA-256 checksum and installs without sudo, and offers attestation…

Installation

In SourceWeft

  1. Open chat-tool-ui-preview in the dashboard and add it to a workspace.
  2. Enable the server for the chats that should use its tools.

Desktop only via STDIO. STDIO servers start a local process, so they need the SourceWeft desktop host.

Other MCP clients

Follow the launch instructions in the repository.

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

Source: README.md at commit d24cd87

Tools

0
Tool metadata has not been indexed yet.

Version history

1
  1. v0.1.1LatestOct 7, 2026