To accomplish this, I set up a Next.js project, configured secure API routes for Open AI integration, and developed a client-side interface for users to interact with the AI agent. Below, I’ll walk you through the process of building a generative AI agent with Next.js and Open AI.

Setting Up the Next.js Project

Start by creating a new Next.js project and installing the Open AI client library:

npx create-next-app@latest my-ai-agent-app
cd my-ai-agent-app
npm install openai

You’ll need an Open AI API key from Open AI’s platform. Store it securely in a .env.local file:

OPENAI_API_KEY=your-openai-api-key

Server-Side API Route for Open AI

To handle Open AI requests securely, we created a Next.js API route in pages/api/generate.ts. This route processes user prompts and sends them to Open AI’s API for content generation:

import type { NextApiRequest, NextApiResponse } from 'next';
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  try {
    const { prompt, maxTokens = 150 } = req.body;
    if (!prompt) {
      return res.status(400).json({ error: 'Prompt is required' });
    }

    const completion = await openai.chat.completions.create({
      model: 'gpt-4o',
      messages: [
        { role: 'system', content: 'You are a creative AI agent that generates high-quality, context-aware content.' },
        { role: 'user', content: prompt },
      ],
      max_tokens: maxTokens,
    });

    const response = completion.choices[0]?.message?.content || 'No response generated';
    res.status(200).json({ response });
  } catch (error) {
    console.error('Open AI error:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
}

This API route accepts POST requests with a user prompt and an optional maxTokens parameter, sends them to Open AI’s gpt-4o model, and returns the generated content.

Client-Side AI Agent Interface

We built a client-side interface in pages/index.tsx using React state to manage user prompts and AI responses. The interface allows users to input a prompt and receive generated content:

import { useState } from 'react';

export default function AIAgent() {
  const [prompt, setPrompt] = useState('');
  const [response, setResponse] = useState('');
  const [isLoading, setIsLoading] = useState(false);

  const handleGenerate = async () => {
    if (!prompt.trim()) return;

    setIsLoading(true);
    setResponse('');

    try {
      const res = await fetch('/api/generate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt, maxTokens: 200 }),
      });
      const data = await res.json();
      if (data.error) {
        setResponse(`Error: ${data.error}`);
      } else {
        setResponse(data.response);
      }
    } catch (error) {
      setResponse('Error: Failed to connect to the server');
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="max-w-3xl mx-auto p-6">
      <h1 className="text-3xl font-bold mb-6">Generative AI Agent</h1>
      <div className="mb-4">
        <textarea
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          className="w-full p-3 border rounded-lg"
          placeholder="Enter your prompt (e.g., 'Write a product description for a futuristic gadget')"
          rows={4}
        />
      </div>
      <button
        onClick={handleGenerate}
        disabled={isLoading}
        className="p-3 bg-blue-500 text-white rounded-lg disabled:bg-gray-400"
      >
        {isLoading ? 'Generating...' : 'Generate Content'}
      </button>
      {response && (
        <div className="mt-6 p-4 bg-gray-100 rounded-lg">
          <h2 className="text-xl font-semibold mb-2">Generated Content</h2>
          <p>{response}</p>
        </div>
      )}
    </div>
  );
}

This component provides a textarea for users to input prompts, a button to trigger content generation, and a section to display the AI’s response. It communicates with the /api/generate endpoint.

Next.js Routes

The Next.js application uses the following routes:

1. / - Main AI agent interface (defined in pages/index.tsx)
2. /api/generate - API route for handling Open AI content generation requests

Best Practices for Next.js and Open AI

1. Secure API Key: Store the Open AI API key in environment variables to prevent client-side exposure.
2. Input Validation: Validate user prompts on the server to ensure they meet length or content requirements.
3. Rate Limiting: Implement rate limiting on the /api/generate route to prevent abuse and manage API costs.
4. Styling: Use Tailwind CSS (as shown) for a clean, responsive interface.
5. Context Management: For advanced use cases, maintain a history of prompts in the Open AI API calls to provide context-aware responses.

To make this work, I set up a Next.js project, integrated tRPC, and configured the client to interact with our API routes. Below, I’ll walk you through implementing tRPC in a Next.js app, focusing on the client-side setup.

Setting Up tRPC in Next.js

tRPC allows us to define API procedures on the server and call them from the client with full TypeScript support. We started by setting up a tRPC router and integrating it with Next.js API routes.

Server-Side tRPC Router

First, we defined a tRPC router in server/api/router.ts:

import { initTRPC } from '@trpc/server';
import { z } from 'zod';

const t = initTRPC.create();

export const appRouter = t.router({
  getUser: t.procedure
    .input(z.object({ id: z.string() }))
    .query(({ input }) => {
      return { id: input.id, name: `User ${input.id}`, email: `user${input.id}@example.com` };
    }),
  createUser: t.procedure
    .input(z.object({ name: z.string(), email: z.string().email() }))
    .mutation(({ input }) => {
      return { id: '123', ...input };
    }),
});

export type AppRouter = typeof appRouter;

This router defines two procedures: getUser (a query) and createUser (a mutation).

Next.js API Route for tRPC

We exposed the tRPC router via a Next.js API route in pages/api/trpc/[trpc].ts:

import { createNextApiHandler } from '@trpc/server/adapters/next';
import { appRouter } from '../../../server/api/router';

export default createNextApiHandler({
  router: appRouter,
  createContext: () => ({}),
});

This sets up the tRPC endpoint at /api/trpc/*.

Client-Side tRPC Integration

On the client, we used @trpc/react-query to integrate tRPC with React Query for data fetching. First, we configured the tRPC client in lib/trpc.ts:

import { createTRPCReact } from '@trpc/react-query';
import type { AppRouter } from '../server/api/router';

export const trpc = createTRPCReact<AppRouter>();

Then, we wrapped our app with the tRPC provider in pages/_app.tsx:

import { trpc } from '../lib/trpc';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { httpBatchLink } from '@trpc/client';
import { useState } from 'react';
import type { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  const [queryClient] = useState(() => new QueryClient());
  const [trpcClient] = useState(() =>
    trpc.createClient({
      links: [
        httpBatchLink({
          url: '/api/trpc',
        }),
      ],
    })
  );

  return (
    <trpc.Provider client={trpcClient} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>
        <Component {...pageProps} />
      </QueryClientProvider>
    </trpc.Provider>
  );
}

export default MyApp;

Using tRPC in a Next.js Page

We used tRPC in a Next.js page to fetch and display user data. Here’s an example in pages/users/[id].tsx:

import { trpc } from '../../lib/trpc';
import { useRouter } from 'next/router';

export default function UserProfile() {
  const router = useRouter();
  const { id } = router.query;
  
  const { data: user, isLoading, error } = trpc.getUser.useQuery(
    { id: typeof id === 'string' ? id : '' },
    { enabled: typeof id === 'string' }
  );

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>{user?.name}</h1>
      <p>{user?.email}</p>
    </div>
  );
}

This page uses the getUser query to fetch user data based on the dynamic route parameter id.

Next.js Routes

The Next.js application uses the following routes:

1. / - Home page (not shown in the example, but typically defined in pages/index.tsx)
2. /users/[id] - Dynamic route for user profile (e.g., /users/123)
3. /api/trpc/[trpc] - tRPC API endpoint for all tRPC procedures

tRPC Procedure Routes

The tRPC router exposes the following procedure routes (accessible via the client):

1. getUser - Query to fetch a user by ID (e.g., trpc.getUser.useQuery({ id: '123' }))
2. createUser - Mutation to create a new user (e.g., trpc.createUser.useMutation())

Best Practices for Next.js and tRPC

1. Type Safety: Leverage tRPC’s end-to-end type safety by sharing the AppRouter type between client and server.
2. Dynamic Routes: Use Next.js dynamic routes ([id].tsx) to handle tRPC queries for specific resources.
3. Error Handling: Implement robust error handling with React Query’s error state.
4. Performance: Use React Query’s caching to minimize API calls and optimize client-side performance.

By combining Next.js’s routing with tRPC’s type-safe API, we built an application that’s both developer-friendly and scalable, ready to power Interstellar Solutions’ ambitious goals.

To achieve this, I initialized a Next.js project, set up API routes for secure Open AI communication, and built a client-side interface for real-time chat. Below, I’ll guide you through the process of building a chatbot with Next.js and Open AI.

Setting Up the Next.js Project

Start by creating a new Next.js project and installing the Open AI client library:

npx create-next-app@latest my-chatbot-app
cd my-chatbot-app
npm install openai

You’ll also need an Open AI API key, which you can obtain from Open AI’s platform. Store the key in a .env.local file:

OPENAI_API_KEY=your-openai-api-key

Server-Side API Route for Open AI

To securely handle Open AI requests, we created a Next.js API route in pages/api/chat.ts. This route processes user messages and sends them to Open AI’s API:

import type { NextApiRequest, NextApiResponse } from 'next';
import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
});

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method !== 'POST') {
    return res.status(405).json({ error: 'Method not allowed' });
  }

  try {
    const { message } = req.body;
    if (!message) {
      return res.status(400).json({ error: 'Message is required' });
    }

    const completion = await openai.chat.completions.create({
      model: 'gpt-4o-mini',
      messages: [
        { role: 'system', content: 'You are a helpful assistant.' },
        { role: 'user', content: message },
      ],
    });

    const response = completion.choices[0]?.message?.content || 'No response';
    res.status(200).json({ response });
  } catch (error) {
    console.error('Open AI error:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
}

This API route accepts POST requests with a user message, sends it to Open AI’s gpt-4o-mini model, and returns the AI’s response.

Client-Side Chat Interface

We built a simple chat interface in pages/index.tsx using React state to manage the conversation. The interface sends user input to the /api/chat endpoint and displays the AI’s responses:

import { useState } from 'react';

export default function Chatbot() {
  const [messages, setMessages] = useState<{ role: string; content: string }[]>([]);
  const [input, setInput] = useState('');

  const handleSend = async () => {
    if (!input.trim()) return;

    const userMessage = { role: 'user', content: input };
    setMessages([...messages, userMessage]);
    setInput('');

    try {
      const res = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: input }),
      });
      const data = await res.json();
      if (data.error) {
        setMessages([...messages, userMessage, { role: 'assistant', content: `Error: ${data.error}` }]);
      } else {
        setMessages([...messages, userMessage, { role: 'assistant', content: data.response }]);
      }
    } catch (error) {
      setMessages([...messages, userMessage, { role: 'assistant', content: 'Error: Failed to connect to the server' }]);
    }
  };

  return (
    <div className="max-w-2xl mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">AI Chatbot</h1>
      <div className="border rounded-lg p-4 mb-4 h-96 overflow-y-auto">
        {messages.map((msg, index) => (
          <div key={index} className={`mb-2 ${msg.role === 'user' ? 'text-right' : 'text-left'}`}>
            <span className={`inline-block p-2 rounded ${msg.role === 'user' ? 'bg-blue-100' : 'bg-gray-100'}`}>
              {msg.content}
            </span>
          </div>
        ))}
      </div>
      <div className="flex gap-2">
        <input
          type="text"
          value={input}
          onChange={(e) => setInput(e.target.value)}
          className="flex-1 p-2 border rounded"
          placeholder="Type your message..."
          onKeyPress={(e) => e.key === 'Enter' && handleSend()}
        />
        <button onClick={handleSend} className="p-2 bg-blue-500 text-white rounded">
          Send
        </button>
      </div>
    </div>
  );
}

Next.js Routes

The Next.js application uses the following routes:

1. / - Main chat interface (defined in pages/index.tsx)
2. /api/chat - API route for handling Open AI chat requests

Best Practices for Next.js and Open AI

1. Secure API Key: Store the Open AI API key in environment variables and never expose it client-side.
2. Error Handling: Implement robust error handling on both client and server to handle API failures gracefully.
3. Rate Limiting: Consider adding rate limiting to the /api/chat route to prevent abuse.
4. Styling: Use Tailwind CSS (as shown in the example) for a responsive, modern interface.
5. Conversation Context: Enhance the chatbot by maintaining conversation history in the Open AI API calls for context-aware responses.

The future of AI assistants isn't chat-based — it's voice-based. And platforms like Vapi are making that future easier to build than ever.

1. What is an Assistant in Vapi?

Think of it as your AI voice agent. An Assistant is an AI that listens, understands, and responds to users during a call naturally — handling users just like a real agent would.

Key Features:

• Listens to caller input in real-time
• Understands natural language
• Responds conversationally
• Executes tasks during the call

2. System Prompt — The Assistant's Personality

The System Prompt is the main instruction given to the AI model. It tells the assistant how to talk, what tone to use, and what it should do.

Why it's used:

• Controls the assistant's behavior
• Makes responses consistent and professional
• Ensures it follows specific rules (like asking for name, phone number, etc.)
• Sets the tone, style, and logic

The system prompt defines your assistant's personality — whether it's friendly, professional, or technical. It's the foundation of how your AI interacts with callers.

3. Tools — Where AI Starts Doing Real Work

Tools are small actions the assistant can perform automatically. They help the assistant do real tasks — not just talk.

Common Tools:

1. Query Tool - Searches information from knowledge bases
2. Transfer Call Tool - Connects caller to a real human

3.1 How to Link Multiple Tools to the Assistant

1. Go to Assistant module
2. Click the Assistant and select the "Tools" tab
3. At the bottom, select the Tools you want to use for this assistant
4. Click Publish to save

You can attach multiple tools per assistant to enhance its capabilities and handle different scenarios.

4. Query Tool — The Knowledge Engine

Purpose: Lets assistant search information from uploaded Knowledge Base files.

How it works:

1. Caller asks a question
2. Assistant searches knowledge base files
3. Returns relevant information
4. Assistant responds to caller with accurate data

4.1 What are Knowledge Base Files?

Knowledge Base Files are reference documents (PDF, TXT) that help the assistant give correct answers about your business or process.

Example: A law firm can upload "Accepted Case Types.pdf". The assistant reads it and uses it to answer related questions correctly.

Purpose:

• Provide background information
• Help the assistant give accurate, company-specific answers
• Make your AI genuinely knowledge-aware, not just smart-sounding

4.2 How To Upload Knowledge Base Files in Vapi

1. Go to the Files Module
2. Upload the new Knowledge Base .txt file
3. If you need to edit existing files:
   • Download the existing file
   • Delete the existing Knowledge Base file
   • Reupload the corrected Knowledge Base file again

4.3 Where to Link Knowledge Base Files

1. Go to the Query Tool
2. Under Knowledge Bases section, add multiple knowledge base files
3. Save and publish

5. Transfer Tool — When AI Meets Human

In simple words, it's designed to make a smooth hand-off from AI to a real person. The Transfer Call Tool lets your AI assistant connect the caller to a real human agent.

It is used when:

• The caller needs help from a live person
• The AI has finished collecting the needed details
• The query is too complex for automated handling

5.1 How to Add Phone Numbers for Transfer Call Tool

1. Go to Tools in the Vapi dashboard
2. Click Create Tool and select Transfer Call Tool
3. Enter the name and description of the tool
4. Scroll to the Destination section
5. Click Add Phone Number to add your real phone numbers
6. Make sure each number is in the correct E.164 format (example: +15012488744)
7. Enable Enforce E164 format for each phone number
8. Add multiple phone numbers if needed
9. Click Save Tool to finish

6. Phone Number Integration

Purpose: The phone number in Vapi is used to make and receive real calls through the assistant. It connects the AI assistant to actual phone networks, allowing inbound calls from users and outbound or transfer calls to real people.

6.1 Why We Need to Use Twilio Phone Numbers

• Twilio phone numbers are reliable and ready for production use
• Twilio numbers allow the assistant to make outbound or transfer calls to real people
• If you use only Vapi phone numbers, transfer calls will not work, as they require Twilio integration for real call routing

Without Twilio, call transfers won't work.

6.2 How to Set Up and Link the Phone Number for the Assistant

1. Go to the Phone Numbers module in Vapi
2. Click Create a Phone Number
3. Select Import Twilio
4. Enter the Twilio phone number (created in your Twilio account)
5. Enter your Twilio Account SID and Auth Token
6. Give a label or name for the phone number for easy identification
7. Click Import from Twilio
8. Once imported, scroll to Inbound Settings
9. Select the Assistant you want to link with this phone number
10. Click Save

Test it: Make a test call to the Twilio phone number — the assistant should now answer and speak.

7. Call Logs — Know What's Happening

The purpose of the Call Log in Vapi is to record and track all calls made or received by your assistant.

It shows details like:

• Caller number
• Call time
• Duration
• Transcript
• Recording

Perfect for:

• Debugging issues
• Performance reviews
• Training improvements
• Monitoring assistant quality

Why This Matters

Vapi isn't just another AI tool — it's an end-to-end voice automation framework. From voice recognition to real-time conversation to call transfers — all in one system.

It helps startups and teams:

• Automate support
• Qualify leads
• Handle repetitive voice workflows
• Maintain human-level quality

Final Thoughts

The future of AI assistants isn't chat-based — it's voice-based. And platforms like Vapi are making that future easier to build than ever.

Have you tried creating a voice AI yet? If not, maybe it's time to let your assistant pick up the next call.

Voice AI is no longer science fiction — it's a practical tool that can transform how businesses interact with customers, and Vapi makes it accessible to developers of all skill levels.

To achieve this, I set up a Node.js environment, initialized a MongoDB database, and dove into configuring routes for both the backend and frontend. Below, I’ll walk you through the process of setting up routes in a MERN stack application.

Setting Up Server-Side Routes with Express.js

On the backend, Express.js handles API routes to interact with the MongoDB database. We needed routes for user authentication, data retrieval, and CRUD operations. Here’s an example of how we structured the routes in Express.js:

const express = require('express');
const router = express.Router();
const userController = require('../controllers/userController');

// User Routes
router.get('/users', userController.getAllUsers);
router.post('/users', userController.createUser);
router.get('/users/:id', userController.getUserById);
router.put('/users/:id', userController.updateUser);
router.delete('/users/:id', userController.deleteUser);

module.exports = router;

This code defines a router for user-related endpoints, which is then mounted in the main Express app. The userController handles the business logic for each route.

Client-Side Routing with React Router

On the frontend, React Router enables seamless navigation without full page reloads. We used react-router-dom to define routes for different components, ensuring a smooth user experience. Here’s an example of setting up client-side routes:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import UserProfile from './components/UserProfile';
import Dashboard from './components/Dashboard';
import NotFound from './components/NotFound';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/profile/:id" element={<UserProfile />} />
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

This setup defines routes for the home page, user profile, dashboard, and a catch-all for 404 errors. The :id parameter allows dynamic routing for user profiles.

Connecting Frontend and Backend

To connect the frontend routes to the backend API, we used Axios to make HTTP requests. For example, fetching user data for the /profile/:id route:

import axios from 'axios';
import { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';

function UserProfile() {
  const [user, setUser] = useState(null);
  const { id } = useParams();

  useEffect(() => {
    axios.get(`/api/users/${id}`)
      .then(response => setUser(response.data))
      .catch(error => console.error('Error fetching user:', error));
  }, [id]);

  if (!user) return <div>Loading...</div>;

  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
}

export default UserProfile;

This component fetches user data from the backend API and displays it dynamically based on the route parameter.

Best Practices for MERN Routing

1. Modularize Routes: Keep backend routes modular by separating them into different router files (e.g., userRoutes.js, productRoutes.js).
2. Protect Routes: Use middleware for authentication on sensitive routes (e.g., /dashboard).
3. Handle Errors: Implement error handling for both client and server routes to ensure a smooth user experience.
4. Optimize Performance: Use lazy loading for React components to reduce initial load times.

By combining Express.js for server-side routing and React Router for client-side navigation, we built a MERN application that’s both scalable and user-friendly. This approach ensures our app can handle the demands of a multiplanetary future, where seamless navigation is key.