Quickstart

Get Contentrain Studio running and create your first content entry in under 5 minutes.

If you already entered the ecosystem through contentrain, @contentrain/mcp, @contentrain/rules, @contentrain/skills, or @contentrain/query, Studio is the next surface: the authenticated team web layer on top of the same .contentrain/ contract. See Ecosystem Map.

Prerequisites

• A GitHub account with at least one repository
• A modern web browser

Step 1: Sign In

Navigate to your Studio instance and sign in with GitHub. This grants Studio access to your repositories through the GitHub App.

TIP

You can also sign in with Google OAuth or a magic link; each creates your account and a personal workspace. Signing in with GitHub is the supported way to install the GitHub App and connect repositories.

Step 2: Install the GitHub App

After your first login, Studio will prompt you to install the Contentrain GitHub App on your account or organization. This is required to connect repositories.

Choose which repositories to grant access to — you can always change this later in your GitHub settings.

Step 3: Create a Project

From your workspace dashboard, you have two options:

Option A: Connect an Existing Repository

Click Connect repository and select a repo from the list. Studio will scan it for any existing .contentrain/ configuration. If found, it imports your models and content automatically.

This is the typical path after:

• contentrain init
• local normalize extraction and reuse
• local validation and review through AI packages

Option B: Start from a Template

Click Use Template and choose a starter kit. You can filter by framework:

• Astro — Astro Blog, Astro Landing
• Next.js — Next Commerce, Next Multi-Surface SaaS, Next SaaS Dashboard, Next White-Label Portal
• Nuxt — Nuxt Admin Console, Nuxt SaaS
• SvelteKit — SvelteKit Editorial
• VitePress — VitePress Docs

Studio creates a new repository from the template with pre-configured content models.

Step 4: Explore the Workspace

Your project opens in a three-panel layout:

Panel	Purpose
Sidebar	Navigate content models, resources, and pending changes
Chat	Talk to the AI agent to manage content
Content	Browse and edit content entries directly

Inside a project, the sidebar is organized into these sections:

• Content models — your models grouped by domain, each showing an entry count and a globe marker when the model is localized (i18n)
• Vocabulary — the project's UI string dictionary, with a term count
• CDN Delivery — publish content to the delivery API (plan-gated; appears locked with an upgrade prompt when your plan lacks it)
• Assets — the media library for images and files (plan-gated, same as CDN)
• Pending Changes — review branches awaiting merge

The sidebar footer is always available, with Search (the Cmd/Ctrl+K command palette), workspace Settings, the dark/light theme toggle, an About link, and your profile (click your name for account settings) with a sign out button.

Step 5: Create Content via Chat

Type a message in the chat panel:

"Create a blog post titled 'Hello World' with a summary and published date"

The AI agent will:

1. Find the appropriate content model (or create one if needed)
2. Create the entry with the fields you specified
3. Show you what was created
4. Commit the change to a review branch

Step 6: Review and Merge

In the sidebar, you'll see a new branch under Pending Changes. Click it to:

1. View the diff — see exactly what changed
2. Merge to accept the changes into your main branch
3. Or Reject to discard them

That's it! Your content is now committed to your GitHub repository.

What's Next?

• Core Concepts — Understand workspaces, projects, and models in depth
• Content Models — Learn about the four model kinds and 27 field types
• AI Chat — Master the conversation-first workflow
• Ecosystem Map — See how Studio connects to the AI package surface
• Self-Hosting — Deploy your own Studio instance