Customize the Frontend | GoShipped Docs

Make the Next.js app look like your product. Start with identity, then the chat shell, settings, and onboarding.

Make GoShipped look like your product.

The authenticated app already works: chat, settings, auth screens, onboarding. You do not rebuild it. You replace the identity, then edit the few folders that are actually yours.

starter.config.json     name, logo, colors, flags
        ↓
Chat, settings, auth    the product UI
        ↓
Your screens            add routes when you need them

This is the app after login. The public website is Customize the Landing Page.

Start here

Do this first, before you restyle components:

Open starter.config.json
Set app.name, app.description, branding.*, and support.email
Put logo files in apps/web/public/ and point the config at them ("/my-logo.svg")
Keep pnpm dev running — config syncs into the app automatically

That file is the product identity for both the app and the marketing site. Colors become CSS variables (--accent, --background, …) via generated starter-theme.css. Do not edit the generated copies.

There is no shadcn (or similar) component library. UI is custom Tailwind plus classes in apps/web/src/app/globals.css. Pick a nearby screen and copy its patterns.

I want to change…

I want to change…	Look here
Product name in the sidebar, auth, and composer	`starter.config.json` → `app.name`
Logo and favicon	Files in `apps/web/public/` + `branding.logo` / `logoDark` / `favicon`
Colors	`starter.config.json` → `branding.colors`
Fonts	`apps/web/src/app/layout.tsx` (Geist + Geist Mono)
Global CSS / chat chrome	`apps/web/src/app/globals.css`
Main app navigation	`apps/web/src/components/chat/sidebar.tsx`
User menu (Settings, Billing, Log out)	Bottom of `sidebar.tsx`
Chat shell, empty state, composer	`apps/web/src/components/chat/`
Chat welcome headline	`apps/web/src/components/chat/empty-state.tsx`
Settings tabs and panels	`apps/web/src/components/settings/` and `apps/web/src/lib/settings/sections.ts`
Auth forms	`apps/web/src/components/auth/` plus `/login`, `/register`, `/forgot-password`
Onboarding overlay	UI: `apps/web/src/components/onboarding/` — copy and steps: `apps/api/app/onboarding/config.py`
Feature visibility	`starter.config.json` → `features.*`

If a path is not in that table, you can probably ignore it.

Product folders vs everything else

Touch these when you are building the product:

Folder	What it is
`apps/web/src/components/chat/`	Sidebar, messages, input, tool cards
`apps/web/src/components/settings/`	Settings Center (a modal over chat)
`apps/web/src/components/auth/`	Login, signup, password reset
`apps/web/src/components/onboarding/`	First-run overlay chrome
`apps/web/src/components/billing/`	In-app plan cards
`apps/web/src/components/branding/`	Shared logo mark
`apps/web/src/app/chat/`	`/chat` and `/chat/[id]`
`apps/web/src/app/globals.css`	Chat, sidebar, auth, and onboarding styles

Leave these alone until you have a reason: lib/api, lib/supabase, store/, hooks/. They wire the app. They are not a design system.

Marketing components live under components/marketing/ and app/(marketing)/. Changing chat will not restyle the public site, and the other way around.

How config reaches the UI

starter.config.json
        ↓
pnpm config:sync   (also runs inside pnpm dev)
        ↓
apps/web/src/config/generated/
        ↓
starterConfig / isFeatureEnabled() in components

Config	Effect in the UI
`app.name`	Sidebar, auth header, composer placeholder
`branding.logo` / `logoDark`	`ProductBrand` prefers the dark mark
`branding.colors`	Theme tokens used as `bg-accent`, `text-foreground`, …
`features.signup`	Hides `/register` (Supabase still owns the real gate)
`features.onboarding`	No first-run overlay
`features.billing`	No upgrade CTA, billing tab, or checkout
`features.files`	No attach button

Flags turn capabilities off for the whole product, not just a button. See Configuration.

Layouts and routes

Route	What you get
`/chat`	New conversation
`/chat/[conversationId]`	Existing thread
`/settings/…`	Redirects into `/chat?settings=…` — settings is a modal, not a separate app
`/login`, `/register`, `/forgot-password`, `/update-password`	Auth UI

The chat layout mounts onboarding and the settings deep-link. After login, users land on /chat.

Demo strings still in the UI

Identity in config is already "My AI Assistant", not GoShipped. A few screens still have starter copy:

Empty-state headline in empty-state.tsx (How can I help you today?)
“Upgrade to Pro” in sidebar.tsx
Onboarding welcome and use-cases in apps/api/app/onboarding/config.py

Replace those when you brand the product. Unused Create-Next-App SVGs in public/ (next.svg, vercel.svg) are safe to delete.

Make it yours

app.name, description, support email, and colors in starter.config.json
Your logo and favicon in apps/web/public/
Chat empty state and composer placeholder
Sidebar nav / user menu if your product needs different destinations
Onboarding copy in apps/api/app/onboarding/config.py, or set features.onboarding to false
Turn off feature flags you are not shipping yet

Then rebrand the public site — or hide sections you are not ready to show.

Customize the Landing Page

The marketing site inside the product repo, not these docs.

Authentication

Signup, login, and the screens around them.

🎨 Customize the Frontend