Building an AI Voice Assistant with Next.js and Prisma

What is Gabbee.io?

Gabbee.io is an AI-powered assistant that takes over phone-based tasks for users. Whether it’s booking a restaurant or following up on appointments, Gabbee.io automates the entire interaction. Users simply describe what they need, and the system independently handles the call, providing transcripts, summaries, and task updates.

Gabbee's key features:

• Automated Calls: Gabbee.io executes phone calls using AI, freeing users from time-consuming tasks.
• Transcripts and Summaries: Every call is logged with detailed transcripts and actionable summaries.
• Natural Language Input: Users can describe their needs in plain language, simplifying task creation.
• Credit Management: A token system ensures transparent usage tracking and easy scalability.

Database Architecture with Prisma and Neon Postgres

Gabbee.io’s database is built with Prisma and Neon Postgres to ensure:

• Type safety across the full stack
• Serverless compatibility with automatic connection pooling
• Horizontal scalability to handle traffic spikes
• SQL query optimization for consistent performance

Core Models

The database schema revolves around tasks, steps, and user credits. Below are the key models:

User Model

Handles authentication, profile management, and credit balances.

Task Model

Tracks phone call tasks and their outcomes, with granular progress tracking via steps:

model Task {
  id              String     @id @default(uuid())
  userId          String?    @map("user_id")
  title           String
  description     String
  phoneNumber     String?
  voiceId         String?
  status          TaskStatus
  isApproved      Boolean
  isProcessing    Boolean
  steps           Step[]
  callId          String?
  transcript      String?
  summary         String?
}

Tasks are created by users and can be assigned to an AI voice assistant:

Step Model

Each step represents a granular task breakdown for improved progress tracking.

UserCredits and Transactions

Manages tokens for task execution: • UserCredits: Tracks balances. • CreditTransaction: Logs purchases and usage.

API Implementation with Next.js

The API backend, built with Next.js, supports three core functions:

1. Task Management

   • Task Creation: Users submit a description, and the system initializes the task.
   • Task Updates: Real-time status changes, approvals, and rejections.
   • Step Generation: Automatically decomposes tasks into manageable steps.

2. Task Processing Pipeline

   • Natural Language Analysis: Extracts intent and details from user descriptions.
   • Automated Steps: Creates actionable steps for each task.
   • Progress Monitoring: Tracks task lifecycle, from initiation to completion.
   • Call Execution: Delegates calls to the AI assistant.

3. Voice Call Integration with Bland.ai

Gabbee.io integrates with Bland.ai for:

• Voice Profile Selection: Ensures natural and human-like interactions.
• Call Initiation: Manages call execution and real-time updates.
• Transcript Processing: Captures and processes call data for user review.

Webhook Architecture for Call Updates

Bland.ai Webhooks

Webhooks are central to Gabbee.io’s real-time updates. After each call:

• Status Updates: Marks tasks as completed or flagged for review.
• Transcript Storage: Saves conversation details securely.
• Summary Generation: Extracts key takeaways for user review.
• Credit Deduction: Ensures accurate token usage tracking.

Stripe Integration

Stripe handles payments and credits:

• Purchase Confirmation: Allocates tokens immediately after payment.
• Transaction Recording: Logs purchases for financial transparency.

Frontend Implementation with React and Next.js

Gabbee.io’s frontend prioritizes user experience with performance, accessibility, and usability.

Key features:

1. Speech Recognition:

• Allows voice input for task descriptions.
• Enables hands-free operation for accessibility.

2. Dynamic Feedback:

• Real-time status updates keep users informed.
• Local data persistence ensures smooth task management.

3. Mobile Optimization:

• Designed for seamless operation on both desktop and mobile.

Insights and Learnings

Building Gabbee.io highlighted the power of combining Next.js, Prisma, and Neon Postgres for scalable AI applications. The serverless stack, webhook-driven architecture, and AI integrations demonstrate a modern, efficient approach to building assistant platforms.

Gabbee.io represents a step forward in task automation, leveraging cutting-edge tools to provide a seamless user experience.