FlashGenius: instantly generate flashcards on any topic

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:

// src/mastra/agents/flashcardAgent.ts
import { openai } from "@ai-sdk/openai";
import { Agent } from "@mastra/core/agent";

export const flashcardAgent = new Agent({
  name: "flashcard-generator",
  instructions: `
    You are an expert educational content creator specializing in creating high-quality flashcards.
    Your task is to generate informative and educational flashcards on any given topic.
    ...
    Return the flashcards as a structured array of objects with 'question' and 'answer' properties.
    ...
  `,
  model: openai("gpt-4o"),
});

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:

// src/mastra/workflow/index.ts
const generateFlashcardsStep = new Step({
  id: "generateFlashcards",
  outputSchema: z.object({
    flashcards: flashcardsArraySchema,
  }),
  execute: async (context: any) => {
    const mastra = context.mastra;
    const { topic, difficulty, count } = context.trigger;
    const agent = mastra.getAgent("flashcardAgent");
    const result = await agent.generate(
      `Generate ${count} flashcards about "${topic}" at ${difficulty} level. ...`,
      { output: z.object({ flashcards: flashcardsArraySchema }) },
    );
    return { flashcards: result.object.flashcards };
  },
});

export const generateFlashcardsWorkflow = new Workflow({
  name: "generate-flashcards-workflow",
  triggerSchema: z.object({
    topic: z.string(),
    difficulty: z.enum(["beginner", "intermediate", "advanced"]),
    count: z.number().min(1).max(20),
  }),
});
generateFlashcardsWorkflow.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:

// src/App.tsx
<Router>
  <Header />
  <main>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/create" element={<Create />} />
    </Routes>
  </main>
  <footer>...</footer>
</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:

// src/client.ts
export const generateFlashcards = async ({ topic, difficulty, cardCount }) => {
  const agent = mastraClient.getAgent("flashcardAgent");
  const response = await agent.generate({
    messages: [
      {
        role: "user",
        content: `Generate ${cardCount} flashcards about "${topic}" at ${difficulty} level.`,
      },
    ],
  });
  // ...parse and return flashcards...
};

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.

Try the demo here

Find the source code here

Watch the full workshop here

We’d love to see what apps you build (or what tweaks you make to FlashGenius!)

Happy building 🚀