lousa

Name: lousa
Author: henriquepe

ローカル

github.com/henriquepeメディア・デザイン013 週間前に更新

リポジトリ

lousa について

lousaは、AIエージェントの説明を手描き風アニメーション図にするMCPサーバーとWebビューアーです。エージェントが構造化シーンを作成・更新し、ユーザーは要素を選んで修正を指示できます。

主な機能

01構造化シーンからボードを作成
02シーンの差分更新をアニメーション表示
03要素選択による対象指定の編集
04ボードの読み取り・一覧表示・削除
05ボードのデフォルト有効期限

活用シーン

01認証フローの可視化
02図を使った概念の説明
03選択した図要素の修正

MCP 対応

MCPサーバーは、ボードの作成・更新・読み取り・一覧表示・削除と、ビューアーで選択された内容の取得をツールとして公開します。ローカル実行のほか、設定したリモートサーバーへの接続にも対応します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

mcp.json · 共通設定

{
  "mcpServers": {
    "henriquepe-lousa": {
      "command": "npx",
      "args": [
        "-y",
        "lousa"
      ]
    }
  }
}

起動コマンドnpx -y lousa

ローカルサーバーにはマシン上の実行環境（Node.js 18 以上など）が必要です。設定ファイルの場所はクライアントごとに異なります。

パッケージ

npmlousa0.1.1stdio

ツール

掲載時のツール一覧 · 2 週間前に更新

パラメーター	型	必須	説明
scene	array	はい	描画順に並べた完全なシーン（タイトルと図形を先に、接続する矢印を後に描画）。
title	string	はい	短いボードタイトル。
requests	array	いいえ	ボード作成の元となったユーザーリクエスト。
ttlHours	number	いいえ	ボードが期限切れになり削除されるまでの時間（デフォルトは 12、0 = 無期限、最大 720）。更新のたびに有効期限が延長されます。ユーザーがボードの保持を求めた場合にのみ 0 を使用してください。
narration	string	いいえ	描画の内容を 1～2 文で説明します（ビューアーにカードとして表示されます）。

詳細

Lousa

AI エージェントが説明を描くホワイトボードです。

レートリミッターの説明を、エージェントがストロークごとに描いている様子

エージェントに 「視覚的に説明して」 と頼むと、テキストの長文を返す代わりに、ライブボード上に手描き風の図をアニメーションで描きます。Lousa は MCP サーバーとウェブビューアーです。エージェントが宣言型のシーン（ボックス、矢印、円柱、メモ）を作成し、ボードが目の前で誰かが描いているかのように、ストロークごとに表示します。

Lousa はポルトガル語で、昔ながらの学校の黒板を意味します。

他とは違う点

エージェントが描き手です。 プロンプト入力欄も OCR も不要です。コーディングエージェントはすでにコンテキストを把握しており、型付き MCP ツールを使って描画します。
リアルタイムで段階的に描画します。 追加の指示でシーンを編集すると、開いているタブでは変更箇所だけがアニメーション表示され、図が進化する様子を見られます。
要素を指し示せます。 ビューアー内の要素をクリックして選択し、エージェントに 「選択したものを改善して」 と伝えます。エージェントは get_selection を通じて選択内容を読み取り、指定した要素を正確に対象にします。
ボードはデフォルトで有効期限があります（スライド式で12時間）。ホワイトボードであり、古いドキュメントの墓場ではありません。ttlHours: 0 にすると、ボードを永久に保持できます。

クイックスタート

Node.js 18.17+ が必要です。

# Claude Code
claude mcp add lousa -- npx -y lousa mcp

# or run the server directly
npx lousa            # viewer at http://127.0.0.1:4666

stdio 設定ではコマンドに npx、引数に ["-y", "lousa", "mcp"] を指定すれば、どの MCP ホストでも動作します。stdio エンドポイントはローカルサーバーを自動起動するため、ビューアーをいつでも利用できます。その後、エージェントに 「認証フローの仕組みを描いて」 と頼み、返された URL を開きます。

MCP ツール

ツール	機能
`create_board`	シーンからボードを作成し、`{id, url}` を返します
`update_board`	シーンを置き換えます。変更のない要素はバイト単位で同一のまま保持されるため、変更箇所だけがアニメーション表示されます
`get_board` / `list_boards`	ボードを読み取ります
`get_selection`	ユーザーがビューアーで選択した内容（ID と要素全体）を取得します
`delete_board`	ボードを削除します

シーンは要素の JSON 配列で、box、ellipse、diamond、cylinder、arrow（ID 同士を接続）、line、text、note を rough.js で描画します。完全なスキーマはツール定義に含まれているため、エージェント側で追加の設定は不要です。

共有サーバーのセルフホスト

任意の Node ホストで lousa を実行し、各マシンからそのサーバーに接続します。

LOUSA_TOKEN=<secret> HOST=0.0.0.0 npx lousa        # server
LOUSA_URL=https://your-host LOUSA_TOKEN=<secret> npx lousa mcp   # each client

LOUSA_TOKEN は、ボードの一覧表示・作成・削除と /mcp へのアクセスを制限します。ボードごとの URL は、機能を付与するリンクとして機能します。AWS Lambda + S3 へのデプロイは標準でサポートされています（lambda.js ハンドラーと、ストレージ用の LOUSA_BUCKET）。任意の HTTPS フロントエンド（API Gateway など）が利用できます。

環境変数	デフォルト	用途
`PORT` / `HOST`	`4666` / `127.0.0.1`	サーバーのバインド先
`LOUSA_DATA_DIR`	`~/.lousa/boards`	ファイルシステムでのボード保存先
`LOUSA_BUCKET`	—	ファイルシステムの代わりに S3 ストレージを使用します
`LOUSA_TOKEN`	—	グローバルルートと MCP でベアラートークン（ヘッダーまたは `?t=`）を必須にします
`LOUSA_URL`	—	`lousa mcp` がこのリモートサーバーにプロキシします
`LOUSA_DEFAULT_TTL_HOURS`	`12`	デフォルトのボード有効期限

開発

npm install
npm test          # node --test
node cli.js       # local server

ライセンス

Markdown 対応

ログインしてコメント

MCP は初めてですか？

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

入門ガイドを読む

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。

lousa

lousa について

主な機能

活用シーン

MCP 対応

設定

ツール

詳細

Lousa

他とは違う点

クイックスタート

MCP ツール

共有サーバーのセルフホスト

開発

ライセンス

コメント

MCP は初めてですか？

MCP（Model Context Protocol）とは？

MCP サーバーとクライアントの違いは？

ローカルとリモート、どちらを選ぶべき？

Claude や Cursor にサーバーを導入するには？

掲載プロジェクトは審査されていますか？「認証済み」とは？

自分のプロジェクトが掲載されています。どう申請できますか？