Xây dựng website nhà hàng sushi tương tác bằng AI

Claude Desktop

Dùng Claude Code trong ứng dụng desktop để thiết lập và tùy chỉnh website nhà hàng của bạn.

Tải Claude Desktop

https://claude.ai/download

Tài khoản GitHub

Miễn phí. Bản sao KAITEN của riêng bạn nằm ở đây, và Hostinger triển khai từ đó.

Tạo tài khoản GitHub

https://github.com/signup

Node.js

Tải bản LTS. Claude dùng nó để cài đặt và kiểm tra cửa hàng của bạn.

Tải Node.js

https://nodejs.org/en/download

Tài khoản Supabase

Gói miễn phí là đủ. Nó lưu thực đơn, ảnh, giờ mở cửa, đơn hàng và thông tin đăng nhập quản trị của bạn.

Tạo tài khoản Supabase

https://supabase.link/r4gdwhi

Hosting Hostinger

Bạn cần hosting ở Bước 5, khi cửa hàng lên mạng.

Chọn gói Hostinger

Dùng gói Unlimited hoặc gói Cloud — KAITEN được triển khai dưới dạng Node.js Web App, không phải website tĩnh.

Tạo bản sao của riêng bạn

Mở KAITEN trên GitHub

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

Nhấn Use this template, rồi Create a new repository Đặt tên và chọn Public hoặc Private Nhấn Create repository và sao chép địa chỉ của nó

Tạo một dự án Supabase

Mở Supabase Dashboard

https://supabase.com/dashboard

Nhấn New project — khu vực nào và gói Free đều được Lưu mật khẩu cơ sở dữ liệu ở nơi an toàn — Claude không bao giờ cần đến nó Khi dự án sẵn sàng, sao chép Project ID của nó

Supabase Project Settings General

Project ID là thông tin dự án duy nhất mà Claude cần. Bạn không phải tạo bảng hay viết SQL nào: Claude sẽ thiết lập cơ sở dữ liệu ở Bước 3.

Đưa vào Claude Desktop

Claude Desktop Code Local

Bắt đầu một phiên Local trong một thư mục như Documents, thêm địa chỉ repository của bạn bên dưới rồi gửi:

Clone bản sao của bạn

Tải repository KAITEN của riêng bạn vào một thư mục con mới và kiểm tra rằng Claude có thể cập nhật nó.

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.

Địa chỉ kho của bạn

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

Mở thư mục KAITEN của bạn

Bắt đầu một phiên Local mới Mở thư mục Claude vừa tạo — thư mục có README.md bên trong Nếu Claude Desktop hỏi, hãy tin cậy thư mục này

Nhờ Claude kết nối cửa hàng của bạn

Trong phiên KAITEN của bạn, thêm Project ID bên dưới rồi gửi:

Kết nối KAITEN với Supabase

Claude áp dụng ba migration và thực đơn ban đầu của bản khởi đầu bằng Supabase CLI, kiểm tra bảo mật và bộ nhớ lưu trữ, rồi đưa cho bạn hai giá trị công khai dùng cho 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.

Project ID Supabase của bạn

abcdefghijklmnopqrst

Claude hỏi trước mỗi hành động — hãy nhấn Allow. Claude dừng lại khi đến lượt bạn.

Đăng nhập Supabase CLI

Khi Claude yêu cầu, bạn tự chạy lệnh này một lần — nó sẽ mở trình duyệt:

Nhấn Terminal trên thanh tiêu đề của phiên Chạy lệnh bên dưới Chấp thuận đăng nhập trong cửa sổ trình duyệt vừa mở Báo Claude là bạn đã đăng nhập

npx supabase login

Tạo tài khoản quản trị

Supabase Authentication Users

Nhấn Add user, rồi Create new user Nhập email và một mật khẩu mạnh Để nguyên Auto Confirm User được đánh dấu và tạo người dùng Cho Claude biết email quản trị của bạn — không bao giờ cho mật khẩu

Supabase Authentication Sign In / Providers

Tắt Allow new users to sign up và lưu — cửa hàng không có tài khoản khách hàng

Claude thêm email của bạn vào danh sách quản trị viên của cửa hàng. Bạn đăng nhập tại /admin trên cửa hàng trực tuyến ở Bước 5.

Supabase CLI không hoạt động? Thiết lập thủ công

Trong dự án Supabase, mở SQL Editor. Chạy ba tệp này từ thư mục KAITEN của bạn, mỗi tệp một lần và theo đúng thứ tự. Với mỗi tệp, mở ra, sao chép toàn bộ, dán vào một query mới và nhấn Run.

supabase/migrations/20261102200000_kaiten_schema.sql

supabase/migrations/20261102200100_kaiten_seed.sql

supabase/migrations/20261102200200_kaiten_private_helpers.sql

Sao chép Project URL và Publishable key từ Connect — bạn sẽ thêm chúng vào Hostinger ở Bước 5. Sau khi tạo người dùng quản trị ở trên, thêm email của bạn bên dưới rồi chạy đoạn này trong SQL Editor:

Đặt tôi làm quản trị viên

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

Email quản trị của bạn

you@example.com

Mô tả nhà hàng của bạn cho Claude

Điền những gì bạn biết — để trống phần còn lại và Claude sẽ giữ phiên bản của KAITEN. Rồi gửi trong phiên KAITEN của bạn:

Tùy chỉnh nhà hàng sushi của tôi

Đổi tên, nội dung và giao diện, giữ nguyên băng chuyền và chức năng đặt món, rồi push các thay đổi lên repository GitHub của riêng bạn.

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.

Tên nhà hàng

Sushi Nami

Ý tưởng hoặc câu chuyện của nhà hàng

Quầy kaiten do một gia đình điều hành tại Lyon từ năm 2009, với cá từ chợ sáng và cơm được nấu mới mỗi giờ.

Nhận diện thương hiệu

Claude thay đổi thương hiệu, thiết kế và code. Món ăn, ảnh, giá đĩa, danh mục, giờ mở cửa, thông tin nhận món và đơn hàng được quản lý trong trang quản trị sau khi ra mắt, ở Bước 5. Xem lại các thay đổi của Claude, yêu cầu thêm trong cùng phiên, và báo cho Claude khi đã sẵn sàng: Claude push một lần lên repository GitHub của bạn, nơi Bước 5 sẽ triển khai.

Tạo Web App của bạn

Chưa có hosting? Hãy chọn gói ở phần Yêu cầu.

Hostinger Websites Create site Web App

Nếu Hostinger cho chọn tên miền, hãy chọn tên miền của bạn — nếu không, ứng dụng của bạn sẽ bắt đầu trên một tên miền tạm thời Chọn Import Git Repository Cấp quyền cho GitHub và chọn bản sao KAITEN của riêng bạn, với các thay đổi Claude đã push ở Bước 4

Tên miền đăng ký ở nơi khác? Thêm các bản ghi DNS mà Hostinger hiển thị tại nhà đăng ký tên miền của bạn, và giữ nguyên các bản ghi email hiện có.

Cấu hình và triển khai

Giữ các thiết lập Next.js mà Hostinger phát hiện — nó tự build và khởi động cửa hàng Chọn Node.js 22 trở lên Đảm bảo lệnh build là npm run build và lệnh start là npm start — không bao giờ dùng npm run build:demo, lệnh đó build bản demo bị khóa

Trước khi triển khai, mở Environment variables, nhấn Edit và thêm ba biến này. KAITEN_MODE bật chức năng đặt món thật và trang quản trị — thiếu nó, website sẽ được build thành bản demo. Hai giá trị Supabase là những giá trị Claude đã cho bạn xem ở Bước 3. Chúng được build sẵn vào cửa hàng, nên nếu đổi một giá trị sau này thì cần deploy lại.

KAITEN_MODE NEXT_PUBLIC_SUPABASE_URL NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

KAITEN_MODE

Từ live, viết thường

NEXT_PUBLIC_SUPABASE_URL

Project URL của Supabase

NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY

Publishable key của Supabase

Các giá trị Supabase nằm trong Connect.

Mở Connect

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

Chỉ giá trị công khai

Tuyệt đối không thêm Secret key hay service_role key của Supabase vào đây. Mọi biến bắt đầu bằng NEXT_PUBLIC_ đều hiển thị được trong trình duyệt.

Nhấn Finish, rồi Deploy, và chờ build hoàn tất

Đang chạy trên tên miền tạm thời?

Để chuyển sang tên miền của riêng bạn, mở Web App trong Hostinger và kết nối tên miền ở đó, thêm các bản ghi DNS được hiển thị tại nhà đăng ký tên miền. KAITEN không lưu địa chỉ của chính nó, nên không cần thay đổi gì và không cần deploy lại.

Thiết lập nhà hàng của bạn

Mở /admin trên cửa hàng đang chạy và đăng nhập bằng email quản trị. Mọi thứ bạn lưu trong trang quản trị đều vào thẳng cơ sở dữ liệu — không cần sửa code.

Trong Restaurant, chọn múi giờ ở Hours are in trước, sau đó đặt Restaurant name, địa chỉ nhận món, số điện thoại và giờ mở cửa, rồi nhấn Save restaurant details Trong Plates & prices, đặt giá cho từng màu đĩa và nhấn Save plate prices — mọi món trên đĩa đó đều theo giá này Trong Menu, nhấn Edit ở một món, thay đổi thông tin, dùng Replace photo để thay bằng ảnh của bạn và nhấn Save changes. Dùng Add dish để thêm món mới Tắt On menu cho những món bạn không phục vụ, và tắt In stock khi một món đã hết trong ngày Trong Categories, đổi tên, sắp xếp lại hoặc thêm các mục trong thực đơn

Thay ảnh ban đầu trước khi mở cửa

Tám ảnh món ăn ban đầu lấy từ bản demo của component gốc, và bản quyền của chúng chưa được xác minh. Hãy dùng ảnh bạn sở hữu hoặc đã được cấp phép.

Ảnh món ăn của bạn cần gì

Hình vuông, tối thiểu 800 × 800 px

Chụp từ trên xuống, đĩa lấp đầy khung hình

Nền trong suốt (PNG hoặc WebP), để băng chuyền hiện ra xung quanh đĩa

Tối đa 5 MB

Kiểm tra và ra mắt

Mở tên miền của bạn — biểu tượng ổ khóa hiện ra, băng chuyền quay và phần đầu trang hiển thị trạng thái mở cửa Lấy vài đĩa vào đơn của bạn, nhấn Review order, rồi Checkout for pickup Nhập tên và số điện thoại rồi nhấn Place pickup order Trong trang quản trị, mở Orders, tìm đơn hàng và nhấn Start preparing Trên trang xác nhận đơn hàng, nhấn Refresh status: lúc này nó hiển thị Preparing

Cửa hàng chỉ nhận đơn trong giờ mở cửa và khi Taking orders đang bật, ở phía trên mỗi trang quản trị. Khách thanh toán khi đến nhận món: không có thanh toán thẻ trực tuyến.

Sau này, hãy thay đổi món ăn, ảnh, giá và giờ mở cửa trong trang quản trị — thay đổi có hiệu lực ngay. Với thay đổi thiết kế hoặc code, hãy nhờ Claude và duyệt lần push: Hostinger build lại cửa hàng sau mỗi lần push lên main.