Cette page est optimisée pour les écrans plus larges.Vous préférez peut-être la version texte de ce guide.

LLM :

Agent quickstart Developer preview

Learn how to build a basic chatbot and bill for usage with the Stripe Agent Toolkit.

Version bêta à destination des développeurs

Explore this SDK to integrate Stripe into agentic workflows. Because agent behavior is non-deterministic, use the SDK in a sandbox and run evaluations to assess your application’s performance. Additionally, use restricted API keys to limit access to the functionality your agent requires.

Vous ne codez pas ? Utilisez les options no-code de Stripe ou contactez nos partenaires pour obtenir de l'aide.

Set up the server

Install the Stripe Agent Toolkit

Install the package and import it into your code.

Install the library:

npm install --save @stripe/agent-toolkit

Serveur

Create an endpoint to handle the request

Add an endpoint on your server that handles the new chat input.

Serveur

Initialize the toolkit

Using your Stripe API key, create a new instance of the StripeAgentToolkit. The toolkit allows you to insert billing middleware and also access Stripe functionality.

Serveur

Provide the middleware to the model

Using middleware, you can report the prompt and completion token usage to Stripe through the Meter API. The billing configuration requires you to provide a Customer ID and input and output Meter Events.

Learn how to setup usage-based billing.

Serveur

Call the model

Use Vercel’s AI SDK to call the model and stream back results to the client. Your request includes the existing message log and a system prompt to provide initial instructions to the model.

Serveur

Build your frontend

Create a chat interface

Use Next.js and Vercel’s AI SDK to build a basic chat interface to call into the backend you built.

Client

Test your page

Set your environment variables

Add your publishable and secret keys to a .env file. Next.js automatically loads them into your application as environment variables.

Serveur

Run the application

Start your app with npm run dev and navigate to http://localhost:3000.

Client

Testing

To test this functionality, send a message to the chat.

View usage in the Dashboard

View your Meters in the Stripe Dashboard to confirm that events are sent successfully.

Cette page vous a-t-elle été utile ?

Oui Non

import { StripeAgentToolkit } from '@stripe/agent-toolkit/ai-sdk';
import { openai } from '@ai-sdk/openai';
import {
  convertToCoreMessages,
  experimental_wrapLanguageModel as wrapLanguageModel,
  streamText
} from 'ai';

// Instantiate a new Stripe Agent Toolkit.
const stripeAgentToolkit = new StripeAgentToolkit({
  secretKey: process.env.STRIPE_SECRET_KEY!,
  configuration: {},
});

export async function POST(req: Request) {
  const { messages } = await req.json();

  // Wrap the language model and include the
  // billing middleware.
  const model = wrapLanguageModel({
    model: openai('gpt-4o'),
    middleware: stripeAgentToolkit.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),
  });

  return result.toDataStreamResponse();
}'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>
  );
}export const metadata = {
  title: 'Stripe Agent Example',
  description: 'Create a chatbot and charge customers with metered billing.',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}# https://dashboard.stripe.com/apikeys
STRIPE_SECRET_KEY=sk_test_BQokikJOvBiI2HlWgH4olfQ2
STRIPE_CUSTOMER_ID=""
STRIPE_METER_INPUT=""
STRIPE_METER_OUTPUT=""# Stripe keys
# https://dashboard.stripe.com/apikeys
STRIPE_SECRET_KEY=sk_12345
STRIPE_CUSTOMER_ID=cus_12345
STRIPE_METER_INPUT=input_event
STRIPE_METER_OUTPUT=output_event.DS_Store
.vscode

# Node files
node_modules/

# Next.js
.next
.vercel
.env
.env*.local
next-env.d.ts{
  "name": "stripe-sample",
  "version": "0.0.0",
  "description": "Full-stack example using Next.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@ai-sdk/openai": "latest",
    "@stripe/agent-toolkit": "latest",
    "ai": "^3.4.7",
    "next": "^13.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/node": "^22.7.4",
    "@types/react": "18.3.11"
  }
}

Remarque

Agent quickstart Developer preview

Version bêta à destination des développeurs

Install the Stripe Agent Toolkit

Create an endpoint to handle the request

Initialize the toolkit

Provide the middleware to the model

Call the model

Create a chat interface

Set your environment variables

Run the application

Testing

View usage in the Dashboard