mcpField
M
Maket

Maket

ローカル
ng-galien.github.io生産性204 日前に更新

Maket について

Maketは、AIアシスタント向けのMCPサーバー兼ビジュアル文書キャンバスです。ブランドに沿った文書、データ駆動型文書、継続更新する文書を作成でき、HTML/CSSのライブプレビューや検証済みデータ、PDF出力を備えています。

主な機能

  1. 01HTML/CSSキャンバスとライブプレビュー
  2. 02再利用可能なブランドスタイルと画像ライブラリ
  3. 03スキーマ検証付きデータコレクション
  4. 04リビジョン管理付き文書状態
  5. 05PDF出力とGmailの下書き

活用シーン

  1. 01ブランドに沿ったチラシやレポートの作成
  2. 02データ行から個別文書を生成
  3. 03更新され続けるチェックリストや状況ボードの管理
  4. 04完成文書のPDF出力

MCP 対応

MaketはMCPサーバーを通じて、文書の作成・編集機能をMCPクライアントに提供します。コレクションや文書状態を扱うツールも含まれます。

設定

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

mcp.json · 共通設定
{
"mcpServers": {
"ng-galien-maket": {
"command": "npx",
"args": [
"-y",
"@ng-galien/maket"
]
}
}
}
起動コマンドnpx -y @ng-galien/maket

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

パッケージ
npm@ng-galien/maket2.2.0

ツール

14

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

パラメーター型必須説明
bgstringいいえ安全な背景色。charte、profile、tokenRefs より優先されます。
fgstringいいえ安全な前景色。charte、profile、tokenRefs より優先されます。
docstringはいドキュメント名
codestringはいMermaid 図の構文。ヘッダーを単独の行に記述し、その後にステートメントを記述します。例:"graph TD\n A-->B\n B-->C"。
fontstringいいえ安全なプライマリフォントファミリー。フォールバックスタックは最初のフォントファミリーに正規化されます。charte、profile、tokenRefs より優先されます。
linestringいいえ安全なコネクターの色。charte、profile、tokenRefs より優先されます。
pagenumberはいページ番号(1 始まり)
mutedstringいいえセカンダリテキストの色。charte、profile、tokenRefs より優先されます。
themeenumいいえ任意の組み込み図表 profile。自動 charte デフォルトより優先されます。tokenRefs と直接指定した値はさらに優先されます。zinc-light | zinc-dark | tokyo-night | tokyo-night-storm | tokyo-night-light | catppuccin-mocha | catppuccin-latte | nord | nord-light | dracula | github-light | github-dark | solarized-light | solarized-dark | one-dark
widthstringいいえラッパーの CSS 幅(例:"180mm"、"100%")。デフォルト:auto。
accentstringいいえ安全な矢印/アクセントカラーです。charte、profile、または tokenRefs を上書きします。
borderstringいいえノードとグループの境界線の色です。charte、profile、または tokenRefs を上書きします。
dataIdstringいいえラッパー要素の data-id です。デフォルト:自動生成(mermaid-1、mermaid-2...)
heightstringいいえラッパーの CSS 高さです(例:"120mm")。デフォルト:auto。
paddingnumberいいえフローチャート/状態図キャンバスのパディング(px)。
surfacestringいいえノードの表面色です。charte、profile、または tokenRefs を上書きします。
positionenumいいえターゲットに対する挿入位置です。デフォルト:beforeend。beforebegin | afterbegin | beforeend | afterend
targetIdstringいいえ挿入先となる親要素の data-id です。デフォルト:ページのルート要素。
tokenRefsobjectいいえドキュメント charte 上のトークンへの明示的な参照です。図の役割をキーにします。例:{"bg":"color.paper","accent":"color.primary","font":"font.body"}。
tokenRefs.bgstringいいえbg の charte トークン参照(形式は "group.key")。
tokenRefs.fgstringいいえfg のチャートトークン参照。形式は "group.key" です。
tokenRefs.fontstringいいえfont のチャートトークン参照。形式は "group.key" です。
tokenRefs.linestringいいえline のチャートトークン参照。形式は "group.key" です。
tokenRefs.mutedstringいいえmuted のチャートトークン参照。形式は "group.key" です。
tokenRefs.accentstringいいえaccent のチャートトークン参照。形式は "group.key" です。
tokenRefs.borderstringいいえborder のチャートトークン参照。形式は "group.key" です。
tokenRefs.paddingstringいいえpadding のチャートトークン参照。形式は "group.key" です。
tokenRefs.surfacestringいいえsurface のチャートトークン参照。形式は "group.key" です。
tokenRefs.nodeSpacingstringいいえnodeSpacing のチャートトークン参照。形式は "group.key" です。
tokenRefs.transparentstringいいえtransparent のチャートトークン参照。形式は "group.key" です。
tokenRefs.layerSpacingstringいいえlayerSpacing のチャートトークン参照。形式は "group.key" です。
nodeSpacingnumberいいえフローチャート/状態図で、同じ階層のノード間に設ける水平方向の間隔(px)。
transparentbooleanいいえSVG の背景なしでレンダリングします。デフォルト:false。
layerSpacingnumberいいえフローチャート/状態図で、図のレイヤー間に設ける垂直方向の間隔(px)。

詳細

Maket

AI アシスタントと一緒にビジュアルドキュメントを作成できます。 Maket は、Claude、Codex、Gemini などの MCP クライアントに、ライブプレビュー付きの HTML/CSS キャンバスを提供します。単発のデザインを作成したり、テンプレートを型付きの行に紐づけてメールを一括作成したり、検証済みのドキュメント所有状態を追加して、ネイティブ HTML コントロールやエージェントによる更新でドキュメントを常に最新に保ったりできます。完成した出力を PDF にエクスポートするか、Gmail の下書きとして引き渡せます。

npm バージョン npm ダウンロード数 ライセンス:MIT Node MCP ng-galien/maket MCP サーバー CI カバレッジ PR を歓迎します

Maket のウェブサイトはこちら →

Maket のデモ紹介

60 秒 · ブランドガイド → ライブラリ → データ → AI による構成 → あらゆる種類のドキュメント → エクスポート。


Maket アプリのインストール

Maket アプリは、Maket を実行する標準的な方法です。インターフェース、サーバー、 ランタイム、エージェントのセットアップが含まれており、Node.js は不要です。

プラットフォームインストーラー
macOS Apple SiliconMaket-macOS-arm64.dmg
macOS IntelMaket-macOS-x64.dmg
Windows x64Maket-Windows-x64-Setup.exe
Linux x64Maket-Linux-x64.deb または Maket-Linux-x64.rpm

最新のスナップショットをダウンロード して、今すぐ Maket アプリをお試しください。スナップショットのインストーラーは署名されておらず、main からビルドされ、 14 日間保存されます。macOS および Windows 向けの同じ署名なしインストーラーと Linux パッケージは、 最新リリースにもあります。

インストーラーを開いて Maket を起動し、初回起動時のエージェント設定に従ってください。

ヘッドレスサーバー、CI へのインストール、またはブラウザーのみのデプロイが必要ですか?
Maket Server を npm で利用する方法に進んでください。

Maket を選ぶ理由

AI アシスタントは文章を書くのが得意です。しかし、デザインを形作るのは余白、階層、リズムであり、それらが生まれるのは文章ではなくレイアウトです。Maket は、実際に使えるキャンバス、再利用可能なビジュアルリソース、そして 2 種類の異なるデータモデルを追加します。コレクションは順序付きの行から複数のバリエーションを生成し、ドキュメント状態は、各ドキュメントを検証済みでリビジョン管理された独自のデータと同期させます。

機能

  • ライブプレビュー — AI がページを作成すると、変更がすぐにブラウザーに反映されます。詳細ドキュメントのツールバー(または接続済みの Reader)で Annotate を使うと、要素を選択してエージェントへのフィードバックを保存できます。オフにすると、再びページを操作できます。
  • HTML/CSS キャンバス — ページは mm 単位でサイズ指定された実際の HTML です。独自形式に縛られることはありません。
  • ブランドチャート — デザイントークン(色、フォント、間隔、影)を一度定義すれば、Maket がデザイン中に適用します。
  • 画像ライブラリ — 画像を追加してタグを付けると、AI がブリーフに合った画像を選びます。
  • データ駆動型コレクション — JSON Schema で型付きフィールドを定義し、順序付きの行を貼り付けまたは編集して、{{ product_name }} などのプレースホルダーにページをバインドします。1 行またはシリーズ全体をプレビューし、行ごとに 1 ページを出力できます。
  • 更新可能なドキュメント — JSON Schema と状態スナップショットを 1 つのドキュメントに添付し、{{ state.* }} の値を描画できます。バインドされたチェックボックス、テキスト、選択、ボタンの各コントロールから対応フィールドを編集し、履歴と復元用に不変のリビジョンを保持できます。
  • PDF エクスポート — ヘッドレス Chromium による印刷用出力です。
  • Gmail の下書き — メールドキュメントを作成し、Gmail の下書きとして引き渡せます。内容を確認して送信するのはユーザー自身です。
  • 用紙・画面形式 — A2~A8、DESKTOP/TABLET/MOBILE のアスペクト比、および幅を定義して高さをコンテンツに応じて調整する AUTO ページに対応しています。
  • エージェントスキルを同梱 — AI アシスタントにドキュメントのデザイン、ブランド設定、レビュー方法を教える 3 つのスキル(maket、maket-charte、maket-review)が含まれています。

表示例

You    — fais-moi un flyer A5 pour un concert jazz dimanche soir, ambiance feutrée

AI     — maket_doc new doc="Jazz flyer" format=A5 orientation=portrait
         maket_charte view name="Smoky Club"
         maket_html set doc="Jazz flyer" page=1 context_token=...
         → Live preview opens. Warm amber on deep navy, serif display for
           the headline, fine sans for the venue details.

You    — (clicks the date on the preview) "rends-la plus grosse"

AI     — maket_workspace list_messages → sees your note
         maket_html patch doc="Jazz flyer" ops=[...]
         → Date scales up, hierarchy re-balanced.

You    — parfait, exporte

AI     — maket_pdf doc="Jazz flyer"
         → ~/.maket/exports/jazz-flyer.pdf

データ駆動型ドキュメント

コレクションを使うと、ページを商品ラベル、イベント用バッジ、パーソナライズされたチラシ、証明書、カタログページなど、繰り返し作成するあらゆるドキュメントの再利用可能なテンプレートにできます。各コレクションは、JSON Schema と順序付きの行セットを持ちます。ページにバインドし、HTML 内に {{ field_name }} で型付きの値を配置すると、Maket が行ごとにバリエーションを描画します。

Collections ワークスペースと maket_collection ツールは、どちらもスキーマの変更、行の追加・更新・削除、貼り付けに適した表形式の編集、検証結果のフィードバックに対応しています。Maket は、スキーマ、すべての行、すべてのプレースホルダーを検証してから描画します。プレビューでは、元のテンプレートを表示したままにする、選択した 1 行を確認する、生成されたシリーズ全体を表示する、のいずれかを選べます。印刷と PDF の出力では、バインドされたページがすべての行に展開されます。

You    — crée une série d'étiquettes produit avec le nom et le prix

AI     — maket_doc new doc="Product labels" format=A6 orientation=portrait
         maket_collection action=create name=products
           schema='{"type":"object","properties":{"product_name":{"type":"string"},"price":{"type":"string"}},"required":["product_name","price"]}'
         maket_collection action=add_row name=products
           data='{"product_name":"Earl Grey","price":"12 €"}'
         maket_collection action=add_row name=products
           data='{"product_name":"Sencha","price":"14 €"}'
         maket_collection action=bind doc="Product labels" page=1 name=products
         maket_html set doc="Product labels" page=1
           html='<article data-id="label"><h1 data-id="name">{{ product_name }}</h1><p data-id="price">{{ price }}</p></article>'
         → The preview can show the template, either product, or both generated labels.

You    — exporte toute la série

AI     — maket_pdf doc="Product labels"
         → One PDF page per collection row.

ライブドキュメント

ドキュメント状態は、チェックリスト、ステータスボード、フォーム、レポートなど、現在の値がそのドキュメントに属する単一の進行中の成果物を対象とします。maket_state は JSON Schema とデータスナップショットを初期化し、すべての更新を検証し、変更には現在のリビジョンを必須とし、受け入れた各変更を完全で不変のリビジョンとして記録します。更新時には既存のページが再描画されます。差し込み印刷のバリエーションは作成されません。

ページでは HTML、JSON Forms、または現在の JSON Forms テンプレートを埋め込んだ HTML を使用できます(``)。手書きの HTML テンプレートでは、表示にサポート対象の Mustache サブセットを使用し、編集には明示的な data-maket-bind 属性を使用します。JSON Forms テンプレートは maket_page action=set_form で設定します。任意の UI スキーマでレイアウトを制御でき、フィールドと選択肢はドキュメント状態の JSON Schema によって指定されます。Maket は同じ状態オーナーを通じて、どちらの形式もネイティブコントロールで描画します。同じ現在の値は、スナップショット、印刷、PDF 出力にも受動的に表示されます。

順番に質問する場合は、HTML に対象と回答履歴の Mustache リストを置き、Mustache セクションの外側にある静的ブロックコンテナー内に `` をちょうど 1 つ配置し、質問ごとに maket_page action=set_form を呼び出します。フォームを変更しても HTML とドキュメント状態は保持されます。埋め込みフォームはコンテナーに合わせて調整されます。

JSON Forms のスタイルはレンダラーが管理します。charte を適用して、テキスト、背景、サーフェス、境界線、アクセント、ミュート、フォントのトークンを設定します。UI スキーマで制御するのは構造と表示オプションであり、任意の CSS ではありません。

<h1 data-id="title">{{ state.title }}</h1>
<label data-id="done-label">
  <input data-id="done-input" type="checkbox" data-maket-bind="state.done">
  Done
</label>
<input data-id="owner-input" type="text" data-maket-bind="state.owner">

maket_state action=init を使用して初期スキーマとデータを関連付け、その後 get、patch または update、history、revision、restore を使用して管理します。ポータブルな .maket バンドルには、現在のスキーマ、データスナップショット、テンプレート形式が含まれます。インポートすると、過去のリビジョンをコピーするのではなく、リビジョン 1 から新しいローカル履歴が始まります。テンプレート、スキーマ、コントロール、並行処理に関する正確なルールについては、ドキュメント状態テンプレートの仕様をご覧ください。

構造化ワークスペース

構造化ワークスペースは、1 つ以上の名前付きコレクションをまとめたもので、それぞれの詳細ビューは実際に永続化されるライブドキュメントです。データスキーマは各アイテムを検証し、oneOf を使用できます。表現スキーマは各コレクションにグローバルテンプレートを設定し、具体的なスキーマパスをコンパクト表示用および詳細表示用のテンプレートドキュメントに結び付けます。すべてのコレクションには identity があり、これはアイテムの必須の文字列または数値プロパティを指す JSON Pointer です。データスキーマで id プロパティが必須の場合、デフォルトは /id です(そのため、データスキーマだけからでもワークスペースを作成できます)。そのプロパティの値は、ドキュメント、注釈、ピン、カーソル、MCP 呼び出しなど、あらゆる場所でアイテム ID として使われ、コレクションをすべて含むワークスペース全体で一意でなければなりません。また、Maket が値を生成することはありません。その値がないアイテム、またはワークスペース内の別のアイテムがすでに持つ値を指定したアイテムの追加は、該当フィールド名または既存アイテムを示して拒否されます。更新で値を変更することはできず、生成された詳細フォームでは読み取り専用で表示されます。アイテムを追加すると、そのデータはリビジョン 1 で保存され、コレクションの挿入順序で次の値が割り当てられます。この値は保存されるカウンターであり、増加するだけで再利用されることはありません。コレクションでは sortBy(/place など、アイテムデータ内の JSON Pointer)と、ascending または descending の sortDirection を宣言できます。その場合、インデックスは各グループのカードをその値で並べ、値が同じ場合はアイテム ID で並べます。アイテムまたは定義が変更されるたびに再ソートされます。これらを宣言していないコレクションは挿入順を維持します。identity の宣言前に作成されたワークスペースは一度だけ移行され、identity のない各コレクションには、以前のアイテム ID を保持する id プロパティが追加されます(id プロパティが別の値を保持していた場合は itemId が使われます)。これにより、ドキュメント、注釈、ピンの参照は維持されます。identity より前に書き出されたバンドルからワークスペースを読み込む場合も、インポート時に同じ宣言が追加されます。 アイテムは、データソースインターフェース(packages/server/src/services/item-sources/ にある ItemSource)を通じて、インデックス、ワークスペースのビュー、MCP の回答に提供されます。このインターフェースは、カーソルと合計数を添えてインデックス順にアイテムの概要を一覧表示し、リビジョン付きでアイテムを 1 件読み込み、指定されたリビジョンで書き込みます。最初の実装は Maket 独自のストレージで、各アイテムはデータとリビジョンを格納する structured_workspace_items の 1 行です。データはソースが保持し、描画はドキュメントが担います。アイテムのドキュメントは、アイテムを初めて開いたときにのみ作成され、Workspace ID とアイテム ID から ID が導出され、add_item で指定した名前が付けられます。この名前は、アイテムを開いたかどうかにかかわらず、そのアイテム用に予約されます(maket_doc とドキュメントコマンドでは使用できません)。アイテムのドキュメントは Maket の起動時には読み込まれず、必要になったときに読み込まれます。また、一度開かれると読み込まれた状態が維持されます。エクスポート時には、不足しているドキュメントが作成され、バンドルの書き込み後に削除されます。アイテムのドキュメントは Documents ライブラリやドキュメント検索には含まれず、その状態は行のミラーであり、開いたときと各書き込みの後に更新されます。.maket バンドルには、各 Workspace の定義とアイテムの行(ID、データ、リビジョン)、および描画済みのアイテムドキュメントが含まれます。ドキュメントの状態にアイテムデータが含まれることはありません。インポートでは行が再構築され、エクスポートではドキュメントが含まれなかったすべてのアイテムが報告されます。詳細フォーム、maket_state、update_item はいずれも、行のリビジョンを指定してソース経由で書き込みます。そのため、古いリビジョンでの書き込みは、現在のデータとともに拒否されます。アイテムの履歴はドキュメントの状態には保存されません。一覧はカーソルを使って読み込まれます。クエリ(コレクションの searchFields を対象にしたフリーテキスト検索。デフォルトではすべてのテキストプロパティが対象で、大文字小文字とアクセントを無視します。フィルター、並べ替え、バッチサイズを指定できます。indexPageSize はデフォルトで 50、最大 500)は、1 バッチと、不透明な next カーソル、合計数、各グループのアイテム数を返し、これらの処理は 1 つの SQLite クエリにまとめて実行されます。新しいクエリでは先頭から読み直し、ページ番号はありません。並べ替えがある場合、カーソルは並べ替え値とアイテム ID、並べ替えがない場合は挿入順序とアイテム ID です。最初のバッチより前から存在し、並べ替え値が変わらないアイテムがスキップされたり、重複して表示されたりすることはありません。一方、ページング中に並べ替え値が変わるアイテムは、カーソルをまたいで移動する場合があります。check と update_definition はソース経由でバッチごとにアイテムを読み込み、update_definition は新しい定義に対する最初の違反を報告します。サーバーは各コレクションの現在のウィンドウを保持し、すべてのクライアントとエージェントで共有します。ソースに変更があれば、ウィンドウを読み直します。インデックスドキュメントには、このウィンドウ(最初のバッチと、その後読み込まれた各バッチ)が描画され、グループヘッダーにはクエリ全体の件数が表示されます。インデックスペインには検索バーとさらに読み込むためのコントロールがあり、クライアントが保持するのはウィンドウと軽量なワークスペースビュー(アイテム数とピン留めされたアイテムであり、アイテムデータは保持しません)のみです。また、maket_structured_workspace action=view は、ウィンドウの 1 バッチをカーソルとともに返します。

エージェントが Workspace を構築する方法は 3 つあり、maket_learn action=topic topic=structured-workspaces に手順が記載されています。データスキーマのみを指定する方法では、Maket がインデックス、詳細、カードの各テンプレートと編集フォームを作成します。create 呼び出しでテンプレート HTML とフォームをインライン指定する方法でも、Maket が Workspace カテゴリーにテンプレートドキュメントを作成して名前を付けます。あらかじめ作成したテンプレートドキュメントを指定する方法では、Documents ライブラリからバインドを切り離します。allow_incomplete が設定されていない場合、create と update_definition はエラーのある定義を拒否します。エラーごとに、コレクション、パス、修正方法を 1 行で示します。maket_structured_workspace action=check は、準備完了または未完了の判定と、すべての指摘、その修正方法、次の呼び出しを返し、何も変更しません。 Workspace サイドバーにはコレクションのインデックスとピン留めした項目のみが表示されます。その他の項目はインデックスから開き、テンプレートは引き続き Workspace のアクションメニューから利用できます。一般ツールバーにあるアイコンのみの表示切り替えでは、単一ドキュメント(Square)とリスト/詳細(PanelLeft)を切り替えます。表示選択用の個別のツールバーはありません。別の項目を開くと現在の詳細ペインが置き換わり、項目を閉じるとインデックスに戻ります。どちらのペインも Reader で開き、通常のスクロールを使用します。幅の狭い AUTO リストでは、これまでに読み込まれたバッチが連続した 1 ページ上に保持され、さらに読み込むためのコントロールを使うと次のバッチが追加されます。Canvas に明示的に移動すると、個別のホイールズームとドラッグによるパンが有効になり、ヘッダーのパーセンテージを使って表示をフィット状態に戻せます。ドラッグ可能でキーボード操作にも対応したセパレーターは、幅 28/72 から始まり、幅を調整できます。狭いウィンドウではライブラリがオーバーレイとして開き、読みやすいドキュメント幅とピン留めの設定が保たれます。項目のピン留めは保持され、サイドバーから解除できます。この閲覧画面では、ライブドキュメントのフォームを操作できます。テンプレートの作成・編集は引き続きキャンバス上で行います。

Reader では、複数ページのドキュメントの場合、各ページの上にタイトルを表示して、フォーカス中のドキュメントを表示します。コレクションの閲覧から Reader に移動すると現在のページが保持されます。Reader 内で開いているインデックスと項目を切り替えても、それぞれのナビゲーションコンテキストが保持されます。Reader を閉じると、元のドキュメントとページ、および単一/分割レイアウトが復元されます。どちらかの分割ペインでページが表示されても、もう一方のペインからフォーカスを奪うことなく、それぞれの位置が記憶されます。すべてのドキュメントを閉じると、保留中の明示的なオープン処理がキャンセルされるため、サーバーからの応答が遅れても Workspace が再び開くことはありません。

テンプレートで制御されるページは、既存のすべての項目とインデックスドキュメントで同期され、テンプレート上で編集されます。1 つのインスタンスに追加したページは編集可能なまま残り、テンプレートとの同期後も保持されます。maket_structured_workspace では、MCP を通じて Workspace の作成、リビジョン確認付きのスキーマおよびテンプレートバインディングの変更、項目の作成と変更、削除、確認、明示的なテンプレート同期が可能です。

インストールの詳細

ご使用のマシンに該当する行を選んでください。

プラットフォーム推奨内容
macOS(Apple Silicon または Intel)Maket App — .dmgネイティブウィンドウ、組み込みサーバー、初回起動時のエージェント設定
Windows x64Maket App — .exe installer同上
Linux x64Maket App — .deb または .rpmネイティブウィンドウと組み込みサーバー、手動更新
オプション A — Maket アプリ

最新リリースから、お使いのプラットフォームに対応するファイル名のインストーラーをダウンロードします。

  • macOS Apple Silicon — Maket-macOS-arm64.dmg
  • macOS Intel — Maket-macOS-x64.dmg
  • Windows x64 — Maket-Windows-x64-Setup.exe
  • Linux x64 — Maket-Linux-x64.deb または Maket-Linux-x64.rpm

macOS では、.dmg を開き、Maket を Applications にドラッグします。Windows ではインストーラーを実行します。スタートメニューの項目とデスクトップショートカットが作成されます。macOS と Windows のインストーラーは現在、署名されていません。macOS で初回起動時に Gatekeeper にブロックされた場合は、Maket を Control キーを押しながらクリックして Open を選択し、確認します。Windows では SmartScreen の警告が表示されることがあり、その場合は手動で確認する必要があります。Linux では、お使いのディストリビューションのパッケージマネージャーを使ってパッケージをインストールします。更新は手動でダウンロードしてください。未リリースのバージョンを使う場合は、対応する main コミットの Linux スナップショットアーティファクトを使用します。Linux のインストールとサンドボックス診断を参照してください。

Maket アプリには独自のランタイムが含まれているため、Node.js をインストールする必要はありません。初回起動時に、マシン上で見つかった AI クライアント(Claude Code、Codex、Gemini)を組み込みサーバーに接続するかどうかが表示されます。また、Claude Desktop 用の同梱コネクターをインストールできます。組み込みサーバーは 127.0.0.1:24843 で待ち受けます。

以前に npm からインストールした Maket サーバーがすでに実行中の場合、アプリにその旨が表示され、停止して引き継ぐかどうかを確認されます。確認なしにプロセスが終了されることはありません。

ウィンドウ以外からもアクセスできます。Maket メニューの Ouvrir dans le navigateur を選ぶと、同じマシン上の任意のブラウザーで http://127.0.0.1:24843 に同じワークスペースが表示されます。アクセスできるのはそのマシンだけです。サーバーはパブリックインターフェースで待ち受けないため、ネットワークに公開されることはありません。

更新は自動的に確認され、確認後にインストールされます。Settings の Candidate チャンネルを選ぶと、検証ビルドを利用できます。

オプション B — npm 経由の Maket サーバー(上級者向け)
# Install Maket and its compatible headless Chromium
npm install -g --allow-scripts=puppeteer @ng-galien/maket

# Wire Maket into your AI client (drop --apply for a dry run)
maket install claude --apply
maket install codex  --apply
maket install gemini --apply

# Start the local server and open the preview
maket start
maket open

Chrome、Edge、またはその他の対応ブラウザーで、ブラウザーの UI または Maket Settings にある Install Maket を使うと、ワークスペースを独立したアプリケーションウィンドウに表示できます。この PWA は同じローカルサーバーを使います。ネイティブプロセスの起動、停止、更新は行わないため、maket start、maket stop、maket update は引き続き明示的にターミナルから実行するコマンドです。

明示的な --allow-scripts=puppeteer は、npm 11 以降の依存関係スクリプトのポリシーにより必要です。これにより Puppeteer は、インストール済みの Maket リリースで指定された正確なヘッドレス Chromium ビルドをダウンロードできます。Maket 自体でブラウザーのバージョンが固定されているわけではありません。インストール後に maket doctor を実行し、Chromium を実際に起動できること、データディレクトリに書き込み可能であること、MCP サーバーが応答することを確認してください。

CLI は、絶対パスで指定したローカルの Node ランタイムとインストール済みの Maket エントリーを、~/.claude.json の mcpServers.maket エントリーに登録します(Claude Code CLI がインストールされている場合は claude mcp add を実行します)。または、~/.codex/config.toml の [mcp_servers.maket] セクション、あるいは ~/.gemini/settings.json の mcpServers.maket エントリーに登録します。この標準的なコマンドと引数の形式は、GUI アプリケーションのシェル PATH に依存しません。Node または Maket のインストール先を移動した後は、maket install <client> --apply を再実行してください。引数を指定しない場合、Maket エントリーは stdio MCP ブリッジとして実行されます。これは、Claude Desktop、Codex、Gemini、その他の MCP クライアントが自動的に呼び出す形式です。

デーモンの操作:maket status、maket logs [--bridge]、maket stop、maket restart。診断:maket doctor、maket config。アップグレード:maket update [--check]。インストールの取り消し:maket uninstall <claude|codex|gemini> --apply。install claude で --scope=project を使うと、ユーザースコープのファイルではなく <cwd>/.mcp.json に書き込みます。グローバルフラグ --data-dir、--port、--host は、すべてのコマンドで対応する MAKET_* 環境変数を上書きします。

オプション C — クローンして開発する
git clone https://github.com/ng-galien/maket.git
cd maket
npm install
npm run dev

:24844 で開発サーバーを起動し、:5173 で Vite HMR を起動します。付属の .mcp.json は、プロジェクト内で開いた MCP クライアントを http://localhost:24844/mcp に接続します。ポート :24843 は、インストール済みデスクトップアプリ用に予約されています。

コード品質とアーキテクチャのルール

Maket は構造ルールとコードスメルのレビューに code-moniker を使用します。バージョン管理されているルールのソースは .code-moniker.toml です。npm run smell:rules で既定のルールを確認し、npm run smell:review でリポジトリをレビューできます。品質ゲートでは、npm run quality を通じてこのレビューを実行します。

強制適用可能なアーキテクチャルールや境界ルールを AGENTS.md に追加しないでください。また、code-moniker と並行して場当たり的なチェッカースクリプトを追加しないでください。AGENTS.md はリポジトリで作業するエージェント向けの運用ガイダンスであり、プロジェクトのルールエンジンではありません。境界ルールをまだ code-moniker で表現できない場合は、別のローカルルールシステムを作るのではなく、code-moniker の進化課題として記録してください。

例外はローカルかつ明示的に扱います。ルールが意図的に適用されない場合も、ルールは有効のままにし、チェック対象のファイルに対象を絞った抑制コメントを追加してください。たとえば // code-moniker: ignore[maket-hygiene-limits-callable-size] のように記述し、その近くに設計上の理由を説明してください。

オプション D — デスクトップ拡張機能としてパッケージ化する(.mcpb)
npm install -g @anthropic-ai/mcpb
npm run build:client
node scripts/pack-mcpb.ts
# → dist/maket.mcpb

dist/maket.mcpb をデスクトップ MCP ホストにドラッグします(例:Claude Desktop → Settings → Extensions)。

要件: MCP 互換のクライアント(Claude Code、Claude Desktop、Codex、 Gemini など)。Maket App にはそれ以外のすべてが同梱されています。npm、クローン、.mcpb の各方法では、追加で Node.js ≥22 が必要です。

CLI リファレンス
maket [command] [--data-dir <path>] [--port <n>] [--host <h>]

  bridge                Run the MCP v2 stdio gateway (default for MCP clients)
  start                 Start the Maket HTTP server in the background
  stop                  Stop a server started by 'maket start'
  restart               Stop (if running) then start
  status                Show whether the server is reachable
  open                  Open the Maket UI in your browser
  logs [--bridge]       Tail server (or bridge) logs
  config                Print the resolved runtime config
  doctor                One-shot diagnostic (node, port, data dir, Chromium, Gmail, npm)
  update [<version>]    Upgrade the CLI (or pin to <version>); --check for a no-op compare
  install <client>      Wire Maket into an MCP client  (claude | codex | gemini)
  uninstall <client>    Remove Maket from an MCP client (claude | codex | gemini)
                          install/uninstall flags: --apply, --scope=user|project
  gmail <sub>           Manage Gmail OAuth state       (status | reset [--force])
  help, version

ツール

Maket は 15 個の複合 MCP ツールを公開します。それぞれのツールは複数のアクションを実行します。

ツール機能
maket_docドキュメントのライフサイクル — 新規作成、一覧表示、削除、複製、名前変更、メタ情報、エクスポート/インポート
maket_learnエージェント向けの構造化 Markdown ドキュメント — ワークフロー、HTML、チャート、図、データ、レビュー、インストール
maket_workspaceセッション操作 — フォーカス、状態、ロック、メッセージ一覧表示、メッセージ確認
maket_pageページ構造と JSON Forms テンプレート — 追加、削除、名前変更、並べ替え、一覧表示、フォーム設定、フォーム取得
maket_canvasキャンバスの設定 — 形式、向き、背景、各辺の印刷余白
maket_htmlページコンテンツ — set(全体置換)、patch(data-id による限定的な操作)、get、check(レイアウトのはみ出し/重なり/余白の確保状況)
maket_charteブランドチャート — 一覧表示、表示、設定、削除
maket_collection型付きデータコレクション — 一覧表示、表示、作成、スキーマの検証/変更、行の追加/更新/削除、ページへのバインド/解除
maket_stateドキュメントが所有する状態 — 初期化、取得、更新または JSON Patch、スキーマの検証/変更、履歴とリビジョンの確認、復元
maket_structured_workspaceスキーマ駆動型のアイテムコレクション — 作成(スキーマまたはインライン指定からテンプレートを生成し、コレクションごとに ID を宣言)、チェック、カーソルによるアイテム読み取り、アイテムの追加/更新/削除、テンプレートページの同期
maket_imageアセットライブラリ — 一覧表示、表示、メタ情報、インポート、削除
maket_previewライブプレビュー URL を開く、またはページを PNG としてスナップショット化
maket_mermaidセマンティックトークンと安全な視覚調整機能を使って、永続的でチャートを認識する Mermaid 図をレンダリング
maket_pdfヘッドレス Chromium 経由でドキュメントを PDF にエクスポート
maket_gmailGmail — 接続、検索、読み取り、下書き作成

レイアウトと印刷余白のガイド:docs/layout.md — プレビュー内のシアン色のセーフゾーンの意味、用途別の余白プリセット、表示に問題がある場合にアシスタントに尋ねるプロンプトを説明しています。

プラグインとスキル

MCP サーバーは、エージェントのオンボーディングに関する信頼できる情報源である maket_learn を公開しています。スキルは簡潔に保たれており、製品知識を重複させるのではなく、Claude、Codex、Gemini を最新のツールガイダンスへ導きます。人間向けのオンボーディングは別途用意されており、Maket UI の「ヘルプ」ボタンから開きます。

plugin/claude/ ディレクトリには、3 つのエージェントスキルが含まれています。

  • maket — ガイダンススキルです。maket_learn から始め、その後、デザイン作業に MCP ツールを使用します。
  • maket-charte — ブランドアイデンティティのエキスパートです。ブリーフ、業界、または参照 URL から、一貫性のあるデザイントークンシステムを構築します。
  • maket-review — QA エージェントです。シャルトへの準拠、画像パス、レイアウトのはみ出しを監査し、maket_html patch で問題を修正します。

Claude、Codex、Gemini の互換性ファイルは plugin/ の下にあります。

設定

デフォルトでは、Maket は ~/.maket/ にデータを保存します。

  • documents.db — SQLite(ドキュメント、シャルト、コレクション、アセットのメタデータ)
  • assets/、documents/、exports/ — ユーザーファイル

環境変数で上書きできます。

変数デフォルト用途
MAKET_PORT24842(npm run dev では 24844、start:isolated では 3333)HTTP サーバーのポート
MAKET_DATA_DIR~/.maket/ユーザーデータディレクトリ
MAKET_DB$MAKET_DATA_DIR/documents.dbSQLite のパス
GOOGLE_CLIENT_ID / GOOGLE_CLIENT_SECRET—Gmail OAuth 認証情報(任意)
Gmail 連携(任意、上級ユーザー向け)

Maket では、作成したドキュメントを Gmail の下書き(PDF 添付ファイル付き)にできます。作成するのは下書きのみで、送信することはありません。Gmail で下書きを確認し、ご自身で「送信」をクリックしてください。

セットアップには約 10 分かかります。Google Cloud Console でご自身の OAuth Desktop クライアントを登録し、Gmail API を有効にして、ご自身をテストユーザーとして追加し、JSON を Maket のセットアップフォームに貼り付けます。認証情報はオーナーのみがアクセスできる権限で ~/.maket/ に保存されます。リポジトリにも、サーバーにも保存されません。

詳しい手順とトラブルシューティング:docs/gmail-setup.md。

セットアップ後に使える簡単な CLI ヘルパー:

maket gmail status         # check whether credentials are in place
maket gmail reset --force  # wipe and start over
下流のワークスペースをブートストラップする

Maket を長時間稼働するサーバーとして実行し、他のプロジェクトから接続したい場合:

make bootstrap DIR=/path/to/my-project PORT=3335

対象ディレクトリに .mcp.json、.claude/skills/、最小限の package.json を作成します。既存のファイルを上書きすることはありません。

アーキテクチャ

各要素の連携方法
┌──────────┐   MCP Streamable HTTP   ┌────────────────────────┐
│ AI agent │ ──────────────────────► │  Express @ :3333       │
│  (any    │                         │  ├─ /mcp  (MCP server) │
│  MCP     │                         │  ├─ /assets, /export   │
│  client) │                         │  └─ WS /ws (preview)   │
└──────────┘                         └────────┬───────────────┘
                                              │
                                     ┌────────┴────────┐
                                     │  SQLite         │
                                     │  ~/.maket/*.db  │
                                     └─────────────────┘
                                              │
                                              ▼ WS broadcast
                                     ┌─────────────────┐
                                     │ React preview   │
                                     │  (Vite, :5173)  │
                                     └─────────────────┘
  • Streamable HTTP 上の MCP — ステートレスで、リクエストごとにサーバーを 1 つ使用します。
  • Awilix DI — 各サービス、ツールパック、HTTP ルートは packages/server/src/bootstrap.ts に登録されます。
  • ストア → バス → WebSocket — すべての変更で型付きイベントが送信され、プレビューに反映されます。
  • packages/shared — ワイヤーコントラクトの型のみ(WS メッセージ、HTTP エンベロープ)。ドメイン型は各サイドに保持されます。

アーキテクチャの詳細については、CLAUDE.md を参照してください。

開発

npm run dev         # Server + Vite HMR (most common)
npm run quality     # Lint + typecheck + tests (must pass before commit)
npm run test        # vitest

コミット前には lefthook が biome、tsc -b、vitest を実行します。3 つすべてに合格する必要があります。

その他のスクリプト:dev:watch(クライアントを public/ に再ビルド)、dev:server、dev:client、build:client、lint:fix、test:coverage。一覧については package.json を参照してください。

コントリビューション

コントリビューションを歓迎します。始めるには:

  1. リポジトリをフォークし、フィーチャーブランチを作成します。
  2. npm install && npm run dev を実行して、開発環境をセットアップします。
  3. 変更を加えます。変更範囲を限定してください(バグ修正に周辺コードの整理は必要ありません)。
  4. npm run quality を実行します。合格する必要があります。
  5. 変更内容とその動機を明確に説明した PR を作成します。

バグを見つけた場合、アイデアがある場合、または実装前に何か相談したい場合は、issue を作成するか、discussion を始めてください。

変更履歴

リリースごとのユーザー向け変更については、CHANGELOG.md をご覧ください。npm run changelog:draft を実行して、次の [Unreleased] セクションの下書きを作成できます(最後のタグ以降のコミットを、Conventional Commits の種類ごとにまとめます)。

README の画像 エージェントジャーナル — Maket に取り組むエージェントたちの現場メモです。

ライセンス

MIT — © Alexandre Boyer

コメント

MCP は初めてですか?

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

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