FlashGenius generates high-quality educational flashcards on any topic. If you’ve ever wanted to quickly create study materials for yourself or your students, FlashGenius is for you.
FlashGenius was vibecoded in 1 hour on the April 24, 2025 Mastra workshop.
It consists of a backend based on Mastra agents and workflows and a frontend that lets users instantly generate and review flashcards.
How it works
FlashGenius backend: a combination of Mastra agents and workflows
At the core of FlashGenius is a Mastra agent that specializes in generating flashcards. Here’s how it’s defined:
1// src/mastra/agents/flashcardAgent.ts
2import { openai } from "@ai-sdk/openai";
3import { Agent } from "@mastra/core/agent";
4
5export const flashcardAgent = new Agent({
6 name: "flashcard-generator",
7 instructions: `
8 You are an expert educational content creator specializing in creating high-quality flashcards.
9 Your task is to generate informative and educational flashcards on any given topic.
10 ...
11 Return the flashcards as a structured array of objects with 'question' and 'answer' properties.
12 ...
13 `,
14 model: openai("gpt-4o"),
15});This agent is given clear instructions to generate flashcards in a structured format, using OpenAI’s GPT-4o model.
To orchestrate the process, we use a Mastra workflow. The workflow takes user input (topic, difficulty, number of cards), calls the agent, and validates the output:
1// src/mastra/workflow/index.ts
2const generateFlashcardsStep = new Step({
3 id: "generateFlashcards",
4 outputSchema: z.object({
5 flashcards: flashcardsArraySchema,
6 }),
7 execute: async (context: any) => {
8 const mastra = context.mastra;
9 const { topic, difficulty, count } = context.trigger;
10 const agent = mastra.getAgent("flashcardAgent");
11 const result = await agent.generate(
12 `Generate ${count} flashcards about "${topic}" at ${difficulty} level. ...`,
13 { output: z.object({ flashcards: flashcardsArraySchema }) },
14 );
15 return { flashcards: result.object.flashcards };
16 },
17});
18
19export const generateFlashcardsWorkflow = new Workflow({
20 name: "generate-flashcards-workflow",
21 triggerSchema: z.object({
22 topic: z.string(),
23 difficulty: z.enum(["beginner", "intermediate", "advanced"]),
24 count: z.number().min(1).max(20),
25 }),
26});
27generateFlashcardsWorkflow.step(generateFlashcardsStep).commit();The workflow ensures that the agent’s output is always a well-formed list of flashcards, ready for the frontend.
FlashGenius frontend
The frontend is a modern React app (using TypeScript), with a simple, clean UI. It uses React Router for navigation and Tailwind CSS for styling. Here’s a quick look at the main app structure:
1// src/App.tsx
2<Router>
3 <Header />
4 <main>
5 <Routes>
6 <Route path="/" element={<Home />} />
7 <Route path="/create" element={<Create />} />
8 </Routes>
9 </main>
10 <footer>...</footer>
11</Router>The key interaction happens on the “Create” page. When a user submits a topic and difficulty, the frontend calls the backend via a Mastra client SDK:
1// src/client.ts
2export const generateFlashcards = async ({ topic, difficulty, cardCount }) => {
3 const agent = mastraClient.getAgent("flashcardAgent");
4 const response = await agent.generate({
5 messages: [
6 {
7 role: "user",
8 content: `Generate ${cardCount} flashcards about "${topic}" at ${difficulty} level.`,
9 },
10 ],
11 });
12 // ...parse and return flashcards...
13};The frontend handles loading states, errors, and even falls back to mock data if the backend is unavailable, making for a smooth user experience.
Build your own flashcard app
FlashGenius is a simple example of what you can build with Mastra. The agent/workflow pattern makes it easy to define AI-powered features and the frontend integration is straightforward.
We’d love to see what apps you build (or what tweaks you make to FlashGenius!)
Happy building 🚀