BlueFish AIAKI AI 情報局
⌕
公式ドキュメント当サイトでは未実測

AIサイト制作・Skills・読み取り専用MCP入門

小さなローカルサイトでコンテンツ・再利用する指針・ツール規約を区別し、合成データで最小権限を確認します。

最終確認:
用語の基本

モデルは生成と推論を行います。エージェントはツールで作業します。Harness は実行環境を管理し、MCP はツールとデータを接続します。Skill は再利用できる作業ガイドです。

今回の目的

3ページの本番構築、静的確認可能なSkill1件、合成資料を返す読み取り専用MCPサーバー1件を提出します。一覧・正常呼出し・失敗例4件以上を保存し、秘密情報・外部書込なし、クライアント・SDK・規約の版を記録します。

前提条件

HTML・ファイル操作・端末の基礎、Git、ローカルNode.js、エディターを用意します。現行Astro/MCP教程に合わせSDKと実行環境の版を固定します。Agentのアカウント/APIを使うなら正規に用意しますが、この演習には必須ではありません。

所要時間の目安

30〜60分の練習を3〜5回想定します。ダウンロード・生成時間は別で、実測ではありません。

制限と境界

Skillを実行プラグイン、MCPをモデルと混同すること、stdoutへのログ、依存の変化、ブラウザーへのキー埋込に注意。接続成功だけではAgent機能や安全境界の検証になりません。

検証方法

3ページの本番構築、静的確認可能なSkill1件、合成資料を返す読み取り専用MCPサーバー1件を提出します。一覧・正常呼出し・失敗例4件以上を保存し、秘密情報・外部書込なし、クライアント・SDK・規約の版を記録します。

次のステップ

このルートの合格条件を満たしてから変数を一つ追加し、失敗例・版・費用・権利記録を残します。

費用

要確認

金額は未確認です。既存機器でローカルソフトを利用できますが、モデル許諾・VRAM・保存容量・電力・作業費は別です。クラウド・API・購読は有料の場合があります。

実装手順

  1. 01
    単独で構築できるローカル静的ページを作成
  2. 02
    編集手順を最小Skillとして記述
  3. 03
    通信しない読み取り専用MCPツールを追加

実装手順

  1. 単独で構築できるローカル静的ページを作成

  2. 編集手順を最小Skillとして記述

  3. 通信しない読み取り専用MCPツールを追加

元の出典

  1. Astro 公式ブログ制作教程 ↗

    docs.astro.build · 2026-10-16 · 公式ドキュメント

  2. Agent Skills 仕様 ↗

    agentskills.io · 2026-10-16 · 公式ドキュメント

  3. MCP 公式サーバー入門 ↗

    modelcontextprotocol.io · 2026-10-16 · 公式ドキュメント

関連リソース

エージェント無料ソフト。ライセンスと資源費用は別途確認

Cline

複数プロバイダー、Ollama、LM Studio、MCP に対応する開発Agentです。

公式ドキュメント
連携基盤無料ソフト。ライセンスと資源費用は別途確認

Playwright

管理されたページで操作を行うブラウザー自動化・E2Eテストツールです。

公式ドキュメント
プロトコル無料ソフト。ライセンスと資源費用は別途確認

Model Context Protocol

AIアプリと外部ツール・データを接続するオープンプロトコルです。

公式ドキュメント