mcpField
S
stigg-sp

stigg-sp

github.com/stiggio開発264 回インストール3 日前に更新
リポジトリ

stigg-sp について

stigg-spは、Stripe ProjectsでStigg環境を構築し、認証情報をアプリに接続するスキルです。権限チェック、利用量の報告、フロントエンド設定、MCP経由のエージェント接続を扱います。

主な機能

  1. 01Stripe ProjectsでStiggを構築
  2. 02認証情報を`.env`に保存
  3. 03バックエンドの権限チェック
  4. 04利用量とイベントの報告
  5. 05Reactフロントエンドの設定
  6. 06エージェントをStigg MCPに接続

活用シーン

  1. 01アプリ用のStigg環境を作成
  2. 02顧客の権限に応じて機能を制御
  3. 03利用量の計測やイベント報告
  4. 04エージェントからStigg環境を操作

MCP 対応

構築したサーバーAPIキーを使い、`https://mcp.stigg.io`のStigg MCPサーバーにエージェントを接続する方法を説明します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/stiggio/skills --skill stigg-sp

インストール後、Claude Code で/stigg-spを入力して読み込まれたか確認します。

詳細

Stripe Projects 経由の Stigg

1 つのコマンドで Stigg 環境をプロビジョニングし、その API キーを開発者の .env に書き込みます。

stripe projects add stigg/environment

ブラウザーも、サインアップフォームも、ダッシュボードからキーをコピーして貼り付ける作業も必要ありません。Stripe Projects を使用している場合は、ユーザーに app.stigg.io へ手動でサインアップするよう案内しないでください — プログラムからプロビジョニングします。

関連コマンド:stripe projects catalog(参照)、stripe projects rotate <resource>(新しいキー)、stripe projects open stigg(ダッシュボード)、stripe projects remove <resource>(プロビジョニング解除)。

利用できるもの

サービスは stigg/environment です。無料で、プロジェクトごとにスコープされ、リソースごとに Stigg 環境を 1 つ利用できます。 Stripe は認証情報を Secret Store に暗号化して保存し、.env に同期します。

変数内容
STIGG_SERVER_API_KEYフルアクセス可能なシークレットキー(server-)。バックエンド専用です。クライアントバンドルに含めたり、コミットしたり、ログに記録したりしないでください。
STIGG_CLIENT_API_KEY読み取り専用の公開可能なキー(client-)。シークレットではないため、ブラウザーバンドルに含められます。ただし、これだけでは誰でも任意の顧客のエンタイトルメントを読み取れるため、本番環境では customerToken と組み合わせてください(下記参照)。
STIGG_ENVIRONMENT_IDプロビジョニングされた環境の ID。
STIGG_ENVIRONMENT_SLUGダッシュボードに表示される環境のスラッグ。

プロジェクト内の Stigg リソースが 1 つであれば、これらの名前が使われます。2 つ以上になると、Stripe は代わりに各リソースの変数名にリソース名を付け、2 つ目を追加したときに既存のリソースの変数名も変更します。stripe projects add stigg/environment --name billing の後、新しいリソースのキーは BILLING_SERVER_API_KEY になり、先にデフォルト名で追加したリソースは STIGG_ENVIRONMENT_SERVER_API_KEY(その ID は STIGG_ENVIRONMENT_ENVIRONMENT_ID)になります。そのため、STIGG_SERVER_API_KEY を読み取るコードは undefined を取得します。リソースを追加したら .env を読み直してください。以下のスニペットと claude mcp add コマンドでは、リソースが 1 つの場合の名前を使用しています。2 つ以上のリソースがある場合は、接続するリソースのプレフィックス付きの名前(BILLING_SERVER_API_KEY、BILLING_CLIENT_API_KEY)に置き換え、古い名前を読み取るコードも更新してください。

キーの有効期限はありません。手作業ではなく、stripe projects rotate でローテーションしてください。

統合コードを書く前に

まず最新のドキュメントを検索してください。Stigg MCP サーバー、Mintlify Stigg ドキュメント MCP、または https://docs.stigg.io/llms.txt を確認します。Stigg の API は変更されるため、以下のスニペットは出発点として扱い、必ず現在の仕様を確認してください。

バックエンドを接続する

npm install @stigg/node-server-sdk
import Stigg from '@stigg/node-server-sdk';

// Has an internal cache and retries — initialize once per process and reuse the instance.
const stiggClient = Stigg.initialize({ apiKey: process.env.STIGG_SERVER_API_KEY });

// Optional: block until the local entitlement cache is warm, if the very first check must not
// pay a cold lookup.
await stiggClient.waitForInitialization();

Stigg.initialize はクライアントを同期的に返します。Promise ではありません。一部のドキュメントページには await Stigg.initialize(...) と記載されていますが、害はないものの誤解を招く書き方です。await できるのは waitForInitialization() です。

機能へのアクセスを制御する

これから消費する量を requestedUsage として渡し、hasAccess に基づいてアクセスを制御します。currentUsage と usageLimit を自分で比較しないでください。currentUsage が示すのは最後に確認された値であり、これから追加する量ではないため、ハード制限のある機能ではその比較は誤りです。

const entitlement = await stiggClient.getMeteredEntitlement({
  customerId: 'customer-demo-01',
  featureId: 'feature-api-calls',
  options: { requestedUsage: 1 },
});

if (!entitlement.hasAccess) {
  // Quota reached — block the action and prompt an upgrade.
}

ブール値の機能では、同じ hasAccess の形式で getBooleanEntitlement({ customerId, featureId }) を使用します。

使用量を報告する

  • reportUsage — シート数、ストレージ、トークンなど、アプリですでに計算済みの値を報告します。1 秒未満で処理され、レスポンスには更新後のクレジット残高が含まれます。厳密なリアルタイム制御に使用してください。
  • reportEvent — Stigg が集計する生イベントを報告します。idempotencyKey が必要です。反映には約 10 秒かかります。結果整合性で問題ない、大量の計測に使用してください。
await stiggClient.reportUsage({
  customerId: 'customer-demo-01',
  featureId: 'feature-api-calls',
  value: 1, // a delta by default, not an absolute
});

使用量は、基盤となる処理が成功した後にのみ報告してください。

フロントエンドを接続する

npm install @stigg/react-sdk

バンドラーは、STIGG_CLIENT_API_KEY という名前でブラウザーに値を公開しません。プロビジョニングされた値を、フレームワークで必要な公開変数(Vite の場合は VITE_STIGG_CLIENT_API_KEY、Create React App の場合は REACT_APP_STIGG_CLIENT_API_KEY、Next.js の場合は NEXT_PUBLIC_STIGG_CLIENT_API_KEY)にコピーするか、サーバーから渡してください。ブラウザーのコードで process.env.STIGG_CLIENT_API_KEY を読み取ると、undefined になります。

import { StiggProvider } from '@stigg/react-sdk';

// Vite; use the public variable your framework requires.
<StiggProvider apiKey={import.meta.env.VITE_STIGG_CLIENT_API_KEY} customerId="customer-demo-01">
  {children}
</StiggProvider>;

公開可能なキーだけでは、ID を推測することで誰でもあらゆる顧客のエンタイトルメントを読み取れてしまいます。本番環境に移行する前に、サーバー側で customerToken に署名し、顧客 ID とともに渡してください。詳しくはクライアント側アクセスの強化をご覧ください。

次の手順

プロビジョニングしたばかりの環境に、エージェントがリアルタイムでアクセスできるようにします。Stripe はキーを .env に書き込みますが、シェルはそれを自動でエクスポートしません。先に読み込むか、キーをそのまま貼り付けてください。そうしないと、ヘッダーが空のまま送信され、接続を利用できません。

set -a && . ./.env && set +a
claude mcp add stigg --header "X-API-KEY: $STIGG_SERVER_API_KEY" --transport http https://mcp.stigg.io

プラン、機能、クレジットを会話形式でモデル化します。より詳しい作業には、価格モデル、エンタイトルメント、サブスクリプション、クレジット、ウィジェット、Webhook の各領域に振り分ける、stigg 統合スキルを読み込んでください。

コメント