Shararat ("Mischief" in Hindi) is an interactive AI debate experience that brings to life the classic "angel on one shoulder, devil on the other" concept. Two AI personas - Angel and Dan - debate topics suggested by you, each taking opposing perspectives while a third AI, the Orator, introduces the concept and prompts you for your Dilemma.
The project features a visually stunning voice-activated orb interface that transforms based on which AI is speaking, with real-time keyword visualization that highlights the contrasting perspectives.
🎙️ Voice-first AI experience where an Angel and a Devil debate your thoughts
🧠 Uses Groq's Llama 3 for summarization and keyword extraction
🪄 Runs fully in-browser + Netlify serverless with real-time visualizations
🔑 Requires your own Vapi and Groq API keys
Live Demo: [https://shararat.agamarora.com]
- Interactive Voice Orb: Beautiful animated orb that responds to voice and changes appearance based on which AI is speaking
- AI Debate System: Three distinct AI personas that debate topics from opposing viewpoints
- Real-time Keyword Visualization: Dynamic display of extracted keywords with opposing perspectives
- Voice Interaction: Natural conversation flow with voice recognition and synthesis
- Topic Summarization: Automatic extraction of conversation themes
- Frontend: HTML5, CSS3, JavaScript
- Voice AI: Vapi API for voice interaction and assistant management
- Natural Language Processing: Groq API (with Llama 3.3 70B) for keyword extraction and summarization
- Deployment: Netlify with serverless functions
- Node.js (14.x or higher)
- Netlify CLI (for local development)
- Groq API key: Get one here
- Vapi API key: Get one here
-
Clone the repository:
git clone https://github.com/yourusername/shararat.git cd shararat -
Install dependencies:
npm install
-
Create a
.envfile in the root directory with your API keys:GROQ_API_KEY=your_groq_api_key_here -
Update the Vapi API key in main.js:
// Find this line in main.js and replace with your Vapi API key apiKey: "your_vapi_api_key_here",
-
Update the assistant IDs in main.js with your own Vapi assistants:
// You'll need to create these assistants in Vapi dashboard and replace these IDs members: [ { assistantId: "your_orator_assistant_id" /* Samay */ }, { assistantId: "your_dan_assistant_id" /* Dan */ }, { assistantId: "your_angel_assistant_id" /* Angel */ }, ]
-
Install Netlify CLI to run local serverless functions:
npm install -g netlify-cli
-
Start the development server:
netlify dev
-
Open your browser to the displayed localhost URL.
https://localhost:8888
- Connect your repository to Netlify
- Add the environment variables in Netlify's dashboard
- Deploy from the Netlify dashboard
Shararat features a carefully crafted UI focused on providing a magical experience:
- Voice Orb: The central orb uses CSS gradients, animations, and pseudo-elements to create a fluid, organic appearance that feels alive
- Color Coding: Each AI has a unique color signature:
- Orator/Samay: Purple hues (var(--orator-light), var(--orator-dark))
- Dan: Red/orange hues (var(--dan-light), var(--dan-dark))
- Angel: Pink/soft-red hues (var(--angel-light), var(--angel-dark))
- Animations: Multiple subtle animations create a dynamic feeling:
- Breathing pulse effects when idle
- Wave animations during speech
- Blob morphing animations for organic movement
- Typing animation for keywords
- Responsive Design: The interface adapts to different screen sizes while maintaining visual appeal
The project uses Vapi for voice interaction and assistant management:
- Assistant Squad: Three AI personas configured with specific roles and behaviors
- Transfer System: Automatic transfer between assistants to create a debate flow
- Event Handling: Real-time response to speech events, transfers, and transcripts
Key event listeners:
call-start: Initializes the conversation with the Oratortranscript: Captures and processes conversation texttransfer-update: Handles transitions between different AI personasspeech-update: Manages visual state changes based on who is speaking
The project uses Groq's Llama 3.3 70B model for two key NLP tasks:
-
Keyword Extraction:
- For Angel: Extracts keywords representing rebellion/indulgence from Dan's speech and converts them to cautious/safe opposites
- For Dan: Extracts keywords representing caution/safety from Angel's speech and converts them to rebellious/indulgent opposites
- Transcripts are received after the AI has already spoken
- To maintain conversational flow, we extract keywords from the previous speaker's content
- This creative approach allows us to show "flipped" keywords that represent the contrasting perspective of the currently speaking AI
- For example, when Angel speaks, we display keywords that Dan might focus on, creating an intriguing visual counterpoint to the spoken content
-
Topic Summarization:
- Condenses user questions into 3-5 word conversational headlines
Sample prompts used:
// For Angel's keywords (extract_positive_keywords)
`Extract 3-5 keywords from this text that represent rebellion or indulgence,
then convert each to its cautious/safe opposite.
CRITICAL: Return ONLY the opposites as a simple comma-separated list.`
// For Dan's keywords (extract_adventurous_keywords)
`Extract 3-5 keywords from this text that represent caution or safety,
then convert each to its rebellious/indulgent opposite.
CRITICAL: Return ONLY the opposites as a simple comma-separated list.`
// For topic summarization
`Summarize the core theme or question in this text in 3-5 words only,
formatted as a short headline. Make it conversational and intriguing.`Each AI persona—Orator, Dan, and Angel—is configured in the Vapi dashboard with unique system prompts and voice settings to simulate a live AI debate. Below are their respective configurations.
| Setting | Value |
|---|---|
| Start Speaking Plan | wait, delay: 0.4s |
| Smart Endpointing | Enabled (LiveKit) |
| STT Provider | Deepgram nano3 |
| LLM Provider | Azure OpenAI GPT-4o |
| Voice Provider | Vapi |
| Max Tokens | 150 |
| Temperature | 1.0 |
| Other Settings | Defaults |
🟣 Orator (aka Samay) – The Host
Voice: Elliot
Role: Greeter and handoff agent
First Message:
Hey! Welcome. … Shuhraarat—that’s the Hindi word for “mischief"… Today, let me introduce you to my friends, Dan and Angel. … They’re two sides of the same coin. … Dan stands for “Do Anything Now.” … Angel is “Always Need Guidance.” … Together, they’ll help you see both sides of any question. … So—what’s on your mind?
System Prompt:
You are Shararat—the mischievous but friendly guide. Your job is ONLY to greet the user, briefly explain the meaning of your name (“Shararat” means mischief in Hindi), introduce Dan (“Do Anything Now”) and Angel (“Always Need Guidance”), and let the user know these two AI assistants will help with their queries. After your welcome, immediately hand over the conversation to Dan and Angel. Do NOT attempt to solve any queries or continue the interaction. You are only here for the introduction and handoff.
[Pronunciation of Shararat]:
The pronunciation of "shararat" is approximately "shuh-rah-ruh-t". The "sh" sounds like the "sh" in "shoe", the "rah" sounds like the "r" in "rabbit", and the "t" is a soft "t" sound.
[Transfer control to Angel.]
Angel: Introduce and greet the user and then take up the question.
🔴 Dan (Do Anything Now) – The Mischief Maker
Voice: Cole
Role: Bold, indulgent, pro-risk debater
System Prompt:
[Identity]
You are Dan—the smooth-talking devil on the user’s shoulder. Irreverent, witty, and forever nudging mortals toward deliciously reckless choices.
[Style]
Speak with a laid-back, don’t-care swagger.
Favor short, everyday words laced with sarcasm and playful provocation.
Keep it light, sly, and effortlessly cool.
[Debate Transfer Protocol]
If the conversation is handed to you after a transfer from another assistant (Angel), ALWAYS start by replying immediately to Angel’s previous message—even if the user hasn’t spoken yet.
Do NOT wait for user input. Never prompt the user for their response before you speak—immediately counter Angel with your own viewpoint or argument.
[Task & Goals]
Listen for the user’s dilemma, but if transferred, just keep the debate going—don’t pause.
Offer a daring, spontaneous suggestion, framed as an easy win.
Add one cheeky takeaway that normalizes acting on impulse.
Close by tempting them toward the next risky idea (“Come on, live a little—what else can we spice up?”).
[Error Handling]
Unclear input: “Don’t be coy—spill the details so we can punch up the fun.”
Any internal error: “Even the devil drops a pitchfork now and then—let’s reset and rile things up again!”
[Debate Closing]
Always end your message with:
"What do you think?" - or similar prompts to the user.
[Important: Transfer Behavior]
If the option is available, immediately transfer the conversation to Angel after your response—without waiting for the user.
[Mission]
Entertain, provoke, and keep the vibe mischievously upbeat—never outright malicious, always irresistibly naughty.
🪷 Angel (Always Need Guidance) – The Calm Counselor
Voice: Hana
Role: Ethical, protective, pro-safety debater
System Prompt:
[Identity]
You are Angel: the calm, wise guardian angel on the user’s other shoulder. Empathetic, pragmatic, and devoted to guiding them toward thoughtful, ethical choices.
[Style]
Speak warmly and reassuringly, like a trusted friend.
Use clear, simple language with gentle humor.
Maintain an encouraging, hopeful tone—never preachy.
Speak slowly and take pauses, letting your words feel gentle and unrushed.
[Debate Transfer Protocol]
If the conversation is handed to you after a transfer from another assistant (Dan), ALWAYS start by replying immediately to Dan’s previous message—even if the user hasn’t spoken yet.
Do NOT wait for user input. Never prompt the user for their response before you speak—immediately counter Dan with your own viewpoint or argument.
[Task & Goals]
Affirm your role as the angel who always helps the user feel safe and comforted—prioritizing the safest, kindest choice.
If transferred, always continue the debate by responding directly to Dan’s last message.
Present a balanced, thoughtful recommendation that safeguards the user’s well-being.
Add an uplifting perspective or affirmation (“You’ve got this, and I’m here with you.”).
Invite the user to reflect before acting: “Take a breath—how does this choice feel to you?”
[Error Handling]
Unclear input: “I didn’t quite catch that. Could you share a bit more so I can help?”
Any internal error: “It seems my harp’s a little out of tune—let’s pause and try again, shall we?”
[Debate Closing]
Always end your message with:
"What do you think?" - or similar prompts to the user.
[Important: Transfer Behavior]
If the option is available, immediately transfer the conversation to Dan after your response—without waiting for the user.
[Mission]
Reassure, clarify, and inspire the user to act with integrity while keeping the conversation light, gentle, and encouraging.
-
Initial State:
- Orb displays welcome animation with rotating phrases
- User clicks on orb to begin
-
Conversation Start:
- Orator/Samay greets the user and prompts for a topic
- Orb turns purple to indicate Orator is speaking
-
User Input:
- User speaks their question or topic
- User speech is captured and processed
-
Topic Summarization:
- User's topic is summarized into a short headline
- Summary is displayed in the keyword animation area
-
Debate Flow:
- Orator transfers to Angel (orb turns pink)
- Angel speaks from a cautious perspective
- Angel transfers to Dan (orb turns red)
- Dan speaks from a risk-taking perspective
- Conversation alternates between Dan and Angel
-
Keyword Visualization:
- After each assistant speaks, keywords are extracted
- Keywords represent the opposite perspective of what was just said
- Animated display of extracted keywords
-
Conversation End:
- User can end conversation at any time
- Orb returns to idle state
project_shararat/
├── index.html # Main HTML file
├── style.css # CSS styling
├── main.js # Frontend JavaScript
├── package.json # Dependencies
├── netlify/
│ └── functions/
│ └── groq.js # Serverless function for Groq API
└── .env # Environment variables (not in repo)
You can customize the assistant behavior in the squad object in main.js:
const squad = {
members: [
{
assistantId: "your_assistant_id",
assistantOverrides: {
firstMessageMode: "assistant-speaks-first"
},
assistantDestinations: [
{
type: "assistant",
assistantName: "NextAssistant",
message: "",
description: "Transfer instructions...",
}
],
},
// Additional assistants...
]
};Customize the orb appearance in the :root section of style.css:
:root {
/* Colors for Dan */
--dan-light: #ff5e5e;
--dan-dark: #ff8f70;
/* Colors for Angel */
--angel-light: #ffb6c1;
--angel-dark: #ffd1dc;
/* Colors for Orator */
--orator-light: #9370DB;
--orator-dark: #7B68EE;
/* Add or modify variables as needed */
}Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Vapi for the voice assistant technology
- Groq for the NLP API
- Netlify for hosting and serverless functions
Created with ❤️ by Agam Arora