AI

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';
import { models } from '@repo/ai/lib/models';

const response = await generateText({
  model: models.chat,
  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';
import { models } from '@repo/ai/lib/models';

const response = await generateText({
  model: models.chat,
  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';
import { models } from '@repo/ai/lib/models';

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: models.chat.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,
});

Customizing the AI agent rules

To those that use Cursor or GitHub Copilot - You can customize the AI agent rules by updating the respected file listed below. For context, each chat response will read through the file and repspond with a more currated response based on your rules. It is important to

Keep your instructions short and precise. Poor instructions can degrade Cursor and Copilots quality and performance.

Cursor

Update the .cursorrules file to customize the AI agent to your project needs. These rules can be updated at any time and will better help you over time.

Great examples of how to customize your Cursor Rules can be found at awesome-cursorrules.

Learn more about Cursor Rules.

GitHub Copilot

In order to begin using GitHub Copilot Instructions, you must first enable the Use Instruction Files setting in VSCode.

Update the .github/copilot-instructions.md file to customize the AI agent to your project needs. These instructions can be updated at any time and will better help you over time.

It is important to note that AI outputs may still include hallucinations or inaccuracies, so always review and validate the generated suggestions.

AI

On this page