Articulate - AI Voice Advisory Platform

Your Personal AI Advisory Council

Connect with specialized AI advisors through natural voice conversations for career guidance, wellness coaching, spiritual growth, and academic support.

Live Demo • Features • Tech Stack • Getting Started • Deployment

📋 Table of Contents

🤖 Introduction
⚙️ Tech Stack
🔋 Features
🏗️ Architecture
🚀 Getting Started
🔐 Environment Variables
📱 Screenshots
🎯 Subscription Tiers
🛠️ Development
📦 Deployment
📄 License

🤖 Introduction

Articulate is a cutting-edge SaaS platform that revolutionizes personal advisory services through AI-powered voice conversations. Whether you need career guidance, wellness coaching, spiritual mentorship, or academic tutoring, Articulate connects you with specialized AI advisors that understand your needs and provide personalized guidance through natural voice interactions.

Built with modern web technologies and powered by advanced AI voice synthesis, Articulate delivers a seamless, human-like advisory experience that's accessible 24/7.

Why Articulate?

🎯 Specialized Advisors: Choose from 40+ pre-built advisors or create your own custom AI advisor
🗣️ Natural Voice Conversations: Real-time voice interactions with low-latency responses
📊 Track Your Progress: Monitor your journey with detailed analytics and insights
� Flexible Pricing: Free tier to get started, premium plans for power users
🔒 Secure & Private: Enterprise-grade security with Clerk authentication

⚙️ Tech Stack

Technology	Purpose	Why We Chose It
	Framework	Server-side rendering, API routes, optimal performance
	Language	Type safety, better developer experience
	Database	Real-time PostgreSQL, instant APIs
	Auth & Billing	Complete user management, subscription handling
	Styling	Utility-first, rapid UI development
	Monitoring	Error tracking, performance monitoring
	Voice AI	Low-latency voice conversations

Additional Technologies

shadcn/ui - Beautiful, accessible component library
Zod - TypeScript-first schema validation
React Hook Form - Performant form handling
Lucide Icons - Modern icon library

🔋 Features

🎙️ AI Voice Conversations

Real-time voice interactions with AI advisors
Low-latency responses for natural conversations
Session timer to track conversation duration
Live transcription of conversations
Download transcripts for future reference

👥 Advisor Marketplace

Browse 40+ pre-built advisors across 4 categories:
- 💼 Career & Professional Development
- 🧘 Wellness & Mental Health
- 🕉️ Spiritual & Personal Growth
- 📚 Academic & Learning
Advanced search & filtering by category, subject, and topic
Advisor ratings and session counts
Bookmark favorite advisors for quick access

🎨 Create Custom Advisors

Design your own AI advisor with custom:
- Name and personality
- Subject expertise
- Conversation style (casual, professional, formal, nurturing)
- Voice type (male/female)
- Session duration
Tier-based limits:
- Free: 5 custom advisors
- Pro: 20 custom advisors
- Premium: Unlimited

📊 Journey Dashboard

Track your progress with detailed statistics
Session history with all your conversations
Bookmarked advisors for easy access
Advanced analytics (Premium feature - Coming Soon)
Conversation insights (Pro/Premium feature)

💳 Subscription Management

Flexible pricing tiers to match your needs
Clerk-powered billing for secure payments
Easy plan upgrades and downgrades
Transparent pricing with no hidden fees

🔐 Authentication & Security

Secure sign-up/sign-in with Clerk
Google OAuth integration
Session management with automatic refresh
Protected routes for authenticated users
Error monitoring with Sentry

📱 Responsive Design

Mobile-first approach for all devices
Smooth animations and transitions
Loading states for better UX
Skeleton screens during data fetching
Optimized performance with Next.js

🏗️ Architecture

Project Structure

articulate/
├── app/                          # Next.js app directory
│   ├── (auth)/                   # Authentication routes
│   │   ├── sign-in/
│   │   └── sign-up/
│   ├── companions/               # Advisor routes
│   │   ├── [id]/                 # Individual advisor session
│   │   ├── new/                  # Create new advisor
│   │   └── page.tsx              # Advisors list
│   ├── journey/                  # User dashboard
│   ├── subscription/             # Pricing & billing
│   ├── loading.tsx               # Global loading state
│   ├── layout.tsx                # Root layout
│   └── page.tsx                  # Homepage
├── components/                   # React components
│   ├── ui/                       # shadcn/ui components
│   ├── CompanionCard.tsx
│   ├── CompanionComponent.tsx    # Voice session component
│   ├── CompanionForm.tsx
│   ├── Navbar.tsx
│   └── ...
├── lib/                          # Utility functions
│   ├── actions/                  # Server actions
│   ├── subscription.ts           # Tier management
│   ├── supabase.ts              # Database client
│   └── vapi.sdk.ts              # Voice AI SDK
├── constants/                    # App constants
│   ├── categories.ts
│   └── index.ts
├── types/                        # TypeScript types
└── public/                       # Static assets

Database Schema (Supabase)

-- Companions (AI Advisors)
companions (
  id: uuid
  name: text
  category: text
  subject: text
  topic: text
  duration: integer
  voice: text
  style: text
  description: text
  author: text (user_id)
  created_at: timestamp
)

-- Bookmarks
bookmarks (
  id: uuid
  user_id: text
  companion_id: uuid (FK)
  created_at: timestamp
)

-- Session History
session_history (
  id: uuid
  user_id: text
  companion_id: uuid (FK)
  created_at: timestamp
)

� Getting Started

Prerequisites

Before you begin, ensure you have the following installed:

Node.js (v18 or higher)
npm or yarn
Git

Installation

Clone the repository

git clone https://github.com/AdnanElAssadi56/Articulate.git
cd Articulate

Install dependencies

npm install

Set up environment variables

Create a .env.local file in the root directory:

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_SIGN_IN_FALLBACK_REDIRECT_URL=/
NEXT_PUBLIC_CLERK_SIGN_UP_FALLBACK_REDIRECT_URL=/

# Supabase Database
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

# Vapi Voice AI
NEXT_PUBLIC_VAPI_WEB_TOKEN=your_vapi_web_token

# Sentry Error Monitoring (Optional)
SENTRY_AUTH_TOKEN=your_sentry_auth_token

Set up Supabase database

Run the following SQL in your Supabase SQL editor:

-- Create companions table
create table companions (
  id uuid default gen_random_uuid() primary key,
  name text not null,
  category text not null,
  subject text not null,
  topic text not null,
  duration integer not null,
  voice text not null,
  style text not null,
  description text,
  author text not null,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);

-- Create bookmarks table
create table bookmarks (
  id uuid default gen_random_uuid() primary key,
  user_id text not null,
  companion_id uuid references companions(id) on delete cascade,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
  unique(user_id, companion_id)
);

-- Create session_history table
create table session_history (
  id uuid default gen_random_uuid() primary key,
  user_id text not null,
  companion_id uuid references companions(id) on delete cascade,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null
);

-- Enable Row Level Security
alter table companions enable row level security;
alter table bookmarks enable row level security;
alter table session_history enable row level security;

-- Create policies
create policy "Companions are viewable by everyone"
  on companions for select
  using (true);

create policy "Users can create companions"
  on companions for insert
  with check (true);

create policy "Users can manage their own bookmarks"
  on bookmarks for all
  using (true);

create policy "Users can manage their own session history"
  on session_history for all
  using (true);

Configure Clerk subscriptions

In your Clerk dashboard:

Create three subscription plans: Free, Pro, Premium
Set up pricing: Pro ($9.99/mo), Premium ($19.99/mo)
Configure features for each tier

Run the development server

npm run dev
# or
yarn dev

Open your browser

Navigate to http://localhost:3000

🔐 Environment Variables

Required Variables

Variable	Description	Where to Get It
`NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY`	Clerk public key	Clerk Dashboard
`CLERK_SECRET_KEY`	Clerk secret key	Clerk Dashboard
`NEXT_PUBLIC_SUPABASE_URL`	Supabase project URL	Supabase Dashboard
`NEXT_PUBLIC_SUPABASE_ANON_KEY`	Supabase anonymous key	Supabase Dashboard
`NEXT_PUBLIC_VAPI_WEB_TOKEN`	Vapi web token	Vapi Dashboard

Optional Variables

Variable	Description	Where to Get It
`SENTRY_AUTH_TOKEN`	Sentry authentication token	Sentry Dashboard

📱 Screenshots

Homepage

Mobile View

🎯 Subscription Tiers

Free Tier

Perfect for trying out the platform

5 custom advisors
3 bookmarks
5 sessions per month
10-minute sessions
Access to all pre-built advisors

Pro Tier - $9.99/month

For regular users

20 custom advisors
Unlimited bookmarks
50 sessions per month
20-minute sessions
Conversation insights
Download transcripts
Unlimited conversation history

Premium Tier - $19.99/month

For power users

Unlimited custom advisors
Unlimited bookmarks
Unlimited sessions
30-minute sessions
Advanced analytics
AI-powered insights
All Pro features

🛠️ Development

Available Scripts

# Development server
npm run dev

# Build for production
npm run build

# Start production server
npm start

# Run linter
npm run lint

📦 Deployment

Deploy to Vercel (Recommended)

Push your code to GitHub

git add .
git commit -m "Initial commit"
git push origin main

Import to Vercel

Go to Vercel
Click "New Project"
Import your GitHub repository
Add environment variables
Deploy!

Configure environment variables in Vercel

Add all variables from .env.local to your Vercel project settings.

Your app will be live at https://your-project.vercel.app

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

Built with Clerk, Supabase, Vapi, and Vercel.

Name		Name	Last commit message	Last commit date
Latest commit History 33 Commits
.idea		.idea
app		app
components		components
constants		constants
lib		lib
public		public
types		types
.gitignore		.gitignore
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
instrumentation-client.ts		instrumentation-client.ts
instrumentation.ts		instrumentation.ts
middleware.ts		middleware.ts
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
sentry.edge.config.ts		sentry.edge.config.ts
sentry.server.config.ts		sentry.server.config.ts
tsconfig.json		tsconfig.json

Folders and files

Latest commit

History

Repository files navigation

Articulate - AI Voice Advisory Platform

📋 Table of Contents

🤖 Introduction

Why Articulate?

⚙️ Tech Stack

Additional Technologies

🔋 Features

🎙️ AI Voice Conversations

👥 Advisor Marketplace

🎨 Create Custom Advisors

📊 Journey Dashboard

💳 Subscription Management

🔐 Authentication & Security

📱 Responsive Design

🏗️ Architecture

Project Structure

Database Schema (Supabase)

� Getting Started

Prerequisites

Installation

🔐 Environment Variables

Required Variables

Optional Variables

📱 Screenshots

Homepage

Mobile View

🎯 Subscription Tiers

Free Tier

Pro Tier - $9.99/month

Premium Tier - $19.99/month

🛠️ Development

Available Scripts

📦 Deployment

Deploy to Vercel (Recommended)

📄 License

🙏 Acknowledgments

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages