Automatic PPT Generator Agent (MCP + VS Code)

A beginner-friendly, end-to-end project that builds:

• An MCP server (Model Context Protocol) that can generate PowerPoint files

• A Node.js API backend

• A professional, interactive web UI

• Dynamic slide content that changes on every generation

What You Will Build

• MCP server: exposes a generate_ppt tool

• Backend API: validates requests, calls generation pipeline, serves generated files

• Presentation engine: creates slide deck structure, design themes, and content variants

• Interactive UI: enter topic, audience, tone, style, and generate/download PPT

Related MCP server: PPTX MCP Server

1) Prerequisites

Install these first:

1. Node.js 20+ (recommended LTS)

2. VS Code

3. npm (comes with Node.js)

4. Groq API key for AI-generated content

5. Internet access for live data lookup

Check versions in terminal:

node -v
npm -v

2) Project Setup

From this project folder:

npm install
npm run dev

The app starts at:

• UI: http://localhost:5173

• API: http://localhost:8787

3) Environment Variables

Copy .env.example to .env and update values:

Copy-Item .env.example .env

Important variables:

• PORT: backend port

• VITE_API_BASE_URL: frontend API URL

• PPT_PROVIDER: set to groq

• GROQ_API_KEY: optional, required only when using Groq

• GROQ_MODEL: optional, default is llama-3.1-70b-versatile

Set GROQ_API_KEY in .env to enable AI-written slide content. The deck content is built from live web data first, using Wikipedia + GDELT signals, and then shaped into slides by Groq.

In MCP config, set the same Groq variables under env.

Security note: if a real key was ever pasted into a shared/example file, rotate it in your provider dashboard and replace it with a placeholder.

4) How Dynamic Content Works

Every generation changes because the app combines:

1. Live topic lookup from Wikipedia and current news signals

2. Topic-family slide blueprints that change by subject area

3. Variable slide structures and slide kinds

4. Rotating content angles and examples

5. Timestamp/seed-based variation

6. Groq-generated slide copy on top of live data

This ensures different wording and structure each run, while also grounding the output in current information.

5) How MCP Fits In

This project includes a local MCP server:

• File: mcp/server.js

• Tool exposed: generate_ppt

You can connect this MCP server from compatible MCP clients (including VS Code flows) so agent workflows can trigger PPT generation.

MCP Tool Input

{
  "topic": "AI in Healthcare",
  "audience": "college students",
  "tone": "engaging",
  "slides": 8,
  "theme": "corporate"
}

MCP Tool Output

{
  "ok": true,
  "fileName": "ai-in-healthcare-2026-06-19T10-00-00-000Z.pptx",
  "downloadUrl": "/generated/ai-in-healthcare-2026-06-19T10-00-00-000Z.pptx"
}

6) Beginner-Friendly Workflow in VS Code

1. Open this folder in VS Code.

2. Open terminal.

3. Run npm install.

4. Run npm run dev.

5. Open http://localhost:5173.

6. Enter topic and options.

7. Click Generate PPT.

8. Download the file.

7) Production Build

npm run build
npm run start

8) Extend the Agent

Ideas:

1. Add charts from real data sources

2. Add image search integration

3. Add brand kit upload (logo/colors/fonts)

4. Add multilingual slide generation

5. Add speaker notes auto-generation

9) Troubleshooting

Error: Cannot find module

Run:

npm install

UI opens but generate fails

• Check backend running on 8787

• Check .env values

• Check terminal logs

LLM not used

• Set GROQ_API_KEY in .env

• Restart npm run dev

10) File Structure

See project layout in this repository:

• src/server/ backend + generation pipeline

• src/client/ modern interactive frontend

• mcp/ MCP server entrypoint

• generated/ exported PowerPoint files

You can now use this as a foundation to build a strong custom PPT generation agent.