Skip to content

LLMを用いた構築

AIコーディングアシスタントを使って、Brazeの統合ワークフローを加速させましょう。Context7を介してIDEをBraze Docs MCPサーバーに接続し、開発環境内で正確かつ最新のSDKガイダンスを直接入手できます。

AIコーディングアシスタントは、統合コードの記述や問題のトラブルシューティング、Braze SDKの機能探索を支援できます。ただし、適切なコンテキストが与えられている場合に限ります。Braze Docs MCPサーバーは、AIアシスタントにBrazeドキュメントへの直接アクセスを提供するため、最新のSDKリファレンスに基づいて正確なコードスニペットを生成し、技術的な質問に回答できます。

Braze Docs MCPへの接続

Context7は、AIアシスタントとBrazeドキュメントライブラリーをつなぐ橋渡し役です。IDEのMCP設定にContext7を追加すると、AIアシスタントがBrazeの全ドキュメントセットにクエリを実行し、関連するSDKリファレンス、コード例、統合ガイドをオンデマンドで取得できるようになります。

Context7の設定

Context7を通じてAIアシスタントをBraze Docs MCPに接続するには、IDEのmcp.jsonファイルに以下の設定を追加します。

Cursorで、Settings > Tools and Integrations > MCP Tools > Add Custom MCPへ移動し、以下のスニペットを追加します。

1
2
3
4
5
6
7
8

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

設定を保存し、Cursorを再起動します。プロンプトにuse context7を含めることで、AIアシスタントがContext7経由でBrazeドキュメントにアクセスできるようになります。

Claude Desktopで、Settings > Developer > Edit Configへ移動し、claude_desktop_config.jsonファイルに以下を追加します。

1
2
3
4
5
6
7
8

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

設定を保存し、Claude Desktopを再起動します。

VS Codeのsettings.jsonまたは.vscode/mcp.jsonファイルに以下を追加します。

1
2
3
4
5
6
7
8

{
  "mcpServers": {
    "context7": {
      "command": "npx",
      "args": ["-y", "@upstash/context7-mcp@latest"]
    }
  }
}

設定を保存し、VS Codeを再起動します。

Braze SDK開発向けのプロンプト作成

Context7を設定した後、プロンプトにuse context7を含めることで、AIアシスタントにBrazeドキュメントをコンテキストとして取り込むよう指示します。以下の例は、一般的なSDKタスクに対して効果的なプロンプトを作成する方法を示しています。

React Native SDK

これらのプロンプトは、Braze React Native SDKの一般的な統合タスクを示しています。

SDKの初期化

1
2
3

Using the Braze React Native SDK, show me how to initialize the SDK
in my App.tsx with an API key and custom endpoint. Include the
configuration for automatic session tracking. Use context7.

プロパティ付きカスタムイベントの記録

1
2
3
4

I need to track user activity in my React Native app using the Braze
React Native SDK. Show me how to log a custom event called
"ProductViewed" with properties for product_id, category, and price.
Use context7.

プッシュ通知の設定

1
2
3

Using the Braze React Native SDK, walk me through requesting push
notification permissions on both iOS and Android 13+. Include the
code for registering the push token with Braze. Use context7.

アプリ内メッセージの処理

1
2
3

Show me how to subscribe to in-app messages using the Braze React
Native SDK, including how to log impressions and button clicks
programmatically. Use context7.

Web SDK

これらのプロンプトは、Braze Web SDKの一般的な統合タスクを示しています。

SDKの初期化

1
2
3
4

Using the Braze Web SDK, show me how to initialize the SDK with
braze.initialize(), including the API key, base URL, and options
for enabling logging and automatic in-app message display.
Use context7.

カスタムイベントと購入のトラッキング

1
2
3
4
5

Using the Braze Web SDK, create a JavaScript module that logs a
custom event called "VideoPlayed" with properties for video_id,
duration_seconds, and completion_percentage. Also show how to log
a purchase with product ID, price, currency code, and quantity.
Use context7.

Webプッシュの登録

1
2
3
4

Using the Braze Web SDK, provide the HTML and JavaScript needed to
register a user for web push notifications after they click a
"Subscribe to updates" button. Include the service worker setup.
Use context7.

ユーザー属性の管理

1
2
3

Using the Braze Web SDK, show me how to set standard user attributes
(first name, email, country) and custom user attributes (favorite_genre,
subscription_tier) for the current user. Use context7.

プレーンテキストドキュメント

Braze開発者ガイドのドキュメントは、AIツールやLLM向けに最適化されたプレーンテキストファイルとしてアクセスできます。これらのファイルは、HTMLレンダリングのオーバーヘッドなしにAIアシスタントが解析・理解できる形式でBrazeドキュメントを提供します。

これらのファイルはllms.txt標準に準拠しています。これはAIツールがドキュメントにアクセスしやすくするための新しい規約です。プロンプト内でこれらのファイルを直接参照したり、内容をLLMに貼り付けてコンテキストとして使用したりできます。
New Stuff!