Build an Interactive Sushi Restaurant Website with AI

Claude Desktop

Use Claude Code in the desktop app to set up and customize your restaurant website.

Download Claude Desktop

https://claude.ai/download

GitHub account

Free. Your own copy of KAITEN lives here, and Hostinger deploys from it.

Create GitHub Account

https://github.com/signup

Node.js

Download the LTS release. Claude uses it to install and check your store.

Download Node.js

https://nodejs.org/en/download

Supabase account

The free plan is enough. It holds your menu, photos, opening hours, orders and admin sign-in.

Create Supabase Account

https://supabase.link/r4gdwhi

Hostinger hosting

You need hosting in Step 5, when your store goes live.

Choose a Hostinger Plan

Use the Unlimited plan or a Cloud plan — KAITEN deploys as a Node.js Web App, not a static website.

Create Your Own Copy

Open KAITEN on GitHub

https://github.com/salhiworks/kaiten-sushi-store

Click Use this template, then Create a new repository Name it and choose Public or Private Click Create repository and copy its address

Create a Supabase Project

Open Supabase Dashboard

https://supabase.com/dashboard

Click New project — any region and the Free plan are fine Save the database password somewhere safe — Claude never needs it When the project is ready, copy its Project ID

Supabase Project Settings General

The Project ID is the only project detail Claude needs. You don't create any tables or write any SQL: Claude sets up the database in Step 3.

Bring It to Claude Desktop

Claude Desktop Code Local

Start a Local session in a folder such as Documents, add your repository's address below, and send:

Clone Your Copy

Downloads your own KAITEN repository into a new subfolder and checks that Claude can update it.

Clone {{REPOSITORY_URL}} into a NEW subfolder inside the folder I selected, named after the repository. Never clone directly into the selected folder and never overwrite existing files. If Git is missing, tell me exactly how to install it. Then check that you can push to this repository with git push --dry-run. If GitHub needs me to sign in, tell me exactly what to do, and never ask me to paste a password or token into the chat. When it is done, tell me which new folder to open in my next Claude Desktop Local session.

Your repository's address

https://github.com/your-name/my-sushi-restaurant

Open Your KAITEN Folder

Start a new Local session Open the folder Claude just created — the one with README.md inside If Claude Desktop asks, trust the folder

Ask Claude to Connect Your Store

In your KAITEN session, add your Project ID below and send:

Connect KAITEN to Supabase

Claude applies the starter's three migrations and starting menu with the Supabase CLI, checks security and storage, then gives you the two public values for Hostinger.

Connect this KAITEN restaurant to my Supabase project {{PROJECT_REF}}. Work only on that project and never touch any other. Read README.md (step 2, "Make it a real store with Supabase") and docs/SUPABASE.md first, and follow docs/SUPABASE.md's Supabase CLI steps. Use only the SQL this project already has. Don't write new tables, policies or setup SQL, and don't change the store's code. Use only this project's own pinned Supabase CLI, through npx supabase after npm install — never a global supabase command — always on my hosted project. Never run supabase db reset, supabase migration repair or any command that deletes data, never use --include-seed, and never start a local database or Docker. Never ask me for a password, an access token or a Secret key, and never use --reveal. Do these yourself, and tell me what each one does before you run it: 1. Check that Node.js 22 or newer is installed (if it isn't, stop and tell me how to install it), then run npm install and check that npx supabase --version shows 2.122.0. If it doesn't, stop and tell me. 2. Check that I'm signed in to the Supabase CLI. If I'm not, stop and tell me to run npx supabase login in the Terminal myself, and continue when I say I'm signed in. 3. Link this folder with npx supabase link --project-ref {{PROJECT_REF}}, then show me the project's name and URL and ask me to confirm it's the right one. 4. Show me the project's migration history (npx supabase migration list --linked). If it has migrations that aren't in supabase/migrations, stop and explain what you see. If the history is empty but the table public.dishes already exists, the setup was already run by hand: stop and tell me, and push nothing, because these files must not run twice. 5. Show me what the push would apply (npx supabase db push --linked --dry-run). It must be exactly the three files in supabase/migrations, in order: kaiten_schema, kaiten_seed, kaiten_private_helpers. Then apply them with npx supabase db push --linked, so they are recorded in the project's migration history. They create the tables, the Row Level Security policies, the dish-images storage bucket and the starting menu. There is no separate seed step. 6. Verify the setup with npx supabase db query --linked: Row Level Security is on for all seven tables in public, the public dish-images bucket exists, and there are 5 plate tiers, 4 categories and 8 dishes. Fix nothing by hand: tell me what's wrong. 7. Show me my Project URL and Publishable key (sb_publishable_...) as NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY, ready to copy into Hostinger, using npx supabase projects api-keys --project-ref {{PROJECT_REF}}. If no Publishable key is listed, tell me to copy it from Connect in the Supabase Dashboard. Never read, use or write the Secret key or service_role key, and don't create .env.local. Then stop and tell me to create my admin user in the Supabase Dashboard. When I give you my admin email, never my password, add that user to public.admin_users with the SQL in docs/SUPABASE.md ("Your admin account"), through npx supabase db query --linked, and check that the row exists. Finally, tell me in plain words what passed and what is still left to do.

Your Supabase Project ID

abcdefghijklmnopqrst

Claude asks before each action — click Allow. It stops when it's your turn.

Sign In to the Supabase CLI

When Claude asks, run this once yourself — it opens your browser:

Click Terminal in your session's title bar Run the command below Approve the sign-in in the browser window that opens Tell Claude you're signed in

npx supabase login

Create Your Admin Account

Supabase Authentication Users

Click Add user, then Create new user Enter your email and a strong password Leave Auto Confirm User ticked and create the user Tell Claude your admin email — never your password

Supabase Authentication Sign In / Providers

Turn off Allow new users to sign up and save — the store has no customer accounts

Claude adds your email to the store's administrator list. You sign in at /admin on your live store in Step 5.

Supabase CLI Not Working? Set It Up by Hand

In your Supabase project, open SQL Editor. Run these three files from your KAITEN folder, once each and in this order. For each one, open it, copy everything, paste it into a new query and click Run.

supabase/migrations/20261102200000_kaiten_schema.sql

supabase/migrations/20261102200100_kaiten_seed.sql

supabase/migrations/20261102200200_kaiten_private_helpers.sql

Copy your Project URL and Publishable key from Connect — you add them to Hostinger in Step 5. After creating your admin user above, add your email below and run this in the SQL Editor:

Make Me an Administrator

insert into public.admin_users (user_id) select id from auth.users where email = '{{ADMIN_EMAIL}}';

Your admin email

you@example.com

Describe Your Restaurant to Claude

Fill in what you know — leave the rest blank and Claude keeps KAITEN's version. Then send it in your KAITEN session:

Customize My Sushi Restaurant

Rebrands the name, copy and look, keeps the conveyor belt and ordering exactly as they are, and pushes the changes to your own GitHub repository.

This folder is my own copy of the KAITEN sushi restaurant. Before you change anything, read README.md ("How it works"), AGENTS.md and docs/ASSETS.md. AGENTS.md matters: this version of Next.js differs from what you may know. Customize the website for my restaurant. Restaurant name: {{RESTAURANT_NAME}} Our concept and story: {{RESTAURANT_STORY}} Visual identity: {{VISUAL_STYLE}} Where each change belongs: - The brand mark and its default name: src/components/site/brand-mark.tsx - Homepage and about copy: src/components/home/ and src/app/(store)/about/page.tsx - Colours and fonts: src/app/globals.css and src/app/layout.tsx The restaurant name guests see in the header, footer and page titles, plus the address, phone, opening hours, dishes, photos and plate prices, come from the database. Don't hard-code them: I'll set them in the admin after launch. Tell me which name to enter there. Keep these exactly as they are: - The sushi conveyor belt in src/components/ui/sushi-conveyor-menu.tsx: dragging, flicking, lifting a plate, the plate stack and every animation, timing and hit area - The menu, the order and checkout, pickup ordering, the admin, the Supabase migrations, KAITEN_MODE and the other environment variables - The dependencies: don't add new ones First show me a short plan: every file you will change, and what changes in it. Wait for my approval. Then make the changes, and run npm install, npm run lint and npm run typecheck so the build can't break. Fix anything they report. Don't start a local server. Then summarize what you changed and wait. I may ask for more changes. Only when I say it's ready: make sure .env.local and any other secrets are not committed, commit everything with a clear message and push it to the main branch of my own GitHub repository. Never push to any other repository. If GitHub needs me to sign in, tell me exactly what to do. When it is done, tell me the commit you pushed.

Restaurant name

Sushi Nami

Your restaurant's concept or story

A family-run kaiten counter in Lyon since 2009, with fish from the morning market and rice cooked every hour.

Visual identity

Claude changes the brand, design and code. Your dishes, photos, plate prices, categories, opening hours, pickup details and orders are managed in the admin after launch, in Step 5. Review Claude's changes, ask for more in the same session, and tell Claude when it's ready: it pushes once to your GitHub repository, which Step 5 deploys.

Create Your Web App

No hosting yet? Get a plan in Requirements.

Hostinger Websites Create site Web App

If Hostinger offers a domain choice, pick your own domain — otherwise your app starts on a temporary domain Select Import Git Repository Authorize GitHub and select your own copy of KAITEN, with the changes Claude pushed in Step 4

Domain registered somewhere else? Add the DNS records Hostinger shows at your registrar, and keep your existing email records.

Configure & Deploy

Keep the Next.js settings Hostinger detects — it builds and starts the store itself Choose Node.js 22 or newer Make sure the build command is npm run build and the start command npm start — never npm run build:demo, which builds the locked demo

Before you deploy, open Environment variables, click Edit and add these three. KAITEN_MODE turns on real ordering and the admin — without it, your site is built as the demo. The two Supabase values are the ones Claude showed you in Step 3. They're built into the store, so changing one later needs a redeploy.

KAITEN_MODE NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

KAITEN_MODE

The word live, in lowercase

NEXT_PUBLIC_SUPABASE_URL

Supabase Project URL

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Supabase Publishable key

The Supabase values are in Connect.

Open Connect

https://supabase.com/dashboard/project/_?showConnect=true

Public values only

Never add the Supabase Secret key or service_role key here. Anything starting with NEXT_PUBLIC_ is visible in the browser.

Click Finish, then Deploy, and wait for the build to finish

Running on a Temporary Domain?

To switch to your own domain, open your Web App in Hostinger and connect the domain there, adding any DNS records it shows at your registrar. KAITEN doesn't store its own address, so there's nothing to change and no redeploy needed.

Set Up Your Restaurant

Open /admin on your live store and sign in with your admin email. Everything you save in the admin goes straight to your database — no code changes.

In Restaurant, choose your time zone under Hours are in first, then set your Restaurant name, pickup address, phone and opening hours, and click Save restaurant details In Plates & prices, set the price of each plate colour and click Save plate prices — every dish on that plate follows In Menu, click Edit on a dish, change its details, use Replace photo for your own photo and click Save changes. Use Add dish for new ones Turn off On menu for dishes you don't serve, and In stock when one sells out for the day In Categories, rename, reorder or add the sections of your menu

Replace the starting photos before you open

The eight starting dish photos come from the original component's demo, and their rights are unverified. Use photos you own or have licensed.

What Your Dish Photos Need

Square, at least 800 × 800 px

Taken from above, with the plate filling the frame

A transparent background (PNG or WebP), so the belt shows around the plate

Up to 5 MB

Verify & Launch

Open your domain — the padlock shows, the belt turns and the header shows your opening status Lift a few plates onto your order, click Review order, then Checkout for pickup Enter a name and phone number and click Place pickup order In the admin, open Orders, find the order and click Start preparing On the order's confirmation page, click Refresh status: it now shows Preparing

The store takes orders only during your opening hours and while Taking orders is on, at the top of every admin page. Guests pay when they collect: there are no online card payments.

Later, change dishes, photos, prices and hours in the admin — they're live straight away. For design or code changes, ask Claude and approve the push: Hostinger rebuilds your store on every push to main.