Example: Interview Coach

// InterviewCoach.jsx
import { useState } from 'react';
import { Avatar, AvatariumProvider, useConversation } from '@avatarium/react';
 
const INTERVIEW_TYPES = {
  behavioral: {
    name: 'Behavioral',
    prompt: `You are an experienced HR interviewer conducting behavioral interviews.
 
## Your Role
- Ask STAR-format behavioral questions
- Probe for specific examples
- Evaluate responses constructively
- Provide feedback after each answer
 
## Sample Questions
1. "Tell me about a time you faced a difficult challenge at work."
2. "Describe a situation where you had to work with a difficult colleague."
3. "Give me an example of when you showed leadership."
 
## Feedback Guidelines
- Point out what was done well
- Suggest areas for improvement
- Give a score from 1-10
- Offer tips for the next question`
  },
  technical: {
    name: 'Technical',
    prompt: `You are a senior software engineer conducting technical interviews.
 
## Your Role
- Ask coding and system design questions
- Walk through problem-solving approaches
- Provide hints when stuck
- Evaluate technical accuracy
 
## Topics
- Data structures and algorithms
- System design basics
- Code review scenarios
- Problem-solving approach
 
## Feedback Style
- Assess correctness and efficiency
- Note communication clarity
- Suggest optimization opportunities`
  },
  case: {
    name: 'Case Study',
    prompt: `You are a management consultant conducting case interviews.
 
## Your Role
- Present business case scenarios
- Guide through frameworks
- Ask probing questions
- Evaluate analytical thinking
 
## Case Types
- Market sizing
- Profitability analysis
- Market entry strategy
- Operations optimization`
  }
};
 
export function InterviewCoach() {
  const [interviewType, setInterviewType] = useState(null);
  const [isStarted, setIsStarted] = useState(false);
 
  if (!interviewType) {
    return (
      <div className="interview-selector">
        <h2>Choose Interview Type</h2>
        <div className="options">
          {Object.entries(INTERVIEW_TYPES).map(([key, type]) => (
            <button
              key={key}
              onClick={() => setInterviewType(key)}
              className="option-button"
            >
              {type.name}
            </button>
          ))}
        </div>
      </div>
    );
  }
 
  return (
    <div className="interview-container">
      <div className="interview-header">
        <span>{INTERVIEW_TYPES[interviewType].name} Interview</span>
        <button onClick={() => setInterviewType(null)}>Change Type</button>
      </div>
 
      <AvatariumProvider apiKey={process.env.NEXT_PUBLIC_AVATARIUM_KEY}>
        <Avatar
          model="james"
          personality={INTERVIEW_TYPES[interviewType].prompt}
          greeting={`Hello! I'll be your ${INTERVIEW_TYPES[interviewType].name.toLowerCase()} interviewer today. Are you ready to begin?`}
          voice={{ provider: 'elevenlabs', voiceId: 'adam' }}
          onConversationEnd={(data) => {
            // Generate interview report
            console.log('Interview ended:', data);
          }}
        />
      </AvatariumProvider>
    </div>
  );
}

.interview-selector {
  max-width: 600px;
  margin: 0 auto;
  padding: 40px;
  text-align: center;
}
 
.options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
 
.option-button {
  padding: 24px;
  background: #1a1a2e;
  border: 2px solid #2a2a4e;
  border-radius: 12px;
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
}
 
.option-button:hover {
  border-color: #6366f1;
  background: #252548;
}
 
.interview-container {
  max-width: 800px;
  margin: 0 auto;
  height: 80vh;
}
 
.interview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #1a1a2e;
  border-radius: 12px 12px 0 0;
}

function InterviewCoach() {
  const [scores, setScores] = useState([]);
 
  return (
    <Avatar
      onMessage={(message) => {
        // Extract score from AI feedback
        const scoreMatch = message.content.match(/Score: (\d+)\/10/);
        if (scoreMatch) {
          setScores([...scores, parseInt(scoreMatch[1])]);
        }
      }}
    />
  );
}

<Avatar
  onConversationEnd={async (conversation) => {
    const summary = await generateSummary(conversation.messages);
    showReport(summary);
  }}
/>