Quickstart

Set up with an agent

Give your agent this prompt:

Set up Odori in this folder and make a launch video from it. The guide is at odori.dev/start.md.

The setup instructions cover product style import, template selection, source installation, and verification. To keep them available across agent sessions, install the quickstart skill:

npx skills add allenzhou101/odori --skill odori-quickstart --yes

The guide inspects your repository for product style, then helps you choose a template and describe the video. You can provide another style source or keep the template defaults. Choose a variation and copy Use template to include that choice in your prompt.

Set up manually

Create a project and install its dependencies:

pnpm create odori@latest product-stories
cd product-stories
pnpm install

Choose a template, then install the example you watched:

pnpm odori add template agent-launch
node videos/agent-launch/select-variation.mjs racing
pnpm odori dev

Studio opens the installed video. Read videos/agent-launch/ADAPTATION.md, edit selected-input.ts, and use schema.ts for content limits. The installed React source remains yours to edit. The default example and its variations share one composition, including its camera moves and timing.

Use pnpm odori catalog templates --json to see stable IDs and available variations. Skip the selector to keep the original example. Reference-based templates retain their sample UI and marks; read their adaptation scope before choosing one for a different product.

pnpm odori test agent-launch
pnpm odori export agent-launch

Author from scratch

For a blank composition, run pnpm odori new launch and install the components you need. The example below is a manual authoring option; template-first setup starts with the finished composition above.

Generated project

In a standalone video project, Odori creates only the video-facing source. In a Next.js project, app/ and videos/ remain siblings: routes are web entry points; videos are render entry points.

Your first video

Replace videos/launch/video.tsx with two scenes:

import {Scene, Video, defineVideoMetadata} from "odori";
import {EndCard} from "../components/end-card/end-card";
import {TitleReveal} from "../components/title-reveal/title-reveal";
import {productLayout} from "../layout";

export const metadata = defineVideoMetadata({
  title: "Hello, odori",
  layout: productLayout,
  duration: "8s",
});

export default function LaunchVideo() {
  return (
    <Video>
      <Scene duration="5s">
        <TitleReveal title="Introducing our new editor" />
      </Scene>
      <Scene duration="3s">
        <EndCard title="Available today" />
      </Scene>
    </Video>
  );
}

Core commands

inspect, frame, test, and export accept --input to supply video inputs. frame and export accept --output <path>. Run odori <command> --help for one command's usage, and odori --version when reporting a bug.

Videos in CI

Add these steps to your continuous integration (CI) workflow after setting up Node.js and pnpm. odori doctor checks render dependencies; odori test --json emits one object per check.

- run: pnpm install --frozen-lockfile
- uses: actions/cache@v4
  with:
    path: ~/.cache/odori
    key: odori-binaries-${{ runner.os }}
- run: pnpm odori install
- run: pnpm odori doctor
- run: pnpm odori test --json
- run: pnpm odori export launch --output out/launch.mp4
- uses: actions/upload-artifact@v4
  with:
    name: launch
    path: out/launch.mp4

:::tip Preview changes in Studio while editing. Export when you need a video file. :::

Continue building

Choose the guide for your next task:

• Sequence scenes and animate elements with a deterministic frame clock.
• Write reusable components and give them Studio previews.
• Add validated inputs to render content variants.
• Test and review a video before exporting it.
• Choose an export format and retry interrupted jobs.
• Troubleshoot your project when discovery or rendering fails.