Polish and enhance

Author: zackproser

src/content/blog/ai-pipelines-and-agents-mastra/page.mdx

@@ -4,35 +4,335 @@ import { createMetadata } from '@/utils/createMetadata'
 import aieWorkshop from '@/images/aie-workshop-room.webp'
 import aieFisheye from '@/images/aie-workshop-fisheye.webp'
 import zackAndNick from '@/images/zack-and-nick.webp'
+import good1 from '@/images/good1.jpeg'
+import good2 from '@/images/good2.png'
+import good3 from '@/images/good3.jpg'
+import good4 from '@/images/good4.jpeg'
+import feedback1 from '@/images/mastra-workshop-feedback-1.webp'
+import feedback2 from '@/images/mastra-workshop-feedback-2.webp'
 
 export const metadata = createMetadata({
   author: 'Zachary Proser',
   date: '2025-06-03',
-  title: 'AI Pipelines and Agents in Pure TypeScript with Mastra.ai',
+  title: 'Live Workshop: AI Pipelines and Agents in Pure TypeScript with Mastra.ai - Nick Nisi and Zack Proser',
   description: 'Nick Nisi and I taught 70 engineers how to build AI workflows and agents with Mastra.ai at the AI Engineer World Fair in San Francisco.',
   image: aieWorkshop,
   slug: '/blog/ai-pipelines-and-agents-mastra',
 })
 
 <Image src={aieWorkshop} alt="Nick Nisi presenting with me" />
 
-On June 3rd, 2025, my colleague **Nick Nisi** and I hosted a two hour workshop at the **AI Engineer World Fair** in San Francisco. The event gathered more than 70 engineers eager to build AI powered workflows in their own products.
+On June 3rd, 2025, my colleague **Nick Nisi** and I hosted a two hour workshop at the **AI Engineer World Fair** in San Francisco. The event gathered more than 70 engineers eager to build AI powered workflows in their own products using **Mastra.ai** - a new framework that allows you to orchestrate AI tasks using pure TypeScript.
 
-Mastra.ai provided an early preview of their workflow tooling, which allows you to orchestrate tasks using pure TypeScript. We showed how to chain those workflows together into pipelines and grant access to them through natural language driven agents.
+<figure>
+  <Image src={zackAndNick} alt="Zack and Nick ready to teach" />
+  <figcaption className="mt-2 text-center text-sm text-gray-600 dark:text-gray-400">
+    Nick Nisi is a TypeScript expert, and I'm a full stack developer who has gone deep into GenAI and the <Link href="/blog/vercel-ai-sdk" className="text-blue-600 hover:text-blue-700 underline">Vercel AI SDK</Link>.
+  </figcaption>
+</figure>
 
-All of the materials are open source in the [mastra-agents-meme-generator](https://github.com/workos/mastra-agents-meme-generator) repo. We built the full app first, wrote up the steps in `workshop.md`, and staged each phase on a separate git branch so everyone could work at their own pace.
+## Live Demo: AI Meme Generator in Action
+
+Here's our complete workshop demonstration showing the agentic application we built running end-to-end. Watch how workplace frustrations get transformed into shareable memes through a multi-step AI workflow:
+
+<div style={{ position: 'relative', width: '100%', height: 0, paddingBottom: '56.25%' }}>
+  <iframe 
+    src="https://www.youtube.com/embed/oZmaBSuxZVA" 
+    style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
+    allowFullScreen
+    title="Mastra AI Workshop Demo"
+  />
+</div>
+
+## How the AI Workflow Works
+
+Users simply enter their random workplace frustrations - anything from "my meetings always run over" to "the deployment process is completely broken." Then our **4-step agentic workflow** takes over:
+
+1. **🧠 Analyzes their frustrations** - Uses structured AI generation to extract and categorize the workplace pain points
+2. **🎭 Selects the right base meme** - Searches through Imgflip's extensive template database to find the perfect format
+3. **✍️ Humorously recaptions it** - Generates contextually funny text that transforms frustration into humor
+4. **🚀 Creates and hosts it** - Produces the final shareable meme with a stable URL
+
+The result? Common workplace struggles become genuinely funny, shareable content that teams can actually use.
+
+## Key Learning Outcomes
+
+By the end of the workshop, attendees had:
+
+- ✅ Built a complete agentic workflow with multiple specialized steps
+- ✅ Integrated external APIs (Imgflip, OpenAI) 
+- ✅ Used structured generation for reliable data extraction
+- ✅ Created a fun, shareable application that solves real problems
+- ✅ Learned Mastra's agent and workflow patterns
+- ✅ Gained experience with AI-powered workflows and step composition
+
+## From Toy Example to Production Patterns
+
+While we chose a humorous implementation for our workshop, the **patterns, architecture, and Mastra framework** we demonstrated are ideal for creating **enterprise-grade agentic applications**. The same workflow concepts apply whether you're building:
+
+- **Customer Support Automation** - Multi-step ticket resolution workflows
+- **Data Processing Pipelines** - ETL workflows with AI-powered transformations  
+- **Content Generation Systems** - Marketing copy, documentation, and reports
+- **Complex Business Logic** - Approval processes and intelligent routing
+
+The modular, typed, and testable approach we used for meme generation scales directly to serious production use cases.
+
+## The Meme Generation Pipeline: Technical Deep Dive
+
+Our workshop demonstrates a complete **4-step agentic workflow** that transforms workplace frustrations into shareable memes:
+
+### Understanding the Workflow Architecture
+
+```typescript {theme: 'gruvbox-dark'}
+// Our main agent orchestrates the entire meme generation process
+const memeGeneratorAgent = new Agent({
+  name: 'MemeGenerator',
+  instructions: 'Help users turn their work frustrations into funny memes',
+  workflows: {
+    'meme-generation': memeGenerationWorkflow,
+  },
+});
+```
+
+The workflow consists of four modular, reusable steps:
+
+1. **Extract Frustrations** - Parse user input and categorize workplace pain points
+2. **Find Base Meme** - Select appropriate meme templates from Imgflip's API
+3. **Generate Captions** - Create contextually funny text using AI
+4. **Generate Meme** - Produce the final shareable meme image
+
+### Step 1: Extract Frustrations with Structured Generation
+
+One of Mastra's most powerful features is its integration with **structured generation** using Zod schemas and the Vercel AI SDK:
+
+```typescript {theme: 'gruvbox-dark'}
+const extractFrustrationsStep = createStep({
+  id: 'extract-frustrations',
+  description: 'Extract and categorize user frustrations from raw input',
+  inputSchema: z.object({
+    userInput: z.string().describe('Raw user input about work frustrations'),
+  }),
+  execute: async ({ inputData }) => {
+    const result = await generateObject({
+      model: openai('gpt-4'),
+      schema: frustrationsSchema,
+      prompt: `Extract frustrations from: ${inputData.userInput}`,
+    });
+    return result.object;
+  },
+});
+```
+
+The `frustrationsSchema` ensures reliable data extraction:
+
+```typescript {theme: 'gruvbox-dark'}
+const frustrationsSchema = z.object({
+  primaryFrustration: z.string().describe('The main workplace frustration'),
+  category: z.enum(['meetings', 'communication', 'process', 'technical', 'management']),
+  intensity: z.number().min(1).max(10).describe('Frustration level from 1-10'),
+  context: z.string().describe('Additional context about the situation')
+});
+```
+
+### Step 2: Find Base Meme Templates
+
+The second step searches Imgflip's extensive meme template database:
+
+```typescript {theme: 'gruvbox-dark'}
+const findBaseMemeStep = createStep({
+  id: 'find-base-meme',
+  description: "Get a diverse selection of meme templates from Imgflip's free API",
+  inputSchema: frustrationsSchema.extend({
+    analysis: z.object({
+      message: z.string(),
+    }),
+  }),
+  execute: async ({ inputData }) => {
+    const response = await fetch('https://api.imgflip.com/get_memes');
+    const data = await response.json();
+    
+    // Select templates that work well for workplace humor
+    const selectedMemes = data.data.memes.slice(0, 10);
+    return { templates: selectedMemes };
+  },
+});
+```
+
+### Step 3: Generate Contextual Captions
+
+This step uses AI to create relevant, funny captions based on the extracted frustrations:
+
+```typescript {theme: 'gruvbox-dark'}
+const generateCaptionsStep = createStep({
+  id: 'generate-captions',
+  description: 'Generate meme captions based on frustrations and template',
+  inputSchema: z.object({
+    frustrations: frustrationsSchema,
+    baseTemplate: memeTemplateSchema,
+  }),
+  execute: async ({ inputData }) => {
+    const captions = await generateObject({
+      model: openai('gpt-4'),
+      schema: captionsSchema,
+      prompt: `Create funny captions for ${inputData.baseTemplate.name} 
+                     based on: ${inputData.frustrations}`,
+    });
+    return captions.object;
+  },
+});
+```
+
+### Step 4: Generate the Final Meme
+
+The final step uses Imgflip's caption API to create the actual meme:
+
+```typescript {theme: 'gruvbox-dark'}
+const generateMemeStep = createStep({
+  id: 'generate-meme',
+  description: "Create a meme using Imgflip's caption API",
+  inputSchema: z.object({
+    baseTemplate: memeTemplateSchema,
+    captions: captionsSchema,
+  }),
+  execute: async ({ inputData }) => {
+    const formData = new URLSearchParams();
+    formData.append('template_id', inputData.baseTemplate.id);
+    formData.append('username', process.env.IMGFLIP_USERNAME || 'imgflip_hubot');
+    formData.append('password', process.env.IMGFLIP_PASSWORD || 'imgflip_hubot');
+    formData.append('text0', inputData.captions.topText);
+    formData.append('text1', inputData.captions.bottomText);
+
+    const response = await fetch('https://api.imgflip.com/caption_image', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: formData,
+    });
+    
+    const result = await response.json();
+    return { 
+      imageUrl: result.data.url, 
+      pageUrl: result.data.page_url 
+    };
+  },
+});
+```
+
+## Real Examples from Our Workshop
+
+Here are actual memes generated during our workshop, showcasing how workplace frustrations get transformed into shareable humor:
 
-<Image src={zackAndNick} alt="Zack and Nick ready to teach" />
+### Open Office Nightmares → Workplace Reality
+
+<Image src={good1} alt="Open floor plan noise meme" />
+
+*When they move all the engineers to an open floor plan with noisy co-workers...*
+
+### Compensation Blues → The Talent Paradox
+
+<Image src={good2} alt="Excellent but underpaid meme" />
+
+*Being told you're excellent at your job but somehow still underpaid...*
+
+### The Helper's Dilemma → Salary Irony
+
+<Image src={good3} alt="Helping higher paid colleague meme" />
+
+*When you refer an engineer who constantly asks for your help but gets paid more than you...*
+
+<Image src={good4} alt="Salary disparity meme" />
+
+*That awkward moment when your mentee's starting salary is higher than your current one...*
+
+These examples demonstrate how our AI workflow transforms common workplace frustrations into contextually appropriate and genuinely funny memes that teams can actually share!
+
+## Why Mastra.ai for Production Workflows
+
+### Modular Step Design
+
+Each workflow step is designed to be:
+
+- **Modular**: Can be used independently or as part of larger workflows
+- **Typed**: Uses Zod schemas for input/output validation  
+- **Testable**: Can be tested in isolation using Mastra's built-in tools
+- **Reusable**: Can be composed into different workflows
+
+### Built-in Testing and Development
+
+Mastra provides excellent development experience:
+
+```bash {theme: 'gruvbox-dark'}
+# Start the development server
+npm run dev
+
+# Visit the Mastra playground at http://localhost:4111
+# Use the chat interface to test the complete workflow
+```
+
+### Error Handling and Reliability
+
+The framework includes graceful error handling and recovery mechanisms, essential for production AI applications.
+
+## Workshop Experience and Results
+
+All of the materials are open source in the [mastra-agents-meme-generator](https://github.com/workos/mastra-agents-meme-generator) repo. We built the full app first, wrote up the steps in `workshop.md`, and staged each phase on a separate git branch so everyone could work at their own pace.
 
 The hands-on format let attendees build a simple pipeline from scratch, then wrap it with an agent interface. Seeing the agents successfully complete tasks through our pipelines was an awesome moment for everyone in the room.
 
 One of us stayed on the mic while the other roamed the room answering questions and fixing issues. This tag-team approach kept everyone moving forward and made sure no one fell behind.
 
 We tied the workshop back to lessons from my [earlier talk at a16z](/blog/a16z-sf-dec-2023-ai-apps-production) about taking prototypes to production. This time, it was all coded live in TypeScript with the Mastra.ai SDK.
 
-
 <Image src={aieFisheye} alt="Workshop room fisheye view" />
 
-By the end, almost every attendee succeeded in getting the finished agent running. The energy in the room was incredible, and we were fired up by how many developers were brainstorming ways to use Mastra.ai in their own workflows. We can't wait to run more of these sessions in the future. If you want to follow along yourself, head to the [mastra-agents-meme-generator](https://github.com/workos/mastra-agents-meme-generator) repo.
+By the end, almost every attendee succeeded in getting the finished agent running. The energy in the room was incredible, and we were fired up by how many developers were brainstorming ways to use Mastra.ai in their own workflows.
+
+## Glowing Feedback from Attendees
+
+The response from workshop attendees was overwhelmingly positive. Here's what engineers said about the experience:
+
+<div className="grid grid-cols-1 md:grid-cols-2 gap-6 my-8">
+  <Image src={feedback1} alt="Workshop feedback highlighting practical learning" className="rounded-lg shadow-lg" />
+  <Image src={feedback2} alt="Workshop feedback praising hands-on approach" className="rounded-lg shadow-lg" />
+</div>
+
+The feedback validated our approach of combining humor with serious technical patterns - attendees appreciated both the engaging format and the practical, production-ready skills they gained.
+
+## Beyond Memes: Enterprise Applications
+
+While our workshop focused on meme generation, the same patterns apply to serious business applications:
+
+### Workflow Types
+
+- **Customer Support**: Multi-step ticket resolution workflows
+- **Data Processing**: ETL pipelines with AI-powered transformations
+- **Content Generation**: Marketing copy, documentation, reports
+- **Business Logic**: Complex approval and routing processes
+
+---
+
+## Interested in AI Workshops for Your Team?
+
+Want to bring hands-on AI training to your organization? I provide workshops and training sessions on building production AI workflows, agentic systems, and practical machine learning implementations.
+
+<section className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl p-8 text-center">
+  <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">Looking for Technical Training?</h2>
+  <p className="text-gray-600 dark:text-gray-300 mb-6 max-w-2xl mx-auto">
+    I'm available for corporate workshops, conference talks, and team training sessions on AI engineering, workflow automation, and developer tools. From hands-on coding sessions to strategic AI implementation planning.
+  </p>
+  <div className="flex flex-col sm:flex-row gap-4 justify-center">
+    <Link
+      href="/speaking"
+      className="inline-flex items-center justify-center px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-md transition-colors"
+    >
+      View Speaking & Training Services
+    </Link>
+    <Link
+      href="/contact"
+      className="inline-flex items-center justify-center px-6 py-3 bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 text-gray-900 dark:text-white font-semibold rounded-md transition-colors"
+    >
+      Get in Touch
+    </Link>
+  </div>
+</section>
 
-If you want to see more events like this one, check out my <Link href="/speaking">speaking page</Link>.
+We can't wait to run more of these sessions in the future. If you want to follow along with the workshop materials yourself, head to the [mastra-agents-meme-generator](https://github.com/workos/mastra-agents-meme-generator) repo.