Skip to main content

CLI + VS Code Extension Installation

Install Pitch Smith with the VS Code extension for the full visual experience — slide viewer, drag-and-drop plan editor, template catalog, and brand asset manager, all inside VS Code. This guide takes about 10 minutes.

Already installed the CLI plugin?

If you already completed the CLI Only install, skip ahead to Step 3: Install VS Code Extension.

Step 1: Check Prerequisites​

Before installing, make sure you have the following tools ready.

Claude Code CLI​

Pitch Smith runs as a Claude Code plugin, so you need Claude Code CLI v1.0.33 or newer.

claude --version

You should see a version number of 1.0.33 or higher.

Don't have Claude Code yet?

Visit the Claude Code installation guide to install it first, then return here to add the Pitch Smith plugin.

VS Code​

The Pitch Smith extension requires Visual Studio Code. Confirm it is installed:

code --version

You should see a version number (e.g., 1.105.0 or higher).

Node.js (Optional)​

Node.js is not required for core Pitch Smith features (planning, building, and viewing slides). You only need it if you want to export slides to PNG, PDF, or PPTX format.

node --version

If installed, you should see v18.0.0 or higher.

Verify: Prerequisites are met

Run these commands and confirm the output:

claude --version

Expected: A version number 1.0.33 or higher (e.g., 1.0.38).

code --version

Expected: A version number like 1.105.0 or higher.

node --version

Expected (optional): A version number v18.0.0 or higher (e.g., v22.12.0). If you do not plan to export slides to PNG/PDF/PPTX, you can skip this.

If claude is not found, install Claude Code first. If code is not found, install VS Code from code.visualstudio.com.

Step 2: Install the CLI Plugin​

The CLI plugin provides all Pitch Smith commands and workflows. Follow the CLI Only install guide for step-by-step instructions, or run these two commands inside a Claude Code session:

/plugin marketplace add pitchsmith/pitchsmith-marketplace
/plugin install pitchsmith@pitchsmith-marketplace

The first command registers the Pitch Smith marketplace as a plugin source. The second command downloads and installs the plugin, which includes all commands, workflows, templates, and a bundled PDF reader.

Alternative: Install from your terminal — if you prefer to install without starting a Claude Code session first:

claude plugin marketplace add pitchsmith/pitchsmith-marketplace
claude plugin install pitchsmith@pitchsmith-marketplace
Verify: CLI plugin is installed

Check your installed plugins:

/plugin list

Expected: You should see pitchsmith listed among your installed plugins with version 0.1.0 or higher.

Then confirm the smart router is responding:

/pitchsmith

Expected: A welcome message or workspace initialization output. The .slide-builder/ directory should be created in your project root.

Step 3: Install the VS Code Extension​

The VS Code extension adds a visual layer on top of the CLI — a slide viewer panel, plan editor, template catalog, and brand asset browser.

Option A: Install from VS Code Marketplace​

  1. Open VS Code
  2. Open the Extensions sidebar (Ctrl+Shift+X / Cmd+Shift+X)
  3. Search for "Slide Builder" (published by Pitchsmith)
  4. Click Install

Option B: Install via Command Line​

code --install-extension pitchsmith.slide-builder
Which method should I use?

Both methods install the same extension. The marketplace method is easier if you are already in VS Code. The command line method is faster if you prefer working from the terminal.

Verify: VS Code extension is installed

Check that the extension is listed:

code --list-extensions | grep pitchsmith

Expected: pitchsmith.slide-builder appears in the output.

You can also verify from inside VS Code:

  1. Open the Extensions sidebar (Ctrl+Shift+X / Cmd+Shift+X)
  2. Search for "Slide Builder"
  3. The extension should show as installed with an Uninstall button visible

Step 4: Verify Extension is Active​

After installation, the Pitch Smith extension should be active in VS Code. Look for these indicators:

Activity Bar Icon​

A Pitch Smith icon appears in the VS Code Activity Bar (the vertical icon strip on the far left or right). Click it to open the Pitch Smith sidebar.

Welcome Screen​

If this is your first time using Pitch Smith, the sidebar shows a Welcome to PitchSmith screen with a Get Started button. Click it to launch the guided setup process, which creates your workspace and configures your brand. Once setup is complete, the welcome screen automatically dismisses and the full Catalog appears.

After initial setup, the Pitch Smith sidebar contains three main panels:

  • Catalog — Browse your decks, slide templates, and deck templates
  • Viewer — Preview and present your slides with navigation controls
  • Brand Assets — Manage logos, images, and brand files

Status Bar​

The VS Code status bar (bottom of the window) shows the Pitch Smith workspace status when you have a project with a .slide-builder/ directory open.

Verify: Extension is active and showing UI elements
  1. Activity Bar: Look for the Pitch Smith icon in the Activity Bar. Click it to open the sidebar.
  2. Sidebar panels: You should see the Catalog, Viewer, and Brand Assets panels. If your workspace has not been initialized yet, the Catalog panel may show an empty state.
  3. Command Palette: Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P) and type "Pitch Smith". You should see commands like:
    • Pitch Smith: New Deck
    • Pitch Smith: Build Slide
    • Pitch Smith: Build Deck

Expected: The Pitch Smith icon is visible in the Activity Bar, the sidebar opens with panels, and commands appear in the Command Palette.

If the icon does not appear, try reloading the VS Code window (Ctrl+Shift+P / Cmd+Shift+P then type "Reload Window").

These dependencies are optional but recommended for the full Pitch Smith experience.

Puppeteer / Chrome (for PNG, PDF, and PPTX Export)​

Puppeteer enables exporting your slides to PNG, PDF, and PPTX formats. When installed as an npm package, Puppeteer automatically downloads a compatible Chromium binary.

Export without Puppeteer

If you skip this step, all slide planning, building, and HTML viewing features still work. You only need Puppeteer when you want to export slides as image or document files.

# Install Puppeteer (downloads Chromium automatically)
npm install puppeteer

Alternatively, if you prefer to use your own Chrome installation:

brew install --cask google-chrome
Verify: Puppeteer is installed
node -e "require('puppeteer'); console.log('Puppeteer OK')"

Expected: Puppeteer OK printed to the console.

If you see Cannot find module 'puppeteer', run npm install puppeteer and try again.

PDF Reader MCP (for PDF Brand Extraction)​

The pdf-reader MCP server enables extracting brand information from PDF guidelines. It is bundled with the Pitch Smith plugin and starts automatically when the plugin loads — no manual installation is needed.

No action needed

The pdf-reader MCP server is included with the plugin. As long as you have Node.js v18+ installed, it works automatically. You can verify it is running by using the /pitchsmith:setup command with a PDF file as input.

Verify: PDF reader MCP is available

The pdf-reader MCP server starts automatically with the plugin. To confirm it is working:

  1. Run /pitchsmith:setup in Claude Code
  2. When prompted for brand source, provide a PDF file path
  3. The PDF content should be extracted and analyzed

If PDF extraction fails, verify Node.js is installed (node --version should show v18+) and that the plugin is loaded (/plugin list should show pitchsmith).

Step 6: End-to-End Verification​

Verify that the CLI plugin, VS Code extension, and dependencies all work together.

Run a Command and See Results in the Viewer​

  1. Open a project folder in VS Code
  2. Open a Claude Code terminal session in VS Code
  3. Run the smart router:
/pitchsmith
  1. Follow the prompts to plan a short deck (2-3 slides is enough for verification):
/pitchsmith:plan-deck
  1. Build a single slide:
/pitchsmith:build-one
  1. Open the Pitch Smith sidebar (click the Activity Bar icon) and navigate to the Viewer panel to see your built slide
Verify: Full end-to-end pipeline is working

After completing the steps above, verify:

  1. Plan created: A plan YAML file exists in .slide-builder/deck/ or .slide-builder/single/
  2. Slide built: An HTML file was generated in the output/ directory
  3. Viewer showing slide: The Pitch Smith Viewer panel in VS Code displays the rendered slide
  4. Catalog updated: The Catalog panel shows your new deck
ls output/

Expected: A directory for your deck containing HTML slide files.

If all checks pass, your Pitch Smith CLI + VS Code Extension installation is complete and fully functional.

Uninstall​

If you need to remove Pitch Smith, follow these steps in order.

Remove the VS Code Extension​

Option A: From VS Code UI

  1. Open the Extensions sidebar (Ctrl+Shift+X / Cmd+Shift+X)
  2. Search for "Slide Builder"
  3. Click Uninstall
  4. Reload the VS Code window when prompted

Option B: From Command Line

code --uninstall-extension pitchsmith.slide-builder
Verify: Extension is removed
code --list-extensions | grep pitchsmith

Expected: No output (the extension is no longer listed).

Remove the CLI Plugin​

Remove the Pitch Smith plugin from Claude Code. Run this inside a Claude Code session:

/plugin uninstall pitchsmith@pitchsmith-marketplace
Verify: Plugin is removed
/plugin list

Expected: pitchsmith no longer appears in the installed plugins list.

Clean Up Configuration (Optional)​

The .slide-builder/ directory in your project contains your themes, templates, brand assets, and deck plans. Removing it deletes all your Pitch Smith configuration and content for that project.

This action is irreversible

Deleting the .slide-builder/ directory permanently removes your custom themes, templates, brand assets, and deck plans. Make sure you have backed up any work you want to keep before proceeding.

rm -rf .slide-builder/

The output/ directory contains your generated slides (HTML, PNG, PDF files). You can also remove it if you no longer need the exported files:

rm -rf output/
Verify: Configuration is cleaned up
ls .slide-builder/ 2>/dev/null || echo "Directory removed"

Expected: Directory removed printed to the console.

ls output/ 2>/dev/null || echo "Directory removed"

Expected: Directory removed printed to the console (if you chose to remove it).

Next Steps​

  • Follow the VS Code Quickstart to create your first presentation using the visual UI
  • Learn about Brand Setup to customize your theme with your company's identity
  • Explore the Install Overview to compare install paths or add more components