mcp-server
mcp-serverは、WebflowのデータAPIに対してModel Context Protocol（MCP）を実装したNode.jsサーバーです。このツールを使用することで、AIエージェントがWebflow APIとインタラクションできるようになります。TypeScriptで記述されており、Webflow JavaScript SDKを利用しています。MCPサーバーは、複数のクライアントアプリケーション（Cursor、Claude Desktop、Windsurf、VS Codeなど）と連携し、簡単に設定・使用できるのが特徴です。これにより、開発者はWebflowの機能をAIツールに統合し、ビジネスクリティカルなアプリケーションを構築することが可能です。
GitHubスター
73
ユーザー評価
未評価
お気に入り
0
閲覧数
11
フォーク
23
イシュー
8
インストール方法
難易度
中級推定所要時間
10-20 分
必要な環境
Node.js: 18.0.0以上npm: 8.0.0以上+1 more
インストール方法
インストール方法
前提条件
必要なソフトウェアとバージョンを明記してください。Node.js: 18.0.0以上
npm: 8.0.0以上
Webflowアカウント: 必要
インストール手順
1. リポジトリのクローン
bash
git clone https://github.com/webflow/mcp-server.git
cd mcp-server
2. 依存関係のインストール
bash
npm install
3. MCPサーバーの設定
設定ファイルを編集してMCPサーバーを追加します。具体的な設定は各クライアントアプリケーションの手順に従ってください。4. サーバーの起動
bash
npm start
トラブルシューティング
よくある問題
問題: サーバーが起動しない 解決策: Node.jsのバージョンを確認し、依存関係を再インストールしてください。 問題: クライアントアプリケーションで認識されない 解決策: 設定ファイルのパスと構文を確認してください。設定方法
設定方法
基本設定
Claude Desktop設定
~/.config/claude-desktop/claude_desktop_config.json（macOS/Linux）または
%APPDATA%\Claude\claude_desktop_config.json（Windows）を編集：
json
{
"mcpServers": {
"webflow": {
"command": "npx",
"args": ["mcp-remote", "https://mcp.webflow.com/sse"]
}
}
}
環境変数
必要に応じて以下の環境変数を設定：bash
export API_KEY="your-api-key"
export DEBUG="true"
詳細設定
セキュリティ設定
APIキーは環境変数または安全な設定ファイルに保存
ファイルアクセス権限の適切な設定
ログレベルの調整
パフォーマンス調整
タイムアウト値の設定
同時実行数の制限
キャッシュ設定
設定例
基本的な設定
json
{
"mcpServers": {
"webflow": {
"command": "npx",
"args": ["mcp-remote", "https://mcp.webflow.com/sse"]
}
}
}
使用例
使用例
基本的な使用方法
MCPサーバーの基本的な使用方法を以下に示します：Claude Desktopでの使用
1MCPサーバーの起動確認
Claude Desktopを開き、設定が正しく読み込まれていることを確認してください。
2基本コマンドの実行
Available tools from this MCP server:
- tool1: Description of tool1
- tool2: Description of tool2
プログラムでの使用
javascript
// JavaScript例（Node.js）
const { MCPClient } = require('@modelcontextprotocol/client');
const client = new MCPClient();
await client.connect();
// ツールの実行
const result = await client.callTool('toolName', {
parameter1: 'value1',
parameter2: 'value2'
});
console.log(result);
応用例
自動化スクリプト
bash
#!/bin/bash
バッチ処理の例
for file in *.txt; do
mcp-tool process "$file"
done
API統合
python
Python例
import requests
import json
def call_mcp_tool(tool_name, params):
response = requests.post(
'http://localhost:3000/mcp/call',
json={
'tool': tool_name,
'parameters': params
}
)
return response.json()
使用例
result = call_mcp_tool('analyze', {
'input': 'sample data',
'options': {'format': 'json'}
})
使用ケース
WebflowのデータをAIエージェントがリアルタイムで取得するアプリケーションの開発
Webflowサイトのコンテンツを自動的に更新するスクリプトの作成
AIを活用したデータ分析ツールの構築
WebflowのAPIを利用したカスタムダッシュボードの作成