# エージェントが使用状況量に応じて決済を受け付けられるようにする

# エージェントのクイックスタート (Developer preview)

Stripe エージェントツールキットを使い、基本的なチャットボットを構築し、 従量課金を行う方法をご紹介します。

> この SDK を使用して、Stripe をエージェンティックワークフローに導入します。エージェントの動作は決定論的ではないため、*サンドボックス* (A sandbox is an isolated test environment that allows you to test Stripe functionality in your account without affecting your live integration. Use sandboxes to safely experiment with new features and changes)で SDK を使用し、評価を実行してアプリケーションのパフォーマンスを評価します。
> 
> セキュリティ上の理由から、特に本番環境では、[制限された API キー](https://docs.stripe.com/keys.md#create-restricted-api-secret-key) (`rk_*`) を使用して、エージェントのアクセスを必要な機能のみに制限することを強くお勧めします。ツールを使用できるかどうかは、制限されたキーに設定された権限によって決まります。

### Stripe エージェントツールキットのインストール

パッケージをインストールし、コードにインポートします。

#### npm

ライブラリをインストールします。

```bash
npm install --save @stripe/agent-toolkit
```

#### GitHub

または、[GitHub から](https://github.com/stripe/agent-toolkit) `@stripe/agent-toolkit` ライブラリのソースコードを直接ダウンロードしてください。

### リクエストを処理するエンドポイントを作成する

新しいチャット入力を処理するエンドポイントをサーバーに追加します。

### ツールキットを初期化する

Stripe API キーを使用して、`StripeAgentToolkit` の新しいインスタンスを作成します。ツールキットを使用すると、請求ミドルウェアを挿入しながら Stripe の機能にアクセスできます。

### モデルにミドルウェアを追加する

ミドルウェアを使用すると、Meter API でプロンプトと完了トークンの使用状況を Stripe に報告できます。`billing` の設定で、[Customer (顧客)](https://docs.stripe.com/api/customers/object.md) ID と [Meter Event (メーターイベント)](https://docs.stripe.com/api/billing/meter-event/object.md) の入出力を指定する必要があります。

[従量課金の設定](https://docs.stripe.com/billing/subscriptions/usage-based/implementation-guide.md)方法をご紹介します。

### モデルを呼び出す

Vercel の AI SDK を使用してモデルを呼び出し、結果をクライアントに送り返します。リクエストには、既存のメッセージログと、モデルに最初の指示を提供するためのシステムプロンプトが含まれます。

### チャットインターフェイスを構築する

Next.js と Vercel の AI SDK を使用して、構築したバックエンドを呼び出すための基本的なチャットインターフェイスを構築します。

### 環境変数を設定する

公開可能キーとシークレットキーを `.env` ファイルに追加します。これは Next.js によって自動的に[環境変数](https://nextjs.org/docs/basic-features/environment-variables)としてアプリケーションに読み込まれます。

### アプリケーションを実行する

`npm run dev` でアプリを起動し、<http://localhost:3000> に移動します。

### テスト

この機能をテストするには、チャットにメッセージを送信します。

### ダッシュボードで使用量を確認する

[Stripe ダッシュボード](https://dashboard.stripe.com/meters)でメーターを表示し、イベントが正常に送信されたことを確認します。

import { createStripeAgentToolkit } from '@stripe/agent-toolkit/ai-sdk';
// Initialize toolkit - use restricted key (rk_*) for better security.
const toolkit = await createStripeAgentToolkit({
  secretKey: process.env.STRIPE_SECRET_KEY!,
  configuration: {},
});
export async function POST(req: Request) {
    middleware: toolkit.middleware({
      billing: {
        customer: process.env.STRIPE_CUSTOMER_ID!,
        meters: {
          input: process.env.STRIPE_METER_INPUT!,
          output: process.env.STRIPE_METER_OUTPUT!,
        },
      },
    }),
  });
  // Call the model and stream back the results.
  const result = await streamText({
    model: model,
    system: SYSTEM_PROMPT,
    messages: convertToCoreMessages(messages),
  });
import { createStripeAgentToolkit } from '@stripe/agent-toolkit/ai-sdk';
// Initialize toolkit - use restricted key (rk_*) for better security.
const toolkit = await createStripeAgentToolkit({
  secretKey: process.env.STRIPE_SECRET_KEY!,
  configuration: {},
});
export async function POST(req: Request) {
    middleware: toolkit.middleware({
      billing: {
        customer: process.env.STRIPE_CUSTOMER_ID!,
        meters: {
          input: process.env.STRIPE_METER_INPUT!,
          output: process.env.STRIPE_METER_OUTPUT!,
        },
      },
    }),
  });
  // Call the model and stream back the results.
  const result = await streamText({
    model: model,
    system: SYSTEM_PROMPT,
    messages: convertToCoreMessages(messages),
  });
import { createStripeAgentToolkit } from '@stripe/agent-toolkit/ai-sdk';
// Initialize toolkit - use restricted key (rk_*) for better security.
const toolkit = await createStripeAgentToolkit({
  secretKey: process.env.STRIPE_SECRET_KEY!,
  configuration: {},
});
export async function POST(req: Request) {
    middleware: toolkit.middleware({
      billing: {
        customer: process.env.STRIPE_CUSTOMER_ID!,
        meters: {
          input: process.env.STRIPE_METER_INPUT!,
          output: process.env.STRIPE_METER_OUTPUT!,
        },
      },
    }),
  });
  // Call the model and stream back the results.
  const result = await streamText({
    model: model,
    system: SYSTEM_PROMPT,
    messages: convertToCoreMessages(messages),
  });
import { createStripeAgentToolkit } from '@stripe/agent-toolkit/ai-sdk';
// Initialize toolkit - use restricted key (rk_*) for better security.
const toolkit = await createStripeAgentToolkit({
  secretKey: process.env.STRIPE_SECRET_KEY!,
  configuration: {},
});
export async function POST(req: Request) {
    middleware: toolkit.middleware({
      billing: {
        customer: process.env.STRIPE_CUSTOMER_ID!,
        meters: {
          input: process.env.STRIPE_METER_INPUT!,
          output: process.env.STRIPE_METER_OUTPUT!,
        },
      },
    }),
  });
  // Call the model and stream back the results.
  const result = await streamText({
    model: model,
    system: SYSTEM_PROMPT,
    messages: convertToCoreMessages(messages),
  });
'use client';

import { useChat } from 'ai/react';

export default function Chat() {
  const {
    input,
    isLoading,
    handleInputChange,
    handleSubmit,
    messages,
  } = useChat();

  return (
    <div>
      {messages.map(m => (
        <div key={m.id}>
          {m.role === 'user' ? 'User: ' : 'Agent: '}
          {m.content}
        </div>
      ))}

      {isLoading && (
        <div>Loading...</div>
      )}

      <form onSubmit={handleSubmit}>
        <input
          value={input}
          placeholder="Write a message"
          onChange={handleInputChange}
          disabled={isLoading}
        />
      </form>
    </div>
  );
}
\# https://dashboard.stripe.com/apikeys
STRIPE_SECRET_KEY=<<YOUR_SECRET_KEY>>