Skip to main content

​
Media Guide — StewAI Docs

How to add screenshots, GIFs, and YouTube videos to the docs site.

​
Folder structure

docs-site/
├── images/
│   ├── screenshots/
│   │   ├── using-stewai/    ← UI screenshots for the "Using StewAI" track
│   │   └── sdk-api/         ← Terminal / code screenshots for the "SDK & API" track
│   └── gifs/                ← Animated GIFs (drag-drop demos, run animations, etc.)

​
File naming convention

Use kebab-case, prefixed by page name: 
quickstart-empty-editor.png
quickstart-token-pill-in-prompt.png
outputs-side-panel-graph-tab.png
schemas-editor-fields.png
TypeFormatMax sizeWhen to use
ScreenshotsWebP or PNG< 200 KBUI captures, static views
GIFsGIF< 2 MBShort interactions (drag-drop, click sequences)
VideosYouTube embedN/ALonger walkthroughs, tutorials
Tip: Use TinyPNG or cwebp to compress before committing.

​
How to embed in MDX pages

<Frame caption="The recipe editor with an empty canvas">
  <img src="/images/screenshots/using-stewai/quickstart-empty-editor.png" alt="Empty recipe editor showing the canvas and Add Step button" />
</Frame>
The <Frame> component adds a border and optional caption. Images are click-to-zoom by default.

​
Without Frame (inline)

![Empty recipe editor](/images/screenshots/using-stewai/quickstart-empty-editor.png)

​
GIFs

<Frame caption="Dragging a token pill into a prompt field">
  <img src="/images/gifs/drag-token-pill.gif" alt="Animated demo of dragging a token pill from the tokens panel into a prompt field" />
</Frame>

​
YouTube videos

<iframe
  className="w-full aspect-video rounded-xl"
  src="https://www.youtube.com/embed/VIDEO_ID"
  title="StewAI Quickstart Tutorial"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>
Important: Use the /embed/ URL format, not the regular watch URL.

​
Sizing and options

<!-- Fixed width -->
<img src="/images/..." alt="..." width="600" />

<!-- Full width with Tailwind -->
<img src="/images/..." alt="..." className="w-full" />

<!-- Disable click-to-zoom -->
<img src="/images/..." alt="..." noZoom />

​
Screenshots needed

Each entry below corresponds to a <Frame> placeholder already in the docs. Drop your screenshot at the listed path — no code changes needed.

​
Quickstart (quickstart.mdx)

#PathWhat to capture
1screenshots/using-stewai/quickstart-empty-editor.pngFresh recipe in the Cookbook — empty canvas with the “Add Step” button visible
2screenshots/using-stewai/quickstart-token-pill-in-prompt.pngAsk AI step’s prompt field with an orange token pill inserted, text around it

​
Core Concepts (using-stewai/core-concepts.mdx)

#PathWhat to capture
3screenshots/using-stewai/core-concepts-connected-steps.pngCanvas with 3-4 connected steps showing arrows between them

​
Outputs (using-stewai/outputs.mdx)

#PathWhat to capture
4screenshots/using-stewai/outputs-side-panel-text.pngSide panel showing a completed Ask AI step with formatted text output
5screenshots/using-stewai/outputs-side-panel-graph-json.pngSide panel showing an AI Chef step result with Graph and JSON tabs visible

​
Tokens and References (using-stewai/tokens-and-references.mdx)

#PathWhat to capture
6screenshots/using-stewai/tokens-panel.pngTokens panel on the right side showing available token pills (orange + green)
7screenshots/using-stewai/token-picker-modal.pngThe Token Picker modal open with searchable list of tokens

​
Building a Workflow (using-stewai/building-a-workflow.mdx)

#PathWhat to capture
8screenshots/using-stewai/building-recipe-input-config.pngRecipe Input step’s settings panel with title and configuration
9screenshots/using-stewai/building-4-step-canvas.pngCanvas showing 4 connected steps: Company Name → Research → Analysis → Export

​
Loops and Conditions (using-stewai/loops-and-conditions.mdx)

#PathWhat to capture
10screenshots/using-stewai/loop-step-canvas.pngLoop step on canvas with inner steps visible (expanded loop body)

​
Schemas (using-stewai/schemas.mdx)

#PathWhat to capture
11screenshots/using-stewai/schema-editor-fields.pngSchema editor with 3-4 fields defined (name, type, description visible)
12screenshots/using-stewai/schema-result-graph-tab.pngSide panel showing a schema result with Graph tab expanded showing field tree

​
Exporting Results (using-stewai/exporting-results.mdx)

#PathWhat to capture
13screenshots/using-stewai/export-table-editor.pngExport Table step editor showing data source selector, format dropdown (xlsx/csv), and Pantry destination picker with folder and filename fields

​
Debugging Failures (using-stewai/debugging-failures.mdx)

#PathWhat to capture
14screenshots/using-stewai/error-callout-failed-step.pngSide panel on a failed step showing the red error callout with title + message

​
GIF ideas (optional, high impact)

PathWhat to capture
gifs/drag-token-pill.gifDragging an orange token pill from tokens panel into a prompt field
gifs/add-step-menu.gifClicking Add Step and browsing the step categories
gifs/run-execution.gifA 3-step run executing: steps turning yellow then green in sequence
gifs/schema-editor-add-field.gifAdding a field in the schema editor visual builder

​
YouTube video ideas (optional)

If you record walkthroughs, embed them at the top of key pages:
  • Introduction — 2-min “What is StewAI?” overview
  • Quickstart — 5-min “Build your first workflow” screencast
  • SDK Quickstart — 3-min “Automate with Python” demo

​
Capturing tips

  1. Browser: Use Chrome at 1280×800 or 1440×900 for consistent sizing
  2. Theme: Capture in light mode (matches the docs default theme)
  3. Tools: macOS: Cmd+Shift+4 (area) or Cmd+Shift+5 (window). Windows: Win+Shift+S
  4. Screen recording → GIF: Use Kap (macOS) or ScreenToGif (Windows)
  5. Compression: Run cwebp -q 85 input.png -o output.webp or use TinyPNG
  6. Crop: Remove browser chrome — capture just the app content area
  7. Sensitive data: Use test/demo data, never real user or org info