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リファレンス、コード例、統合ガイドをオンデマンドサービスで取得できる。

コンテキスト7の設定

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

カーソルで、設定＞ツールと統合＞MCPツール＞カスタムMCPを追加へ移動し、以下のスニペットを追加する：

1
2
3
4
5
6
7
8

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

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

Claude Desktopで、設定＞開発者＞設定編集へ移動し、設定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.

ウェブ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ツールや大規模言語モデル向けに最適化されたプレーンテキストファイルとしてアクセスできる。これらのファイルは、AIアシスタントがHTMLレンダリングのオーバーヘッドなしに解析・理解できる形式でBrazeのドキュメントを提供する。

これらのファイルは標準llms.txtに従っている。これはAIツールがドキュメントにアクセスできるようにするための新たな慣例だ。これらのファイルはプロンプト内で直接参照できるし、内容をLLMに貼り付けて文脈として使える。
Github   GitHub でこのページを編集
New Stuff!