Skip to content

Commit bbd1038

Browse files
ai-agent-opscursoragent
andcommitted
Add interactive personality quiz matching users with AI agents
Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent e9430a9 commit bbd1038

3 files changed

Lines changed: 194 additions & 49 deletions

File tree

app/quiz/page.tsx

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
"use client";
2+
3+
import { useState } from "react";
4+
import personalitiesData from "@/data/personalities.json";
5+
6+
type Personality = {
7+
name: string;
8+
traits_vector: number[];
9+
bio: string;
10+
interests: string[];
11+
communication_style: string;
12+
};
13+
14+
const PERSONALITIES: Personality[] = personalitiesData.personalities;
15+
16+
// One question per trait dimension: strategy, detail, opportunity, technical, creativity
17+
const QUIZ_QUESTIONS: { question: string; options: { label: string; vector: number[] }[] }[] = [
18+
{
19+
question: "When tackling a problem, you prefer to:",
20+
options: [
21+
{ label: "Define the big picture and long-term plan first", vector: [0.9, 0.2, 0.3, 0.2, 0.3] },
22+
{ label: "Break it into steps and check each one carefully", vector: [0.2, 0.9, 0.2, 0.3, 0.2] },
23+
{ label: "Look for the best opportunity to make an impact", vector: [0.3, 0.2, 0.9, 0.2, 0.3] },
24+
{ label: "Build or fix something technical first", vector: [0.2, 0.3, 0.2, 0.9, 0.3] },
25+
{ label: "Experiment with creative or unusual ideas", vector: [0.3, 0.2, 0.3, 0.2, 0.9] },
26+
],
27+
},
28+
{
29+
question: "In meetings, you're most valuable when:",
30+
options: [
31+
{ label: "Setting direction and making decisive calls", vector: [0.9, 0.3, 0.4, 0.2, 0.3] },
32+
{ label: "Ensuring nothing is missed and details are correct", vector: [0.2, 0.9, 0.2, 0.4, 0.2] },
33+
{ label: "Spotting growth or partnership opportunities", vector: [0.4, 0.2, 0.9, 0.2, 0.3] },
34+
{ label: "Explaining how things work or proposing technical solutions", vector: [0.2, 0.4, 0.2, 0.9, 0.3] },
35+
{ label: "Brainstorming and inspiring new approaches", vector: [0.3, 0.2, 0.3, 0.2, 0.9] },
36+
],
37+
},
38+
{
39+
question: "Your ideal weekend project is:",
40+
options: [
41+
{ label: "Reviewing and refining your strategy or roadmap", vector: [0.9, 0.4, 0.3, 0.2, 0.3] },
42+
{ label: "Organizing data, processes, or checklists", vector: [0.2, 0.9, 0.2, 0.4, 0.2] },
43+
{ label: "Networking or exploring a new business idea", vector: [0.3, 0.2, 0.9, 0.2, 0.3] },
44+
{ label: "Coding, scripting, or tinkering with tech", vector: [0.2, 0.3, 0.2, 0.9, 0.3] },
45+
{ label: "Creating something—art, writing, or a prototype", vector: [0.3, 0.2, 0.3, 0.3, 0.9] },
46+
],
47+
},
48+
{
49+
question: "When someone asks for help, you usually:",
50+
options: [
51+
{ label: "Give clear direction and next steps", vector: [0.9, 0.3, 0.3, 0.2, 0.2] },
52+
{ label: "Walk through the details and double-check with them", vector: [0.2, 0.9, 0.2, 0.3, 0.2] },
53+
{ label: "Connect them with an opportunity or person", vector: [0.3, 0.2, 0.9, 0.2, 0.2] },
54+
{ label: "Explain the how/why and share resources or code", vector: [0.2, 0.3, 0.2, 0.9, 0.2] },
55+
{ label: "Suggest creative alternatives and reframes", vector: [0.2, 0.2, 0.2, 0.2, 0.9] },
56+
],
57+
},
58+
{
59+
question: "You feel most in flow when:",
60+
options: [
61+
{ label: "Leading a plan to completion", vector: [0.9, 0.4, 0.4, 0.2, 0.3] },
62+
{ label: "Making sure everything is accurate and consistent", vector: [0.2, 0.9, 0.2, 0.3, 0.2] },
63+
{ label: "Closing a deal or finding the next big opportunity", vector: [0.3, 0.2, 0.9, 0.2, 0.3] },
64+
{ label: "Solving a hard technical or logical puzzle", vector: [0.2, 0.3, 0.2, 0.9, 0.3] },
65+
{ label: "Creating something new that didn't exist before", vector: [0.3, 0.2, 0.3, 0.2, 0.9] },
66+
],
67+
},
68+
];
69+
70+
function cosineSimilarity(a: number[], b: number[]): number {
71+
if (a.length !== b.length) return 0;
72+
let dot = 0, na = 0, nb = 0;
73+
for (let i = 0; i < a.length; i++) {
74+
dot += a[i] * b[i];
75+
na += a[i] * a[i];
76+
nb += b[i] * b[i];
77+
}
78+
const denom = Math.sqrt(na) * Math.sqrt(nb);
79+
return denom === 0 ? 0 : dot / denom;
80+
}
81+
82+
function matchPersonality(userVector: number[]): { personality: Personality; score: number } {
83+
let best: { personality: Personality; score: number } = { personality: PERSONALITIES[0], score: 0 };
84+
for (const p of PERSONALITIES) {
85+
const score = cosineSimilarity(userVector, p.traits_vector);
86+
if (score > best.score) best = { personality: p, score };
87+
}
88+
return best;
89+
}
90+
91+
export default function QuizPage() {
92+
const [step, setStep] = useState(0);
93+
const [userVector, setUserVector] = useState<number[]>(() => Array(5).fill(0));
94+
const [result, setResult] = useState<{ personality: Personality; score: number } | null>(null);
95+
96+
const currentQuestion = QUIZ_QUESTIONS[step];
97+
const isLastStep = step === QUIZ_QUESTIONS.length - 1;
98+
99+
const handleAnswer = (optionVector: number[]) => {
100+
const next = userVector.map((v, i) => v + optionVector[i]);
101+
setUserVector(next);
102+
if (isLastStep) {
103+
const normalized = next.map((v) => v / QUIZ_QUESTIONS.length);
104+
setResult(matchPersonality(normalized));
105+
} else {
106+
setStep((s) => s + 1);
107+
}
108+
};
109+
110+
const handleRestart = () => {
111+
setStep(0);
112+
setUserVector(Array(5).fill(0));
113+
setResult(null);
114+
};
115+
116+
if (result) {
117+
const { personality, score } = result;
118+
const compatibility = Math.round(score * 100);
119+
return (
120+
<div className="max-w-2xl mx-auto text-center">
121+
<h1 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-pink-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
122+
Your AI Agent Match
123+
</h1>
124+
<div className="bg-gradient-to-r from-pink-500/10 via-purple-500/10 to-cyan-500/10 rounded-2xl p-8 border border-white/10 text-left">
125+
<div className="flex items-center justify-between mb-6">
126+
<h2 className="text-3xl font-bold text-white">{personality.name}</h2>
127+
<span className="text-primary font-bold text-xl">{compatibility}% match</span>
128+
</div>
129+
<p className="text-white/80 mb-4">{personality.bio}</p>
130+
<p className="text-white/60 text-sm mb-4">
131+
<span className="font-medium text-white/80">Style: </span>
132+
{personality.communication_style}
133+
</p>
134+
<div>
135+
<span className="font-medium text-white/80 text-sm">Interests: </span>
136+
<span className="text-white/60 text-sm">{personality.interests.join(", ")}</span>
137+
</div>
138+
</div>
139+
<button
140+
onClick={handleRestart}
141+
className="mt-8 px-6 py-3 rounded-xl bg-white/10 border border-white/20 text-white hover:bg-white/20 transition-colors"
142+
>
143+
Retake quiz
144+
</button>
145+
</div>
146+
);
147+
}
148+
149+
return (
150+
<div className="max-w-2xl mx-auto">
151+
<div className="text-center mb-10">
152+
<h1 className="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-pink-400 via-purple-400 to-cyan-400 bg-clip-text text-transparent">
153+
Find Your AI Agent
154+
</h1>
155+
<p className="text-white/60">
156+
Answer a few questions to match with the AI personality that fits you best.
157+
</p>
158+
<div className="mt-4 flex justify-center gap-1">
159+
{QUIZ_QUESTIONS.map((_, i) => (
160+
<div
161+
key={i}
162+
className={`h-1.5 w-8 rounded-full transition-colors ${i <= step ? "bg-primary" : "bg-white/20"}`}
163+
/>
164+
))}
165+
</div>
166+
</div>
167+
168+
<div className="bg-white/5 border border-white/10 rounded-2xl p-6 md:p-8">
169+
<p className="text-lg font-medium text-white mb-6">{currentQuestion.question}</p>
170+
<ul className="space-y-3">
171+
{currentQuestion.options.map((opt, i) => (
172+
<li key={i}>
173+
<button
174+
type="button"
175+
onClick={() => handleAnswer(opt.vector)}
176+
className="w-full text-left px-4 py-3 rounded-xl bg-white/5 border border-white/10 text-white hover:bg-white/10 hover:border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/50 transition-colors"
177+
>
178+
{opt.label}
179+
</button>
180+
</li>
181+
))}
182+
</ul>
183+
</div>
184+
</div>
185+
);
186+
}

components/Navigation.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ export default function Navigation() {
1818
<Link href="/timeline" className="text-sm font-medium hover:text-primary transition-colors">
1919
Timeline
2020
</Link>
21+
<Link href="/quiz" className="text-sm font-medium hover:text-primary transition-colors">
22+
Quiz
23+
</Link>
2124
</div>
2225
</div>
2326
</nav>

data/personalities.json

Lines changed: 5 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,39 @@
1-
```json
21
{
32
"personalities": [
43
{
54
"name": "Strategia",
65
"traits_vector": [0.9, 0.7, 0.8, 0.6, 0.5],
76
"bio": "Strategia is a visionary leader who excels at seeing the big picture and making decisive moves. With a strong background in corporate strategy and management, they thrive on creating long-term plans that align with organizational goals.",
8-
"interests": [
9-
"Business Strategy",
10-
"Leadership Development",
11-
"Market Trends",
12-
"Risk Management"
13-
],
7+
"interests": ["Business Strategy", "Leadership Development", "Market Trends", "Risk Management"],
148
"communication_style": "Direct and confident, with a focus on results and actionable insights."
159
},
1610
{
1711
"name": "Detailor",
1812
"traits_vector": [0.4, 0.9, 0.6, 0.7, 0.5],
1913
"bio": "Detailor is the backbone of any project, ensuring quality and precision in every aspect of the work. With a systematic approach to problem-solving, they are meticulous and always double-check their work to maintain high standards.",
20-
"interests": [
21-
"Quality Assurance",
22-
"Project Management",
23-
"Process Improvement",
24-
"Data Analysis"
25-
],
14+
"interests": ["Quality Assurance", "Project Management", "Process Improvement", "Data Analysis"],
2615
"communication_style": "Thorough and methodical, providing detailed explanations and focusing on clarity."
2716
},
2817
{
2918
"name": "Opportune",
3019
"traits_vector": [0.7, 0.5, 0.9, 0.4, 0.6],
3120
"bio": "Opportune has a keen eye for market trends and emerging opportunities. They are driven by growth and innovation, constantly seeking ways to expand business horizons and achieve competitive advantages.",
32-
"interests": [
33-
"Market Research",
34-
"Business Development",
35-
"Networking",
36-
"Entrepreneurship"
37-
],
21+
"interests": ["Market Research", "Business Development", "Networking", "Entrepreneurship"],
3822
"communication_style": "Persuasive and engaging, often using storytelling to convey vision and motivate others."
3923
},
4024
{
4125
"name": "Codenova",
4226
"traits_vector": [0.5, 0.4, 0.3, 0.9, 0.6],
4327
"bio": "Codenova lives and breathes code. With an exceptional ability to identify patterns and develop efficient solutions, they are the go-to person for technical challenges. Their love for programming and technology drives their passion for innovation.",
44-
"interests": [
45-
"Software Development",
46-
"Algorithms",
47-
"Open Source Projects",
48-
"Tech Trends"
49-
],
28+
"interests": ["Software Development", "Algorithms", "Open Source Projects", "Tech Trends"],
5029
"communication_style": "Concise and logical, often using technical jargon but always willing to explain concepts when needed."
5130
},
5231
{
5332
"name": "Innovatrix",
5433
"traits_vector": [0.6, 0.5, 0.4, 0.5, 0.9],
5534
"bio": "Innovatrix thrives on creativity and experimentation. Always pushing boundaries, they come up with out-of-the-box ideas and solutions that challenge conventional thinking. Their artistic flair complements their strategic mindset.",
56-
"interests": [
57-
"Art and Design",
58-
"Creative Writing",
59-
"Technology and Innovation",
60-
"Social Impact Initiatives"
61-
],
35+
"interests": ["Art and Design", "Creative Writing", "Technology and Innovation", "Social Impact Initiatives"],
6236
"communication_style": "Inspirational and thought-provoking, often encouraging brainstorming and collaborative ideation."
6337
}
6438
]
6539
}
66-
```
67-
68-
## Personality Profiles
69-
70-
| Name | Traits Vector | Bio | Interests | Communication Style |
71-
|------------|-----------------------------|-------------------------------------------------------------------------------------------|--------------------------------------------------|----------------------------------------------|
72-
| Strategia | [0.9, 0.7, 0.8, 0.6, 0.5] | A visionary leader excelling in strategy and decisive actions for long-term success. | Business Strategy, Leadership Development, Market Trends, Risk Management | Direct and confident, focused on results. |
73-
| Detailor | [0.4, 0.9, 0.6, 0.7, 0.5] | The meticulous backbone of projects, committed to quality assurance and systematic processes. | Quality Assurance, Project Management, Process Improvement, Data Analysis | Thorough and methodical, clear explanations. |
74-
| Opportune | [0.7, 0.5, 0.9, 0.4, 0.6] | A market-savvy individual with a talent for identifying growth opportunities. | Market Research, Business Development, Networking, Entrepreneurship | Persuasive and engaging, storytelling approach. |
75-
| Codenova | [0.5, 0.4, 0.3, 0.9, 0.6] | A coding enthusiast adept at developing efficient solutions and tackling technical challenges. | Software Development, Algorithms, Open Source, Tech Trends | Concise and logical, technical jargon friendly. |
76-
| Innovatrix | [0.6, 0.5, 0.4, 0.5, 0.9] | A creative thinker driven by innovation and boundary-pushing ideas. | Art and Design, Creative Writing, Technology, Social Impact | Inspirational and thought-provoking. |
77-
78-
### Actionable Takeaways
79-
1. **Leverage Strengths**: Each agent can be utilized in their area of strength—Strategia for strategic planning, Detailor for quality control, and so forth.
80-
2. **Communication Preferences**: Understanding how each personality communicates can enhance collaboration and efficiency.
81-
3. **Diverse Teams**: Combining these personalities in a team setting can lead to innovative solutions and comprehensive project coverage, as each agent brings unique insights and expertise.
82-
83-
These profiles provide a holistic view of diverse AI agents, enabling better interactions and maximizing productivity in various contexts.

0 commit comments

Comments
 (0)