codex-slides-ai-presentation

# Codex Slides AI Presentation > Skill by [ara.so](https://ara.so) — Codex Skills collection. ## What is Codex Slides? **Codex Slides** is an open-source AI slide studio that runs inside Codex. It transforms prompts, repos, or files into production-ready presentations with: - **⚡ Fast parallel rendering** — 10+ slides in ~4–5 minutes - **118 visual systems** — 45 deck templates + 73 community styles - **24 guided scenarios** — research, data stories, redesign, localization - **Full visibility** — watch research → outline → style → render → edit → export - **Production export** — PPTX and PDF with speaker notes - **Zero extra API keys** — runs on your existing `codex login` - **Browser-first workflow** — every step visible and steerable Think of it as the **open-source, agent-native alternative to Gamma and Tome**. ## Installation ### Quick Install ```bash # Install from Codex Plugin Marketplace codex plugin marketplace add nexu-io/codex-slides codex plugin add codex-slides@codex-slides ``` ### Verify Installation ```bash # List installed plugins codex plugin list # Check MCP tools are available codex mcp list ``` You should see **38 MCP tools** registered for `codex-slides`. ## Core Workflow ### 1. Open Codex Slides in Browser Always start by opening the Codex Slides UI in the **Codex Browser**: ```text Open Codex Slides in the Codex Browser and keep it visible. ``` This ensures you can see and approve each step: questions, outline, visual direction, and rendering. ### 2. Basic Deck Creation ```text Create a 12-slide market deck about 2026 humanoid robotics. Let me confirm the questions, outline, and visual direction before rendering. ``` **What happens:** 1. Opens a new durable project 2. Shows clarification questions (audience, language, aspect ratio, etc.) 3. Generates outline → you review/edit 4. Suggests visual directions → you choose 5. Renders slides progressively or in parallel 6. Opens editor for refinement ### 3. Generate from Files ```text Open Codex Slides and create a 10-slide investor deck from the files in ./pitch-materials/ Use the Corporate template and 16:9 aspect ratio. ``` Codex Slides can read: - **Markdown** — research notes, briefs, outlines - **JSON/YAML** — structured data, configs - **Code** — repos, architecture docs - **PDFs** — existing presentations, reports - **Images** — logos, charts, screenshots ### 4. Fast Mode (Parallel Rendering) ```text Create a 15-slide training deck about TypeScript best practices. Use fast mode to render all slides in parallel. Set aspect ratio to 16:9 and resolution to 2K. ``` **Fast mode:** - Renders **all slides simultaneously** (not one-by-one) - Queues overflow if engine limits hit - Locks outline and visual direction upfront - Dramatically faster for 10+ slide decks ## MCP Tools Reference Codex Slides exposes **38 MCP tools** for agent control. Key tools: ### Project Management ```typescript // Create a new project create_project({ name: "Q4 Product Launch", description: "Internal stakeholder deck", aspect_ratio: "16:9", language: "en" }) // Open existing project open_project({ project_id: "proj_abc123" }) // List all projects list_projects({ limit: 20, offset: 0 }) ``` ### Outline Control ```typescript // Generate outline from prompt generate_outline({ project_id: "proj_abc123", topic: "Cloud migration strategy", slide_count: 10, audience: "Engineering leadership" }) // Edit outline update_outline({ project_id: "proj_abc123", outline: { slides: [ { title: "Current State", talking_points: ["Legacy on-prem", "Cost analysis"] }, { title: "Migration Plan", talking_points: ["Phase 1: Lift & shift", "Phase 2: Refactor"] } ] } }) ``` ### Visual Direction ```typescript // Get style recommendations get_style_recommendations({ project_id: "proj_abc123", topic: "Product roadmap 2026" }) // Apply a style apply_style({ project_id: "proj_abc123", style_id: "corporate-blue" // or community style like "infographic-modern" }) ``` ### Slide Generation ```typescript // Render all slides (fast mode) render_all_slides({ project_id: "proj_abc123", mode: "parallel", // or "sequential" resolution: "2K" // "1K" | "2K" | "4K" }) // Render single slide render_slide({ project_id: "proj_abc123", slide_index: 3, resolution: "2K" }) ``` ### Editing ```typescript // Add a slide add_slide({ project_id: "proj_abc123", position: 5, title: "Next Steps", talking_points: ["Q1 milestones", "Resource requirements"] }) // Reorder slides reorder_slides({ project_id: "proj_abc123", from_index: 3, to_index: 1 }) // Update speaker notes update_speaker_notes({ project_id: "proj_abc123", slide_index: 2, notes: "Emphasize cost savings vs. legacy system" }) ``` ### Export ```typescript // Export to PowerPoint export_pptx({ project_id: "proj_abc123", include_speaker_notes: true }) // Export to PDF export_pdf({ project_id: "proj_abc123", include_speaker_notes: false, quality: "high" // "standard" | "high" | "print" }) ``` ## Common Patterns ### Pattern 1: Research-Based Deck ```text Open Codex Slides and create a research-backed deck about quantum computing advances. 1. Run multi-round web research on recent quantum breakthroughs 2. Generate a 12-slide outline based on the research 3. Use the "Technology Report" template 4. Set aspect ratio to 16:9 and resolution to 2K 5. Let me review the outline before rendering 6. Save the research brief in Design Files ``` ### Pattern 2: Source-to-Slides Workflow ```text Open Codex Slides in the Browser. Create a 8-slide deck from the following sources: - ./docs/architecture.md - ./README.md - ./benchmarks/performance.json Target audience: technical investors Visual direction: Corporate Modern Aspect ratio: 16:9 Include code snippets where relevant. ``` ### Pattern 3: Redesign Existing Deck ```text Open Codex Slides and import ./old-pitch.pptx Tasks: 1. Extract the outline and speaker notes 2. Apply the "Startup Pitch" template 3. Update visual direction to "Bold Gradient" 4. Re-render all slides in 4K resolution 5. Export as PPTX with original notes preserved ``` ### Pattern 4: Multi-Language Localization ```text Open the existing "Product Launch" project in Codex Slides. Create localized versions: 1. Duplicate the project 3 times 2. Translate outline and notes to: Japanese, Spanish, German 3. Keep the same visual direction and layout 4. Render all versions in parallel (fast mode) 5. Export each as separate PPTX files ``` ### Pattern 5: Data Visualization Deck ```text Open Codex Slides and create a data story from ./sales-data.json Requirements: - 10 slides focusing on Q4 performance - Use the "Dashboard Infographic" style - Aspect ratio: 16:9 - Include charts, trend lines, and KPI callouts - Target audience: board members - Add speaker notes explaining each metric ``` ## Configuration ### Project Settings Projects are stored in `~/.codex-slides/projects/` (or configured path): ```typescript // .codex-slides/config.json { "projects_path": "~/Documents/CodexSlides", "default_aspect_ratio": "16:9", "default_resolution": "2K", "default_language": "en", "parallel_render_limit": 5, "design_files_auto_sync": true } ``` ### Environment Variables ```bash # Optional: Override default paths export CODEX_SLIDES_PROJECTS_DIR="$HOME/my-presentations" export CODEX_SLIDES_CACHE_DIR="$HOME/.cache/codex-slides" # Optional: Rendering preferences export CODEX_SLIDES_DEFAULT_RESOLUTION="4K" export CODEX_SLIDES_PARALLEL_LIMIT="8" ``` ### Aspect Ratios Available aspect ratios: - `16:9` — Standard widescreen (default) - `4:3` — Classic presentation - `1:1` — Square (social media) - `9:16` — Vertical (mobile, stories) - `3:4` — Portrait ### Resolution Options - `1K` — Fast preview (1024px) - `2K` — Balanced quality (2048px, recommended) - `4K` — Print-ready (4096px) ## Visual Systems ### 45 Deck Templates Organized by category: **Business:** - Corporate Modern - Startup Pitch - Investor Deck - Quarterly Business Review **Technical:** - Developer Documentation - API Reference - Architecture Overview - Technical Training **Creative:** - Brand Guidelines - Portfolio Showcase - Case Study - Campaign Presentation **Education:** - Academic Lecture - Workshop Materials - Training Course - Research Findings **Data:** - Analytics Report - Dashboard Summary - Data Story - Performance Review ### 73 Community Styles Grouped by visual approach: - **Reports** (8 styles) — clean, structured, text-focused - **Infographics** (9 styles) — visual data, icons, callouts - **Diagrams** (6 styles) — flowcharts, systems, processes - **Data & Maps** (7 styles) — charts, geography, metrics - **Dashboards** (5 styles) — KPIs, real-time, grids - **Posters** (8 styles) — bold, event-focused, single-page - **Product** (6 styles) — feature showcases, UI mockups - **Brand** (7 styles) — identity, guidelines, mood boards - **Architecture** (5 styles) — buildings, blueprints, renders - **Photography** (6 styles) — image-first, minimal text - **Editorial** (4 styles) — magazine, longform, narrative - **Illustration** (2 styles) — custom graphics, hand-drawn ## Code Examples ### TypeScript: Programmatic Deck Creation ```typescript import { CodexSlidesClient } from '@codex-slides/sdk'; async function createProductDeck() { const client = new CodexSlidesClient({ projectsDir: process.env.CODEX_SLIDES_PROJECTS_DIR || '~/.codex-slides/projects' }); // Create project const project = await client.createProject({ name: 'Product Roadmap 2026', description: 'Engineering team quarterly planning', aspectRatio: '16:9', language: 'en' }); // Generate outline const outline = await client.generateOutline({ projectId: project.id, topic: 'Q1-Q4 feature roadmap with dependencies', slideCount: 12, audience: 'Engineering and product teams', sources: ['./roadmap.md', './jira-export.json'] }); // Apply visual style await client.applyStyle({ projectId: project.id, styleId: 'corporate-blue' }); // Render in parallel (fast mode) await client.renderAllSlides({ projectId: project.id, mode: 'parallel', resolution: '2K' }); // Export const pptxPath = await client.exportPPTX({ projectId: project.id, includeSpeakerNotes: true }); console.log(`Deck created: ${pptxPath}`); } ``` ### TypeScript: Batch Processing ```typescript import { CodexSlidesClient } from '@codex-slides/sdk'; import fs from 'fs/promises'; async function generateWeeklyReports() { const client = new CodexSlidesClient(); const teams = ['Engineering', 'Product', 'Design', 'Marketing']; for (const team of teams) { const dataFile = `./reports/${team.toLowerCase()}-metrics.json`; const data = JSON.parse(await fs.readFile(dataFile, 'utf-8')); const project = await client.createProject({ name: `${team} Weekly Report`, aspectRatio: '16:9', language: 'en' }); await client.generateOutline({ projectId: project.id, topic: `${team} KPIs and highlights for week of ${data.weekOf}`, slideCount: 6, audience: 'Leadership team', sources: [dataFile] }); await client.applyStyle({ projectId: project.id, styleId: 'dashboard-modern' }); await client.renderAllSlides({ projectId: project.id, mode: 'parallel', resolution: '2K' }); await client.exportPDF({ projectId: project.id, quality: 'high' }); } } ``` ### TypeScript: Custom Research Pipeline ```typescript import { CodexSlidesClient } from '@codex-slides/sdk'; async function researchDeck(topic: string, depth: 'shallow' | 'deep') { const client = new CodexSlidesClient(); const project = await client.createProject({ name: `Research: ${topic}`,