ClaudeからVibelyを自然言語で操作する - MCPサーバーを公開した話

はじめに

VibelyにMCPサーバーを実装して公開しました。Claude Codeから「実績一覧を取得して」「この記事を下書きで作って」と話しかけるだけで、Vibelyの操作ができるようになっています。

この記事自体もMCP経由でClaudeに書いてもらった下書きです。せっかくなのでMCPとは何か、なぜ作ったのか、どう使えるのかをまとめておきます。

MCP (Model Context Protocol) とは

MCPはAnthropicが提唱したオープンプロトコルで、LLMと外部ツール・データソースを繋ぐための共通規格です。USB-Cがデバイスとケーブルの規格を統一したように、MCPはAIと外部システムの接続規格を統一しようとしています。

これまでLLMに外部APIを使わせるには、各プロダクトが独自にFunction Callingを実装する必要がありました。MCPに準拠してサーバーを書いておけば、Claude DesktopでもClaude Codeでも、対応する任意のクライアントからそのまま使えます。

なぜVibelyにMCPサーバーを作ったのか

理由は3つあります。

1. 自分が一番のヘビーユーザーだから

Vibelyは僕自身がShiftBの運営で毎日使っています。記事の下書き、実績の登録、コースの確認、チャプターの更新。こういう操作を「ブラウザを開いて、ログインして、画面を遷移して...」とやるのが地味に時間を食う。Claude Codeのターミナルから一言で済ませたかった。

2. 受講生・利用企業の体験を底上げしたかった

Vibelyは多くの企業に導入されているLMSです。MCPサーバーを公開しておけば、各社の運営担当者も自分のClaudeから操作できる。「先週のチャプターをコピーして来週用に下書き作って」みたいな指示が通ります。

3. AI時代のSaaSは「APIだけ」では足りないと思ったから

これからのSaaSは、人間が触るUIだけでなく、AIが触るインターフェースを持っているべきだと考えています。RESTのAPIドキュメントを置いておくだけでは不十分で、エージェントが意図を読み取って正しく呼べる粒度のツール定義が必要。MCPはそのための標準として最適でした。

VibelyのMCPサーバーでできること

現時点で実装している主なツール群です。

カテゴリ	主な操作
ブログ記事	下書き作成・更新・公開・削除・検索
実績	下書き作成・更新・公開・組織内検索
コース・チャプター	コース作成、チャプター下書き作成・更新、コンテンツ取得
学習進捗	自分の進捗サマリー、コース別進捗
決済	Stripe商品(決済リンク付き)の作成
エディタ補助	HTML記法ガイド取得、埋め込みHTML生成、画像アップロードURL発行

実装の方針

サーバーはTypeScriptで書いています。Vibelyの既存APIとPrismaスキーマを薄くラップする形なので、本体側のロジック追加に追従しやすい構成です。

// イメージ: createBlogPostDraft の薄いラッパー
export const createBlogPostDraft = {
  name: "createBlogPostDraft",
  description: "新しいブログ記事を下書きとして作成します",
  inputSchema: {
    type: "object",
    properties: {
      title: { type: "string", maxLength: 160 },
      content: { type: "string" },
      categoryIds: { type: "array", items: { type: "string" } },
    },
    required: ["title"],
  },
  handler: async (input, ctx) => {
    return await blogPostService.createDraft({
      ...input,
      authorId: ctx.userId,
    });
  },
};

意識したのは以下の3点です。

• tool descriptionを丁寧に書く。LLMはここを見て呼び出しを判断するので、命名と説明文が品質を決める
• 下書き作成をデフォルトに。「記事を書いて」で即公開されると事故るので、明示的に指示されない限り下書き止まり
• HTML記法ガイドをツールとして提供。Vibelyのエディタで使えるタグをLLMが事前に知れるようにした

実際に使ってみる

Claude Codeにこう投げると、それだけで動きます。

「MCPについてVibelyで記事書いて」

するとClaudeは以下を順にやってくれます。

1. getEditorFormat でVibelyのリッチエディタ記法を確認
2. 記事の構成を考えて本文をHTMLで生成
3. createBlogPostDraft で下書きとして登録

この記事も、まさにこの流れで生成された下書きです。最後に自分で読んで手を入れて公開する、というワークフローになっています。

これからやりたいこと

• 受講生向けに「自分の学習ログをClaudeに要約させる」ユースケースの整備
• コース運営者向けの一括チャプター生成フロー
• MCPサーバー経由のアクセスログ・監査ログの整備

まとめ

MCPは一過性のバズワードではなく、SaaSの新しい必須インターフェースになっていくと思っています。AIに触らせやすい設計のプロダクトが、これからのスタンダードになる。

Vibelyはその実験場でもあります。使ってみたい方はぜひClaude Code側でMCPサーバーを登録してみてください。フィードバックお待ちしています。

test