---
title: "CLI"
description: "Add QuiverAI creations to your React project as components."
icon: "terminal"
---

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:

   ```sh
   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:

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

The component takes `width`, `height` and `className` props:

```tsx
<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

```sh
# 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.

```sh
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.