---
title: AI
description: How to use AI in next-forge.
---

<Frame>
  <img src="/images/ai.png" alt="" />
</Frame>

next-forge has a pre-configured `ai` package that uses [ai-sdk](https://sdk.vercel.ai/) to provide a simple interface for interacting with AI models.

## Usage

To use AI functionality, you can import it from the `@repo/ai` package.

### Generating text

You can use the `generateText` function to generate text from an AI model. For example:

```ts generate.ts
import { generateText } from '@repo/ai';
import { provider } from '@repo/ai/lib/provider';

const response = await generateText({
  model: provider('gpt-4o'),
  prompt: 'Hello, world!',
});
```

### Components

The AI package comes with a few components that you can use to build your own AI chatbot, such as `Thread` and `Message`.

```tsx chatbot.tsx
import { Thread } from '@repo/ai/components/thread';
import { Message } from '@repo/ai/components/message';

export const Chatbot = () => {
  const { messages } = useChat();

  return (
    <Thread>
      {messages.map((message) => (
        <Message key={message.id} data={message} />
      ))}
    </Thread>
  );
}
```

## Adding payment agentic capabilities

You can use the `paymentsAgentToolkit` to add payments capabilities to your AI agent for financial services. As next-forge uses Stripe by default, here's an example of how to use it:

```ts generate.ts
import { generateText } from '@repo/ai';
import { paymentsAgentToolkit } from '@repo/payments/ai';
import { provider } from '@repo/ai/lib/provider';

const response = await generateText({
  model: provider('gpt-4o'),
  tools: {
    ...paymentsAgentToolkit.getTools(),
  },
  maxSteps: 5,
  prompt: 'Create a payment link for a new product called \"Test\" with a price of $100.',
})
```

## Adding analytics

There are quite a few ways to add analytics to your AI agent depending on your use case, environment and whether you're generating or streaming.

Here's a simple example of how to add analytics to a `generateText` request using our `analytics` package:

```ts generate.ts
import { generateText } from '@repo/ai';
import { analytics } from '@repo/analytics/posthog/server';
import { currentUser } from '@repo/auth/server';
import { provider } from '@repo/ai/lib/provider';

const model = provider('gpt-4o');
const prompt = 'Hello, world!';
const tokenInputCost = 0.0000025;
const tokenOutputCost = 0.00001;
const startTime = performance.now();
const user = await currentUser();

if (!user) {
  throw new Error('User not found');
}

const response = await generateText({
  model,
  prompt,
});

const endTime = performance.now();

analytics.capture({
  event: 'chat_completion',
  distinctId: user.id,
  properties: {
    model: model.modelId,
    prompt,
    prompt_tokens: response.usage.promptTokens,
    completion_tokens: response.usage.completionTokens,
    total_tokens: response.usage.totalTokens,
    input_cost_in_dollars: response.usage.promptTokens * tokenInputCost,
    output_cost_in_dollars: response.usage.promptTokens * tokenOutputCost,
    total_cost_in_dollars:
      response.usage.promptTokens * tokenInputCost +
      response.usage.completionTokens * tokenOutputCost,
    response_time_in_ms: endTime - startTime,
  },
});
```

## Using a different provider

If you want to use a different provider, you can modify the `provider` in `@repo/ai/lib/provider.ts` to use the one you want. For example, to use Anthropic, you can change it to:

```ts packages/ai/lib/provider.ts
import { createAnthropic } from '@ai-sdk/anthropic';

export const provider = createAnthropic({
  apiKey: env.ANTHROPIC_API_KEY,
});
```
