Quickstart
Get Dyrected running and choose your backend, admin location, and update model clearly.
Use this page to get to a working Dyrected setup quickly. Pick the path that matches where you want the backend to run, then follow one branch from start to finish.
Prerequisites
Before you start, ensure you have:
- Node.js 22+ installed
- A package manager (pnpm recommended, or
npm/yarn/bun) - Basic familiarity with your chosen framework (Next.js or Nuxt.js)
Pick one path:
- Cloud backend if you want the fastest setup and the least infrastructure
- Self-hosted Next.js if you want Dyrected running inside a Next.js App Router app
- Self-hosted Nuxt.js if you want Dyrected running inside a Nuxt 3 app
Cloud Backend
Use this path when you want the shortest route to a live CMS. Dyrected hosts the content API, database, storage, and auth. When you finish, you will have a connected Dyrected site and at least one real content edit flowing into your app.
Prerequisites & assumptions
- You already have a website or app repo open in an AI coding tool such as Lovable, Bolt, v0, Cursor, Replit, or Windsurf.
- You're willing to create a free Dyrected Cloud account — no Postgres, S3, or server to provision.
- No prior Dyrected knowledge assumed — the setup prompt below teaches your AI builder everything it needs.
Easiest: paste the setup prompt
Paste the Dyrected setup prompt into your AI builder. It handles the integration in stages, including npx dyrected init and npx dyrected sync:schema, so your Cloud database is ready without a manual CLI setup. This is the recommended path.
Before you start
- Open the project in the AI builder that owns the website code.
- Create a Dyrected site and keep the site settings open. You will need the Site ID, Site API key, and Base URL. The prompt tells the AI when to ask for them.
Copy the setup prompt
Open your Dyrected site and go to Setup. Copy the setup prompt — your credentials are pre-filled when you copy from inside the admin panel. Or copy the base prompt here:
Paste the prompt into your AI builder
Paste the prompt into the same AI builder that can read and edit the website code. The AI will respond with a plain-language checklist of everything on the website a client could reasonably want to change.
Approve the checklist
Read the checklist top to bottom. If something is missing or unnecessary, say what to add, remove, or change. Say "approved" when it looks right.
Give the AI your Dyrected details
The prompt waits until the install stage before asking for credentials. When it asks, provide your Site ID, Site API key, and Base URL.
Test one real edit
Open Dyrected and change a piece of content you can easily recognize — a heading, an image, or a list item. Confirm the change appears on the website and the design still looks right.
Choose how the client logs in
- Use the hosted admin if you want automatic admin updates and the lowest maintenance
- Use the embedded admin if you want the client to work inside your own domain at
/admin
Invite the client
Invite the client only after one Dyrected edit appears on the live website.
Self-hosted Next.js
Use this path when you want Dyrected running inside your Next.js app. When you finish, the public API will be available under /api and the admin will usually live at /admin.
Prerequisites & assumptions
- Node.js 22+ and a package manager (pnpm recommended).
- An existing Next.js app using the App Router (
@dyrected/nextdoesn't support the Pages Router — add anapp/directory first if you don't have one). - Comfort running one terminal command and editing an
.envfile. No prior Dyrected knowledge assumed beyond that.
Easiest: paste the setup prompt
Paste the Dyrected setup prompt into an AI coding tool that has access to this repo. It will run npx dyrected init, model your content as collections and globals, mount the admin, and seed initial data in guided stages you approve one at a time.
For self-hosted projects, the default base URL is /. Use a different base URL only if you intentionally mounted Dyrected somewhere else.
Manual setup
If you want to install manually, use the CLI. It detects your project layout and writes the files in the right place.
Install with the CLI
npx dyrected initThe CLI auto-detects your framework from package.json. Choose Quick Setup for SQLite + local file storage during local development. When it finishes, you should have a config file, an API route, an admin route, and example env vars. It will:
- Install
@dyrected/core,@dyrected/next,@dyrected/db-sqlite, and@dyrected/storage-local. - Create a
dyrected.config.ts. - Detect your App Router layout, including optional
src/directory, and write files in the right place. - Mount the API route at
app/api/[...route]/route.tsorsrc/app/api/[...route]/route.ts. - Mount the Admin UI at the path you choose during setup, defaulting to
app/admin/page.tsxorsrc/app/admin/page.tsx. - Generate
instrumentation.tsso your server logs the admin and API URLs on startup. - Generate a
.env.example.
Define your config: collections and globals
Open dyrected.config.ts and describe your content model. Use collections for repeatable content such as blog posts or products, and globals for shared site-wide settings such as navigation, footer content, or SEO defaults. See Collections and Globals for the full model.
Run it and confirm /admin loads
- Copy
.env.exampleto.envand fill in the values. - Run
pnpm dev. - Your database schema is synced automatically on startup — no manual CLI sync required for self-hosted projects.
- The admin URL is printed to the console on startup — open it and confirm you can log in and see your collections.
Seed initial data
Add initialData to a collection or global in dyrected.config.ts so it is not empty on first load. See Seeding initial data.
Integrate with your website
Fetch content into your pages using the SDK or REST API. See Next.js integration when you are ready to wire real pages.
Self-hosted Nuxt.js
Use this path when you want Dyrected running inside your Nuxt 3 app. When you finish, the public API will be available under /api and the admin will usually live at /admin.
Prerequisites & assumptions
- Node.js 22+ and a package manager (pnpm recommended).
- An existing Nuxt 3 app.
- Comfort running one terminal command and editing an
.envfile. No prior Dyrected knowledge assumed beyond that.
Easiest: paste the setup prompt
Paste the Dyrected setup prompt into an AI coding tool that has access to this repo. It will run npx dyrected init, model your content as collections and globals, mount the admin, and seed initial data in guided stages you approve one at a time.
For self-hosted projects, the default base URL is /. Use a different base URL only if you intentionally mounted Dyrected somewhere else.
Manual setup
If you want to install manually, use the CLI. It detects your project layout and writes the files in the right place.
Install with the CLI
npx dyrected initThe CLI auto-detects your framework from package.json. Choose Quick Setup for SQLite + local file storage during local development. When it finishes, you should have a config file, a mounted module, an admin route, and example env vars. It will:
- Install
@dyrected/core,@dyrected/nuxt,@dyrected/db-sqlite, and@dyrected/storage-local, then createdyrected.config.ts. - Detect whether you use an
app/directory and write the admin page to the path you choose during setup, defaulting toapp/pages/admin/index.vueorpages/admin/index.vue. - Automatically add
@dyrected/nuxttomodulesin yournuxt.config.ts. - Generate a
.env.example.
Define your config: collections and globals
Open dyrected.config.ts and describe your content model. Use collections for repeatable content such as blog posts or products, and globals for shared site-wide settings such as navigation, footer content, or SEO defaults. See Collections and Globals for the full model.
Run it and confirm /admin loads
- Copy
.env.exampleto.envand configure your secrets. - Run
pnpm dev. - Your database schema is synced automatically on startup — no manual CLI sync required for self-hosted projects.
- The Dyrected admin and API URLs are printed to the console when the dev server starts — open the admin URL and confirm you can log in and see your collections.
Seed initial data
Add initialData to a collection or global in dyrected.config.ts so it is not empty on first load. See Seeding initial data.
Integrate with your website
Fetch content into your pages using the SDK or REST API. See Nuxt.js integration when you are ready to wire real pages.
Next steps
- Mount the Admin UI — let editors manage content at
/admin - Building a Blog — full walkthrough with frontend pages
- Adding Authentication — add a users collection with login
- Deploy with Dyrected Cloud — go live with zero infrastructure
The npx dyrected init command generates .dyrected/ai-rules.md plus non-destructive instruction pointers for supported AI coding tools. Commit these files so agents can translate plain-language requests such as “make the URL follow the title” into the correct Dyrected patterns automatically.