Storyblok MCP

🚀 Storyblok MCP Server

AIツールをStoryblokにすぐに接続できます。自然言語を使って、まるで魔法のようにCMSを管理できます。

🚀 クイックスタート

デモ

目次

• デモ
• このプロジェクトの目的
• Storyblokとは？
• MCPサーバーとは？
• 直面した課題
• セットアップ方法（貢献者向け）
• 使用方法（ユーザー向け）
• ツール
• 貢献方法
• 有用なリンク
• 謝辞
• ライセンス

✨ 主な機能

このプロジェクトの目的

このプロジェクトは、DEV.toで開催されているStoryblok Headless CMS Challengeのために構築されました。 目標は、AIとStoryblokの力を融合し、新鮮で有用なものを作り出すことです。

Storyblokとは？

Storyblokは強力なヘッドレスCMSです。APIファーストの設計で、開発者とコンテンツクリエイターが共同作業しやすいです。 モジュール式で非常に柔軟性が高く、任意のフロントエンドやワークフローに適合します。

MCPサーバーとは？

MCPは、AI、ツール、データを接続するプロトコルです。 MCPサーバーは仲介者として機能し、AIに何ができるかと利用可能なデータを示します。 これにより、CursorやClaude DesktopなどのAIクライアントが自然言語でStoryblokとやり取りし、コンテンツをスムーズに管理できます。

🔧 技術詳細

直面した課題

• 自分用に作った（笑）: 以前にMCPを作成したりインストールしたことがなかったため、想定よりもはるかに時間がかかりました。

• APIの負担: StoryblokのAPIドキュメントを何度も確認しました。何かを見逃すのが怖かったです。

• AI関連の圧力: 何かを壊さずにAI機能を正しく実装するのは頭痛の種でした。

• セキュリティ: Storyblokの管理機能を公開しながら、機密情報が漏洩しないようにする必要がありました。

• 開発者体験: サーバーを簡単に実行、拡張、AIツールに組み込めるようにしました。妥協はしませんでした。

📦 インストール

セットアップ方法（貢献者向け）

1. リポジトリをクローンします:

   git clone https://github.com/ArjunCodess/storyblok-mcp.git
   cd storyblok-mcp
   

2. 依存関係をインストールします:

   pnpm install
   

3. サーバーを起動します:

   pnpm start
   

💻 使用例

使用方法（ユーザー向け）

リポジトリをクローンする

git clone https://github.com/ArjunCodess/storyblok-mcp.git
cd storyblok-mcp

Cursorと接続する

https://github.com/user-attachments/assets/98b77544-81c4-49b3-8dc2-14849e6ba7e5

• 同じディレクトリでCursorを開きます。
• build/index.jsファイルを右クリックし、パスをコピーをクリックします。
• 次に、設定 → MCPツールに移動します。
• 新しいMCPサーバーをクリックします。
• 開いたmcp.jsonファイルの中にこれを貼り付け、PATH_YOU_COPIEDを2番目の手順でコピーしたパスに置き換えます。

{
    "mcpServers": {
        "storyblok": {
            "command": "node PATH_YOU_COPIED",
            "env": {
                "STORYBLOK_SPACE_ID": "your_space_id",
                "STORYBLOK_MANAGEMENT_TOKEN": "your_management_token",
                "STORYBLOK_DEFAULT_PUBLIC_TOKEN": "your_public_token",
                "GOOGLE_GENERATIVE_AI_API_KEY": "your_gemini_ai_api_key"
            }
        }
    }
}

ツール

貢献方法

フォークして変更を加え、PRを開いてください。 バグを見つけたり、機能を追加したい場合は、イシューを開いてください。

有用なリンク

• Storyblok Docs
• MCP Protocol
• MCP TypeScript SDK
• DEV.to Challenge

謝辞

DEV.to Storyblok Challengeのために❤️ を込めて作成しました。

📄 ライセンス

MIT