Skip to content
Esc
↑↓navigate↵open⌘Jpreview
On this page

CLI

Add QuiverAI creations to your React project as components.

The QuiverAI CLI turns a creation into a React component in your project. It writes one .tsx or .jsx file that exports a self-contained component, and edits no other file.

It needs Node.js 22.12 or later. There is nothing to install: run it with npx.

Add a creation from the app

  1. Open the creation in the QuiverAI app and choose Export.

  2. Select Export as component. The app copies a command like this one:

    npx quiverai add "https://app.quiver.ai/creations/<creation-id>?version=<version-id>"

  3. Run it in your project folder. The first time, the CLI opens your browser to sign in.

The CLI prints the file it wrote and the line to import it:

Added FoxLogo to src/components/quiverai/fox-logo.tsx
import { FoxLogo } from "@/components/quiverai/fox-logo";

The component takes width, height and className props:

<FoxLogo width={32} height={32} />

The command pins the version you exported, so running it again later adds the same artwork even after you keep editing the creation.

Other things you can add

# A creation by id, with your own component name
npx quiverai add <creation-id> --name logo

# The newest creation in a Chat
npx quiverai add https://app.quiver.ai/chat/<chat-id> --latest

# A public share link (no sign-in)
npx quiverai add https://app.quiver.ai/share/<share-id>

# Any SVG file on the web (no sign-in)
npx quiverai add https://example.com/logo.svg --name logo

Where the file goes

The CLI uses the first of these that applies:

  1. --path <dir|file>.
  2. "quiverai": { "dir": "<path>" } in your package.json.
  3. The components alias in components.json (shadcn projects), in a quiverai/ folder.
  4. src/components/quiverai/ if src/ exists.
  5. components/quiverai/.

The file is .tsx when the project uses TypeScript and .jsx otherwise. In a monorepo, run the command in the app’s folder or pass --cwd ./apps/web.

Without --name, the component is named after the creation’s file name, or the SVG URL’s file name: fox-logo.svg becomes FoxLogo in fox-logo.tsx. In a terminal, the CLI asks for the name with that suggestion filled in.

The CLI never replaces a file silently. If the file exists with different content, it asks first; outside a terminal, pass --overwrite.

Options

Option Description
--name <name> Component name, in any case (fox logo, fox-logo, FoxLogo).
--latest For a Chat link, add the newest creation without asking.
--path <dir|file> Write to this folder or file.
--cwd <dir> Project folder. Defaults to the current folder.
-o, --overwrite Replace an existing file with different content.
--yes Skip prompts: use the suggested name and replace a changed file.
--dry-run Show what would be written, without writing.

Sign in

Creation and Chat links need your QuiverAI account. Share links and SVG URLs do not.

npx quiverai login    # sign in through your browser
npx quiverai whoami   # show the signed-in account
npx quiverai logout   # sign out

On a machine without a browser, such as over SSH, press H at the sign-in prompt. Open the link on any device, approve, then paste the URL your browser lands on.

The CLI keeps your credentials in your OS keychain when one is available, and otherwise in a file only your user can read.

Good to know

  • SVG files are checked before conversion. A file with scripts, event handlers, foreignObject, external references or data: URLs is refused, not changed.
  • Output goes to stdout, and prompts and errors go to stderr. The exit code is 1 on any error.
  • Behind a proxy, set NODE_USE_ENV_PROXY=1 together with HTTPS_PROXY.
  • Run npx quiverai --help for every command and option.

Was this page helpful?