AI-Powered Digital Twin Platform for Realistic Conversation Practice
Convocate is a sophisticated Next.js application that creates AI-powered digital twins from real chat conversations. It analyzes communication patterns, personality traits, and writing styles to generate lifelike AI personas that respond exactly like the original person. Perfect for sales training, difficult conversation practice, and personal development.
- Multi-Format Support: Import conversations from WhatsApp, CSV, JSON, and SMS backup formats
- Advanced AI Analysis: GPT-5 powered personality profiling with 15+ behavioral dimensions
- Style Matching: Captures tone, formality, pacing, vocabulary, and unique communication quirks
- Context Awareness: Maintains conversation context and relationship dynamics
- Real-time Chat: Natural conversation flow with streaming responses
- Performance Scoring: AI-powered feedback on communication effectiveness
- Style Improvement Tips: Actionable suggestions for better conversation skills
- Usage Tracking: Built-in rate limiting and usage monitoring
- Client-Side Processing: All data processing happens in your browser
- No Cloud Storage: Personas stored locally in localStorage
- Rate Limiting: Built-in protection against abuse
- Data Control: Complete control over your conversation data
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Frontend │ │ API Routes │ │ AI Services │
│ (Next.js) │◄──►│ (Next.js) │◄──►│ (OpenAI) │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │ │
│ │ │
▼ ▼ ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Components │ │ File Parsing │ │ GPT-5 Mini │
│ (React) │ │ (Multi-format)│ │ (Personality) │
└─────────────────┘ └─────────────────┘ └─────────────────┘
│ │ │
│ │ │
▼ ▼ ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ LocalStorage │ │ Rate Limiting │ │ Style Profiles│
│ (Personas) │ │ (In-Memory) │ │ (JSON Schema) │
└─────────────────┘ └─────────────────┘ └─────────────────┘
| Layer | Technology | Purpose |
|---|---|---|
| Frontend | Next.js 15 + React 19 | Modern React framework with App Router |
| Styling | Tailwind CSS 4 | Utility-first CSS framework |
| UI Components | Radix UI + Custom Reusable System | Accessible, consistent components |
| Type Safety | TypeScript 5 | Static type checking and IntelliSense |
| AI Integration | OpenAI GPT-5 Mini | Advanced language model for personality analysis |
| File Processing | PapaParse + xml2js | Multi-format chat export parsing |
| State Management | React Hooks + localStorage | Client-side state persistence |
| API | Next.js API Routes | Serverless API endpoints |
Convocate features a comprehensive, production-ready reusable component system designed for consistency, maintainability, and developer experience.
Tag- Replaces repetitive tag/badge patterns (9 colors, 3 sizes)IconLabel- Standardizes icon + text combinations (3 sizes, 3 variants)Container- Layout containers with consistent spacing (5 sizes, 5 padding options)Stack- Flex layout patterns (HStack, VStack, Center variants)LoadingSkeleton- Unified loading system (7 variants, specialized components)ErrorMessage- Standardized error handling (3 variants, retry/dismiss)Avatar- Consistent avatar system (6 sizes, status indicators)StatusIndicator- Status states throughout the app (7 types, 3 sizes)
- ~11% code reduction across migrated components
- 20+ repetitive patterns eliminated
- 100% consistency in similar patterns
- Better maintainability - changes in one place affect everywhere
- Improved developer experience - faster development with reusable patterns
// Before: Repetitive patterns
<span className="text-xs bg-blue-100 text-blue-700 rounded px-2 py-1">
<div className="flex items-center text-xs font-medium text-muted-foreground">
<Lightbulb className="w-3 h-3 mr-1" />
Positive Triggers
</div>
// After: Clean, reusable components
<Tag variant="blue" size="sm">Emotion</Tag>
<IconLabel icon={<Lightbulb className="w-3 h-3" />} size="sm" variant="muted">
Positive Triggers
</IconLabel>Main chat interface component with streaming responses and real-time scoring.
Key Features:
- Streaming message display
- Typing indicators
- Error handling with reusable ErrorMessage component
- Sample prompts
- Message history persistence
Drag-and-drop file upload with multi-format support.
Supported Formats:
- WhatsApp TXT exports
- CSV with headers
- JSON message arrays
- SMS Backup XML
Persona selection and management interface with consistent styling using reusable components.
Real-time performance scoring and improvement tips with unified loading states.
- Node.js 18+ (LTS recommended)
- npm or yarn package manager
- OpenAI API Key (GPT-5 Mini access required)
-
Clone the repository
git clone https://github.com/aminmomin2/convocate.git cd convocate -
Install dependencies
npm install # or yarn install -
Configure environment variables
cp env.example .env.local
Edit
.env.local:OPENAI_API_KEY=your_openai_api_key_here
-
Start development server
npm run dev # or yarn dev -
Open your browser Navigate to http://localhost:3000
npm run build
vercel --proddocker build -t convocate .
docker run -p 3000:3000 -e OPENAI_API_KEY=your_key convocateconvocate/
├── src/
│ ├── app/ # Next.js App Router
│ │ ├── api/ # API Routes
│ │ │ ├── chat/ # Chat completion endpoint
│ │ │ ├── score/ # Style scoring endpoint
│ │ │ └── upload/ # File upload & persona creation
│ │ ├── dashboard/ # Dashboard pages
│ │ │ └── [personaId]/ # Dynamic persona chat pages
│ │ ├── layout.tsx # Root layout component
│ │ └── page.tsx # Landing page
│ ├── components/ # React components
│ │ ├── ui/ # Reusable UI component system
│ │ │ ├── tag.tsx # Tag/badge component
│ │ │ ├── icon-label.tsx # Icon + text component
│ │ │ ├── container.tsx # Layout containers
│ │ │ ├── stack.tsx # Flex layout patterns
│ │ │ ├── loading-skeleton.tsx # Loading states
│ │ │ ├── error-message.tsx # Error handling
│ │ │ ├── avatar.tsx # Avatar system
│ │ │ └── status-indicator.tsx # Status states
│ │ ├── layout/ # Layout components
│ │ ├── chat/ # Chat interface components
│ │ ├── dashboard/ # Dashboard components
│ │ └── landing/ # Landing page components
│ ├── lib/ # Shared libraries
│ │ ├── openai.ts # OpenAI client configuration
│ │ └── utils.ts # Utility functions
│ ├── types/ # TypeScript type definitions
│ │ └── persona.ts # Persona and message types
│ ├── utils/ # Utility functions
│ │ ├── clearData.ts # Data cleanup utilities
│ │ └── fetcher.ts # API fetch utilities
│ └── styles/ # Global styles
│ └── globals.css # Tailwind CSS imports
├── public/ # Static assets
├── package.json # Dependencies and scripts
├── tailwind.config.js # Tailwind CSS configuration
├── tsconfig.json # TypeScript configuration
└── README.md # This file
Upload conversation files and create AI personas.
Request:
// FormData with files
const formData = new FormData();
formData.append('files', file1);
formData.append('files', file2);Response:
{
sessionId: string;
personas: StoredPersona[];
totalPersonasCreated: number;
limitInfo?: {
message: string;
skippedCount: number;
totalParticipants: number;
};
excludedInfo?: {
message: string;
excludedCount: number;
excludedParticipants: Array<{
sender: string;
messageCount: number;
needed: number;
}>;
};
}Send messages to AI personas and get responses.
Request:
{
personaName: string;
transcript: Msg[];
chatHistory: Msg[];
userMessage: string;
styleProfile: StyleProfile;
}Response:
{
twinReply: string;
score?: number;
tips?: string[];
usage: {
totalMessagesUsed: number;
maxMessagesPerIP: number;
contextMessagesUsed: number;
};
}Get detailed style analysis and improvement tips.
Request:
{
userMessage: string;
personaResponse: string;
styleProfile: StyleProfile;
}Response:
{
score: number; // 0-100
tips: string[];
analysis: {
tone: string;
style: string;
effectiveness: string;
};
}- File Parsing: Multi-format conversation import
- Message Sampling: Intelligent selection of representative messages
- Style Extraction: GPT-5 powered personality profiling
- Profile Creation: Structured style profile with 15+ dimensions
- Context Preservation: Conversation history and relationship dynamics
- IP-based limits: 2 personas per IP, 40 messages total
- File size limits: 1MB maximum per file
- Concurrency control: Semaphore-based parallel processing
- Memory management: Automatic cleanup of old persona data
- Message sampling: Token-aware selection for cost efficiency
- Streaming responses: Real-time message display
- Lazy loading: Component-level code splitting
- Caching: localStorage for persona persistence
- Reusable components: Reduced bundle size and improved maintainability
# Run linting
npm run lint
# Type checking
npx tsc --noEmit
# Build for production
npm run build| Variable | Description | Required |
|---|---|---|
OPENAI_API_KEY |
OpenAI API key with GPT-5 Mini access | Yes |
NEXT_PUBLIC_APP_URL |
Public URL for the application | No |
# Development
npm run dev
# Production build
npm run build
# Start production server
npm start- Bundle Size: 100 kB shared
- Page Sizes: 4.8 kB - 12.1 kB per page
- Build Time: Fast compilation
- Code Reduction: ~11% through reusable components
- 20+ repetitive patterns eliminated
- 8 reusable components created
- 100% consistency in similar patterns
- Zero build warnings or errors
This project is licensed under the MIT License - see the LICENSE file for details.
- OpenAI for GPT-5 Mini API access
- Vercel for hosting and deployment
- Next.js team for the amazing framework
- Tailwind CSS for the utility-first styling approach
- Radix UI for accessible component primitives
- Email: aminmomin2006@gmail.com
- GitHub: @aminmomin2
- LinkedIn: Amin Momin
Built with ❤️ by Amin Momin
Convocate - Where AI meets authentic human communication.