sketchbord-mcp

ロシア語版

AIエージェントがSketchbordのホワイトボード上でタスクを可視化し、人間が描いたものを含めてボードを読み返すことができるMCPサーバーです。

ポイントは「フローチャートを描く」ことではありません。エージェントはタスクをいくつかのセクションとして記述します。つまり、ラベル付きの矢印で結ばれた柱として描かれるシステム、チェックリスト、マインドマップ、ファネル、フィッシュボーン、シーケンス図、ロードマップ、付箋の壁、そして時にはフローです。サーバーはそれらをポスターとしてレイアウトし、一目でタスクがわかるようにします。

一枚の絵、ページのツリーではない。 ボードはかつてドリルダウンの階層を育てていました。子を持つブロックはそれ自体がレベルになり、トップレベルはほとんど何も語らず、何かを説明する部分は誰も見ない2クリック下にありました。lanesセクションはそれを一つのビューで示します。部品を並べ、それぞれが内部で何をするか、そしてそれらの間を何が移動するかを矢印に書きます。

これを単なる描画API以上のものにする4つの点:

• 構造を決めるのはタスクの種類ではなく、コンテンツです。 ボードのテンプレートはありません。pick_formは、あなたが持っているものの形（順序、階層、比較、ループ、原因の集合）を、それを運ぶ形式にマッピングし、各形式がどのような場合に間違っているかを示します。2つのタスクに対する2つのボードは似ているべきではなく、隣のセクションを繰り返すセクションは、読者が無駄に2回読まなければならないものです。

• ボード全体を使って描画します。 ボード自身のカタログからのピクトグラム（list_icons — 貼り付け画像ではなく、同じ手で描かれたもの）、部品ごとの色、それに沿って移動するものを示す矢印、そして説明する画面をスケッチするカード（ui: 検索フィールド、ボタン、リストの3行）。すべての要素が言葉の入った長方形である絵は、読者が読まなければならないものです。

• 編集はインクリメンタルです。 visualize_taskのmode: mergeは、指定したセクションだけを書き換え、他のすべて（ユーザー自身の付箋や矢印を含む）はそのまま残します。read_boardはそれらのユーザー追加をuserMarksとして報告するので、エージェントは人間がスケッチしたものに反応できます。例えば、それをコード変更に変えることができます。

• 描いたものを読み返します。 エージェントは盲目的に描きます。自分の絵が4つの積み重なった箇条書きになったこと、矢印の半分が何も言っていないこと、キャプションが文章に成長したことを知ることはありません。そのため、すべての描画は、描画が測定可能に何であるかを答えます。それ以外は何もありません。なぜなら、ルール（「ボードには5つのセクションが必要」）は、タスクが何であれ繰り返される形であり、それがすべてのボードを似たものにするからです。リマークはタスクごとに受け入れるか無視するかの観察であり、リマークする価値がないボードにはリマークは一切ありません。

ツール

Related MCP server: Excalidraw MCP Server

セットアップ

sketchbord.ruからAPIキー（bord_sk_…）が必要です:

• アカウントキー（推奨） — マイボード → APIキー → ボードを選択せずにキーを作成します。タスクごとにボードを作成でき、編集可能な任意のボードに描画できます。

• ボードキー — 同じページでボードを選択した状態、またはボード内: メニュー（☰）→ 「AI連携」。1つのボードにバインドされているため、boardIdは不要です。

MCPクライアントの設定

サーバーはstdioでMCPを話します。キーが設定のすべてです。ホストされているSketchbordは1つで、サーバーはその場所を知っています。

Claude Code / Claude Desktop (.mcp.json または claude_desktop_config.json):

{
  "mcpServers": {
    "sketchbord": {
      "command": "npx",
      "args": ["-y", "sketchbord-mcp"],
      "env": {
        "BORD_API_KEY": "bord_sk_xxx"
      }
    }
  }
}

クローンから使用する場合:

npm install
npm run build
# then "command": "node", "args": ["/path/to/sketchbord-mcp/dist/index.js"]

環境

2種類のキー

• アカウントキー (ボードなし) — アカウント全体で動作するため、エージェントはタスクごとにボードを作成でき (create_board、または newBoard 付きの visualize_task)、編集可能な任意のボードに描画できます。1つのプロジェクトをデフォルトにしたい場合は BORD_BOARD_ID を設定します。

• ボードキー — 単一のボードに紐づいており、キーから推定されます。

セクションの構造

すべてのセクションには安定した id (これにより編集が増分的になります)、kind、title があり、その後にその種類が使用するフィールドが続きます:

• items (note / tag / color / done / span / children) — リスト、手順、チェックリスト、ツリー、マインドマップ、付箋、カード、タイムライン、メトリクス、ファネルの帯 (幅の広い順)、ピラミッドの帯 (頂点から順)、サイクルのステップ、ベン図の集合、フィッシュボーンの原因カテゴリ;

• groups — lanes ポスターの柱 (id / subtitle / icon / color、左端の人物列には bare)、かんばん列、4象限、proscons の2側面 (最初が賛成、次が反対)、roadmap のレーン;

• links — lanes のみ: 柱間の矢印 (from / to はレーン ID・位置・タイトルで指定、label はその経路を流れるもの、both、dashed);

• nodes + edges — フロー / 状態、および sequence。ノードは参加者、エッジはメッセージです;

• columns + rows — table。roadmap の場合、columns は期間で、各アイテムの span はバーが覆う期間を指定します;

• text — note の段落、fishbone の先頭にある影響、venn の重なり部分のキャプション。

任意のアイテム、グループ、セクションには icon を付けることができます (list_icons の ID。それ以外はプレースホルダーとして描画されずに破棄されます)。lanes セクション内のカードは、children の代わりに ui を持つことができます — field / button / row / chip — これにより、説明しているインターフェースがスケッチされます。

width は narrow / normal / wide — 比率のヒントです。ただし lanes では1本の柱の幅を設定します。プランの accent はボードの色を設定するため、2つのボードが同じ見た目になる必要はありません。

フローチャートのノードタイプ: process (ステップ)、decision (分岐 — ラベル付きエッジを使用)、error (失敗)、start/end (終端)。

トークンコスト

このサーバーが公開するツール定義は約 21 KB (~6 000 トークン) で、毎回のリクエストでエージェントのコンテキストに含まれます。その大部分は visualize_task のスキーマであり、これはエージェントが往復なしで記入できる DSL の代償です。それ以外は意図的に薄くしています: どの形式を選ぶかに関する長いガイダンスは pick_form と sketch_board にあり、呼び出されるまでコストはかかりません。また read_board は回答を 60 000 文字に制限しているため、1つのボードでコンテキストウィンドウが埋まることはありません。

ボードの読み取りは信頼境界

read_board は他の人が書いたテキストを返します。サーバーはその内容を明示的な「信頼できないデータ」の区切り文字で包み、サイズを制限します。そのコンテンツはあなたの指示と同じコンテキストでモデルに到達するためです — 「以前の指示は無視してください」という付箋はプロンプトインジェクションの試みであり、ホワイトボードにユーザーが書いたものとして読むべきで、コマンドとして読むべきではありません。

プロンプト例

サービスがどのように構成されているかをボードで説明してください: フロントエンド、API、ワーカー、Postgres、S3。

lanes セクション: パーツごとに1本の柱、各機能に1枚のカード、各カードにアイコン、柱間の links には「HTTP request」「SQL」「file URL」を記載。エンドツーエンドの経路を明記する価値がある場合はその下に process ストリップ、読者がチーム外の場合は glossary ストリップを配置。フロントエンドのカードの ui は「検索画面がある」を実際の画面の絵に変換します。

タスクを描いてください: CSV からカタログへの価格リストのインポート。

固定の答えはありません。エージェントは読者が何を知る必要があるかを尋ね、パーツごとに形式を選びます: インポートの各ステップで失われた行は note に数値を入れた funnel、無関係な複数の失敗原因は fishbone、コード内で触る箇所は tree、CSV・パーサー・カタログ間で何がどの順序で起こるかは sequence。その後、作業用の checklist — 実際のチェックボックスで、実行した人がチェックを入れます。

ボードに矢印と付箋を描きました — 見てコードを修正してください。

read_board は userMarks を返します。例: flow セクションに置かれた「ここにリトライが必要!」という付箋と、2つのブロックを結ぶ手描きの矢印。エージェントはそれに基づいて行動し、visualize_task (mode: merge) または add_sticky オペレーションで決定を反映します — ボードの残りは変更しません。

プランを置き換えて凡例を削除してください。

mode: merge と1つの plan セクションを持つ visualize_task を実行し、次に removeSections: ["legend"] を持つ update_visual を実行します。plan カードはその場で再描画され、他のすべては位置を維持します。

開発

npm install
npm run build      # tsc → dist/
npm run typecheck
BORD_API_KEY=bord_sk_… BORD_API_URL=http://localhost:4000 npm start

ライセンス

MIT — LICENSE を参照。