Build a Powerful AI Chatbot UI in Minutes with Next.js

#nextjs #typescript #ai #openai

Vercel AI SDK is a library that allows you to build AI-powered applications in Next.js projects without any knowing specific LLM provider APIs. The most common use case being messaging use-case.

Demo video:

Create the next.js project and install the dependencies. Only 2 files - page.tsx and route.ts are required to build a chatbot. Find the complete code here.

Install the dependencies.

npm install ai @ai-sdk/openai zod @ai-sdk/react

To make it specialized, I only needed to add a system parameter to your streamText configuration with a financial advisor-specific prompt. This system prompt will:

Role: Financial advisor AI assistant
Guidelines: Professional, accurate, user-focused
Scope: Personal finance, investing, budgeting, planning
Uncertainty: Ask clarifying questions if needed

It also provides ability to include tools for financial calculations. For example, in this case I included a tool for calculating compound interest.

tools: {
    calculateCompoundInterest: tool({
        description: 'Calculate compound interest for investments',
    inputSchema: z.object({
      principal: z.number().describe('Initial investment amount'),
      rate: z.number().describe('Annual interest rate (as decimal)'),
      time: z.number().describe('Time period in years'),
    }),
    execute: async ({ principal, rate, time }) => {
      const amount = principal * Math.pow(1 + rate, time);
      return { amount, interest: amount - principal };
    },
  }),
}