next-forge has a pre-configured ai package that uses ai-sdk 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:

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.

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:

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:

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:

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

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