# Quickstart (/docs/quickstart)





## Install [#install]

Run the CLI inside an existing Express, NestJS, or Next.js project:

```bash
npx flowlib-cli init
```

The wizard will:

1. Detect your framework and database driver
2. Install `@flowlib/core`, `@flowlib/ui`, and the framework adapter
3. Generate `flowlib.config.ts` and an encryption key
4. Create database schema files and run the initial migration

<Callout type="info">
  Skip prompts with flags: `npx flowlib-cli init --framework express --database sqlite`
</Callout>

## Start the server [#start-the-server]

The CLI installs everything, but you still need to mount the router. Here's the minimal Express setup — the config is imported from the generated `flowlib.config.ts`:

```ts title="index.ts"
import express from 'express';
import { createFlowlibRouter } from '@flowlib/express';
import { flowlibConfig } from './flowlib.config';

const app = express();
app.use(express.json());
app.use('/flowlib', await createFlowlibRouter(flowlibConfig));

app.listen(3000, () => console.log('http://localhost:3000/flowlib'));
```

For NestJS or Next.js mounting patterns, see [Installation](/docs/installation).

## Add the visual editor [#add-the-visual-editor]

The flow editor, execution viewer, and credential manager all live in the `<Flowlib>` React
component. It takes a single `config` prop — the **same** object you passed to the backend, so
import the generated `flowlib.config.ts` on both sides.

With **Express** or **NestJS**, the UI is a separate React app. Install `@flowlib/ui` there:

```bash
pnpm add @flowlib/ui
```

```tsx title="App.tsx"
import { Flowlib } from '@flowlib/ui';
import '@flowlib/ui/styles';
import { flowlibConfig } from '../flowlib.config';

function App() {
  return <Flowlib config={flowlibConfig} />;
}
```

With **Next.js**, mount it in a catch-all client page (dynamic import with `ssr: false` — the
editor uses browser APIs):

```tsx title="app/flowlib/[[...slug]]/page.tsx"
'use client';

import dynamic from 'next/dynamic';
import '@flowlib/ui/styles';
import config from '../../flowlib.config';

const Flowlib = dynamic(() => import('@flowlib/ui').then((m) => ({ default: m.Flowlib })), {
  ssr: false,
});

export default function FlowlibPage() {
  return <Flowlib config={config} />;
}
```

<Callout type="info">
  Plugins go inside `config.plugins` (e.g. `auth()`, `rbac()`). The `@flowlib/user-auth` plugin
  auto-gates the UI with a sign-in screen — no wrapper component needed. See
  [Installation](/docs/installation) for per-framework details.
</Callout>

## Open the dashboard [#open-the-dashboard]

Start your server and frontend, then visit your editor (e.g. `http://localhost:5173` for a Vite
app, or `http://localhost:3000/flowlib` for Next.js). You should see the Flowlib dashboard where
you can create and run flows.

## What's next? [#whats-next]

* [Triggers](/docs/triggers) — Start flows manually, on a schedule, or from webhooks
* [Execution Model](/docs/execution-model) — How flows execute under the hood
* [Plugins](/docs/plugins) — Authentication, RBAC, webhooks, and more
* [Reference](/docs/reference) — Configuration, CLI, and API docs