🎥 Demo Video Script — Personal Finance Visualization Agent

# 🎥 Demo Video Script — Personal Finance Visualization Agent

**Project:** Zypher-based Personal Finance & Goal Feasibility Agent  
**For:** CoreSpeed Technical Assessment  
**Duration:** 3–5 minutes  
**Recording mode:** Terminal + screen capture (no deployment needed)

---

## 📋 Pre-Recording Checklist

- [ ] `.env` file created with valid `ANTHROPIC_API_KEY`
- [ ] `./workspace/transactions.csv` exists (sample data included)
- [ ] Terminal open in project root (`/Users/paramjoshi/Downloads/Param`)
- [ ] Screen recording software ready (QuickTime, OBS, Loom, etc.)
- [ ] Browser ready to open generated HTML charts

---

## 🎬 Scene-by-Scene Demo Script

### **SCENE 1: Introduction (0:00–0:20)**

**Screen:** Face on camera OR title slide

**Narration:**
> "Hi, I'm Param Joshi. This is my submission for CoreSpeed's technical assessment — a Personal Finance Visualization Agent built with Zypher. The agent uses custom tools to parse transactions, auto-categorize spending, and generate interactive visualizations."

**Action:** Smile, speak clearly, show confidence.

---

### **SCENE 2: Project Overview (0:20–0:50)**

**Screen:** VS Code or Finder showing project files

**Narration:**
> "The project has a simple structure: `main.ts` initializes the Zypher agent with Anthropic's Claude model. Under `tools/` I've created four custom tools — `ReadTransactionsTool` parses CSV files, `CategorizationTool` auto-assigns spending categories, `WebSearchTool` looks up cost estimates, and `ChartGeneratorTool` creates HTML visualizations. The agent runs in the terminal and saves outputs to the `workspace/` directory."

**Action:** 
- Briefly show file tree in editor:
  - `main.ts`
  - `tools/TransactionReaderTool.ts`
  - `tools/CategorizationTool.ts`
  - `tools/WebSearchTool.ts`
  - `tools/ChartGeneratorTool.ts`
  - `workspace/transactions.csv`

---

### **SCENE 3: Quick Code Walkthrough (0:50–1:30)**

**Screen:** Open `main.ts` in editor

**Narration:**
> "Here's `main.ts` — it creates a `ZypherAgent` with the Anthropic provider, registers our four custom tools via the MCP server manager, then starts an interactive terminal session using `runAgentInTerminal`. Zypher handles all the agent orchestration — tool routing, context management, and LLM interactions."

**Action:** Scroll through `main.ts` highlighting:
- Line ~38: `new ZypherAgent(new AnthropicModelProvider({...}))`
- Lines ~45–48: `mcpServerManager.registerTool(...)` for each tool
- Line ~80: `await runAgentInTerminal(agent, "claude-sonnet-4-20250514")`

**Screen:** Open `tools/TransactionReaderTool.ts`

**Narration:**
> "Each tool is defined using Zypher's `defineTool` function with Zod schemas for input validation. This one reads CSV files, auto-detects columns like Date, Description, Amount, and Category, then returns structured transaction data with summaries."

**Action:** Show:
- Line ~25: `export const ReadTransactionsTool = defineTool({`
- Line ~27: `description: "Read and parse transactions from a CSV file..."`
- Lines ~60–90: The parsing loop

**Screen:** Briefly show `tools/ChartGeneratorTool.ts`

**Narration:**
> "The chart generator creates standalone HTML files with SVG graphics — no external dependencies. It supports pie charts, line graphs, gauges, and comparison charts."

**Action:** Show the `createSpendingPieChartHTML` function briefly.

---

### **SCENE 4: Start the Agent (1:30–1:50)**

**Screen:** Terminal in project root

**Narration:**
> "Now let's see it in action. I'll start the agent with `deno task start`."

**Action:** Type and run:
```bash
deno task start
```

**Expected Output:**
```
🚀 Initializing Personal Finance & Goal Feasibility Agent...
📁 Workspace directory: ./workspace
🔧 Registering custom finance tools...
✅ Registered custom tools:
   - read_transactions
   - categorize_transactions
   - web_search
   - generate_chart

📊 Total tools available: 4

============================================================
Personal Finance Visualization Agent
============================================================

This agent helps you visualize your finances and spending patterns.
...
🔧 Enter your task:
```

**Narration:**
> "The agent initializes, registers our four tools, and starts the interactive terminal."

---

### **SCENE 5: Demo 1 — Parse & Analyze Transactions (1:50–2:30)**

**Screen:** Terminal (agent prompt visible)

**Narration:**
> "First, I'll ask the agent to parse my transaction file and show me spending by category."

**Action:** Type at the prompt:
```
Read my transactions from ./workspace/transactions.csv and show me spending by category
```

**Expected Agent Response:**
```
🚀 Starting task execution...

[Agent uses read_transactions tool]

✅ I've analyzed your transactions from January to April 2024.

Here's your spending breakdown by category:

1. Housing: $4,800.00 (51.2%)
2. Shopping: $1,013.43 (10.8%)
3. Utilities: $978.98 (10.5%)
4. Food & Dining: $587.50 (6.3%)
5. Insurance: $560.00 (6.0%)
...

Total transactions: 104
Total expenses: $9,367.53
Total income: $14,000.00
Net cash flow: +$4,632.47
```

**Narration:**
> "The agent called the `read_transactions` tool, parsed the CSV, and gave me a detailed breakdown. Housing is my biggest expense at 51%."

---

### **SCENE 6: Demo 2 — Generate Spending Pie Chart (2:30–3:10)**

**Screen:** Terminal

**Narration:**
> "Now I'll ask it to create a visual spending pie chart."

**Action:** Type:
```
Create a spending pie chart showing my top 5 spending categories and save it to ./workspace/spending_pie.html
```

**Expected Agent Response:**
```
🚀 Starting task execution...

[Agent uses generate_chart tool]

✅ I've created your spending pie chart!

📊 File: ./workspace/spending_pie.html
💰 Total spending visualized: $7,940.41

Categories shown:
- Housing: $4,800 (60.5%)
- Shopping: $1,013 (12.8%)
- Utilities: $979 (12.3%)
- Food & Dining: $588 (7.4%)
- Insurance: $560 (7.1%)

Open the HTML file in your browser to view the interactive chart!
```

**Narration:**
> "Perfect! The agent generated the HTML chart. Let me open it."

**Action:** 
- Open `./workspace/spending_pie.html` in browser (double-click or drag to browser)
- Show the rendered pie chart with legend
- Hover over slices to show interactivity (if implemented)

**Narration:**
> "Here's the interactive chart — a clean SVG pie with category breakdown and totals. No external dependencies, just pure HTML and SVG."

---

### **SCENE 7: Demo 3 — Savings Projection (3:10–3:40)**

**Screen:** Terminal

**Narration:**
> "Let's generate a savings projection chart."

**Action:** Type:
```
Show me a savings projection if I save $500 per month for 12 months. Save it to ./workspace/savings_projection.html
```

**Expected Agent Response:**
```
🚀 Starting task execution...

[Agent uses generate_chart tool]

✅ Savings projection chart created!

📈 File: ./workspace/savings_projection.html
🎯 Monthly target: $500
📅 Projection period: 12 months
💰 Total projected savings: $6,000

The chart shows your month-by-month progress with target vs projected values.
```

**Action:** 
- Open `./workspace/savings_projection.html` in browser
- Show the line graph with target and projected savings

**Narration:**
> "Beautiful — a line graph showing monthly progression toward my $6,000 savings goal."

---

### **SCENE 8: Wrap-Up & Architecture (3:40–4:00)**

**Screen:** Back to terminal (agent still running) or VS Code

**Narration:**
> "That's the core demo. The design is simple and extensible — each tool has one job, is easily testable, and integrates cleanly with Zypher's MCP framework. To extend this, I could add more chart types, integrate real-time financial APIs, or add ML-based categorization."

**Action:** Show `README.md` or `QUICKSTART.md` in editor

**Narration:**
> "The README has full documentation, and the repo includes sample data and examples. Thanks for watching — I'm happy to walk through any part in detail or answer questions about the implementation."

**Action:** Type `quit` or `exit` in terminal to cleanly exit the agent.

---

## 📝 Voiceover Script (Compact Version)

If you prefer a concise read-through without pauses:

> "Hi, I'm Param Joshi. This is my Zypher-based Personal Finance Agent for CoreSpeed's assessment. The agent uses four custom tools: read transactions, categorize spending, web search, and generate charts. I'll demo it now.
>
> Here's the code — `main.ts` initializes a Zypher agent with Anthropic, registers our tools via MCP, and runs an interactive terminal. Each tool is defined with Zod schemas for validation.
>
> Starting the agent... It loads and registers all four tools. Now I'll ask it to parse my CSV. [Type prompt] The agent reads the file and shows spending by category. Housing is 51% of my expenses.
>
> Next, I'll generate a pie chart. [Type prompt] Done — it created an HTML file. Here's the chart in my browser, showing a clean breakdown with SVG graphics.
>
> Finally, a savings projection. [Type prompt] Perfect — a line graph showing monthly progress toward a $6,000 goal.
>
> That's the demo. The tools are composable, testable, and integrate seamlessly with Zypher. Thanks!"

---

## 🎯 Key Points to Emphasize

1. **Zypher Integration**
   - "Built with Zypher framework from CoreSpeed"
   - "Uses MCP (Model Context Protocol) for tool registration"
   - "Anthropic Claude Sonnet 4 as the LLM"

2. **Custom Tools**
   - "Four purpose-built tools: parse, categorize, search, visualize"
   - "Defined with Zod schemas for type safety"
   - "Each tool has a single, clear responsibility"

3. **Real Output**
   - "Generates standalone HTML visualizations"
   - "No external chart libraries — pure SVG"
   - "Saves to local workspace directory"

4. **Extensibility**
   - "Easy to add more chart types or data sources"
   - "Could integrate real APIs (Plaid, bank APIs, etc.)"
   - "ML categorization could replace pattern matching"

---

## 🛠️ Terminal Commands Reference

**Start the agent:**
```bash
deno task start
```

**Sample prompts to use:**

1. **Parse transactions:**
```
Read my transactions from ./workspace/transactions.csv and show me spending by category
```

2. **Create pie chart:**
```
Create a spending pie chart for my top 5 categories and save it to ./workspace/spending_pie.html
```

3. **Savings projection:**
```
Show me a savings projection if I save $500/month for 12 months. Save to ./workspace/savings_projection.html
```

4. **Risk gauge:**
```
Create a success probability gauge showing 75% and save to ./workspace/risk_gauge.html
```

5. **Exit:**
```
quit
```

---

## 🎥 Recording Tips

### Before Recording
- Close unnecessary windows/tabs
- Use full-screen terminal or increase font size (`Cmd +` on Mac)
- Test all commands to ensure they work
- Have browser ready to quickly open HTML files

### During Recording
- Speak clearly and at a moderate pace
- Don't rush — pauses are fine and can be edited out
- If you make a mistake, just pause and restart that section
- Show genuine excitement about the project!

### After Recording
- Trim intro/outro if needed
- Add title cards (optional): "Personal Finance Agent | Built with Zypher"
- Check audio levels
- Export at 1080p (HD) minimum

### Recommended Tools
- **Mac:** QuickTime Screen Recording (free, built-in)
- **Windows:** OBS Studio (free)
- **Cross-platform:** Loom (easy, cloud-hosted)
- **Professional:** Camtasia, ScreenFlow

---

## 📤 Submission Checklist

- [ ] Demo video recorded (3–5 minutes)
- [ ] Video uploaded (YouTube unlisted, Loom, Google Drive, etc.)
- [ ] GitHub repo is public
- [ ] README.md has clear run instructions
- [ ] .env.example file included (without real API key)
- [ ] All code committed and pushed
- [ ] Video link added to submission email/form

---

## 🚀 Optional: Going Above & Beyond

If you have extra time before Monday, consider:

1. **Add a simple test:**
   ```bash
   deno test --allow-read --allow-write
   ```

2. **Add more chart examples in README**

3. **Record a 30-second "Quick Demo" clip** showing just one chart generation (for social media)

4. **Add a GitHub Actions workflow** (optional — shows DevOps skills)

5. **Deploy to Deno Deploy** (optional — but Milton said demo video is primary deliverable)

---

## ❓ FAQ

**Q: Do I need to deploy this?**  
A: No! The assignment says "No need to deploy — the demo video is the primary deliverable."

**Q: How long should the video be?**  
A: 3–5 minutes is ideal. Milton's example was ~1 minute, but showing more features is fine.

**Q: Should I show my face?**  
A: Optional! A quick intro helps build rapport, but screen + voiceover is fine too.

**Q: What if I hit an error during recording?**  
A: Pause, fix it, and restart that section. Or edit it out post-recording.

**Q: Can I use the sample data?**  
A: Yes! The `workspace/transactions.csv` is perfect for the demo.

---

## 📧 Sample Submission Email

```
Subject: CoreSpeed Technical Assessment - Param Joshi

Hi Noah,

I've completed the technical assessment for the CoreSpeed position. Here are my deliverables:

🎥 Demo Video: [YouTube/Loom link]
📂 GitHub Repo: https://github.com/paramjoshi/zypher-finance-agent (public)
📋 Run Instructions: See README.md in the repo

Project Summary:
- Built a Personal Finance Visualization Agent using Zypher
- Four custom MCP tools: transaction parsing, categorization, web search, chart generation
- Generates interactive HTML visualizations (pie charts, projections, gauges)
- Runs in terminal with Anthropic Claude Sonnet 4

The demo video shows:
1. Agent initialization and tool registration
2. Parsing CSV transactions and analyzing spending
3. Generating multiple chart types
4. Opening visualizations in browser

Let me know if you need anything else or have questions about the implementation!

Best,
Param Joshi
```

---

**Good luck with your recording! You've got a solid project — just show it confidently and you'll do great! 🚀**