AI & AUTOMATION SELF HOSTING

Hướng dẫn bolt.diy: Xây full-stack app bằng prompt ngay trên trình duyệt

08/03/20261 view0

Tóm tắt nhanh

Bolt.new là “AI dev agent” chạy hoàn toàn trên trình duyệt, cho phép bạn prompt, chạy, sửa và deploy full-stack app mà không cần local setup.

Phiên bản open-source bolt.diy cho phép tự host, chọn bất kỳ LLM bạn muốn (OpenAI, Anthropic, Ollama…) và tùy biến sâu quy trình phát triển.

Cài đặt bolt.diy khá thẳng: clone repo, cài pnpm, pnpm install rồi pnpm run dev hoặc dùng Docker, sau đó cấu hình key LLM trong giao diện web.

Quy trình làm việc tối ưu: viết prompt rõ ràng, để Bolt scaffold project, chỉnh sửa trong IDE trên trình duyệt, rồi deploy 1-click lên Netlify/Vercel/Cloudflare hoặc host riêng.

Bolt.new rất hợp để prototyping nhanh, build MVP, tool nội bộ, landing page và demo AI agent – đặc biệt cho dev web, PM, designer và content creator.

Bolt.new là gì và khác gì so với IDE + AI truyền thống?

Bolt.new là một AI-powered web development agent cho phép bạn prompt, chạy, sửa và deploy full-stack ứng dụng trực tiếp trong trình duyệt, không cần cài Node, npm hay database trên máy. Nền tảng này dùng WebContainers của StackBlitz để chạy Node.js, npm, dev server và terminal ngay trong tab browser, đồng thời cho AI quyền điều khiển full môi trường (filesystem, package manager, server, console…).

Khác với việc chỉ dùng ChatGPT/Cursor để sinh code rồi copy về máy, Bolt.new cho phép AI scaffold project, cài package, chạy backend, preview app live và deploy từ chính giao diện chat, biến AI thành “dev agent” thực thụ chứ không chỉ là code assistant.

Bolt.diy: Bản open-source tự host của Bolt.new

Bolt.diy là phiên bản open-source chính thức của Bolt.new, được phát hành dưới giấy phép MIT, cho phép bạn tự host toàn bộ môi trường “AI dev agent” và chọn LLM tùy ý cho từng prompt. Bạn có thể dùng model từ 19+ provider (OpenAI, Anthropic, Ollama, v.v.) và cấu hình thêm nhiều tích hợp như Supabase, GitHub, Vercel/Netlify.

Vì chạy hoàn toàn trong browser với WebContainers, bolt.diy vẫn giữ trải nghiệm “IDE trong trình duyệt”: live preview, terminal, cài npm package, quản lý version, export ZIP hoặc push GitHub, real-time collaboration và one-click deploy lên Vercel/Netlify/GitHub Pages.

Khi nào nên dùng bolt.new, khi nào nên dùng bolt.diy?

Dùng bolt.new (cloud) khi bạn muốn:
Vào bolt.new, login, gõ prompt và build MVP/landing/demo cực nhanh, không đụng tới hạ tầng.
Trả phí theo token, có free tier, không tự quản server.
Dùng bolt.diy (self-host) khi bạn cần:
Kiểm soát dữ liệu, chạy trong network nội bộ hoặc server riêng.
Tự chọn model (kể cả local LLM qua Ollama) và tùy biến logic AI dev agent theo nhu cầu team.

Cả hai đều chia sẻ triết lý: “prompt → scaffold code → chỉnh sửa trong IDE → deploy”, nên nếu bạn quen một bên thì chuyển qua bên còn lại gần như không phải học lại từ đầu.

Tính năng nổi bật về full-stack & AI dev agent

bolt.new kết hợp AI với WebContainers, cho phép AI thao tác toàn bộ vòng đời ứng dụng ngay trong trình duyệt. Cụ thể bạn có thể:

Cài và chạy npm tool & framework: Vite, Next.js, React, Astro, Svelte, v.v. được hỗ trợ nếu chạy được trên StackBlitz thì cũng chạy trên Bolt.
Chạy backend Node.js: Khởi chạy server, API route, webhook từ trong môi trường browser mà không cần local Node.
Tương tác API bên thứ ba: Gọi Stripe, Supabase, REST/GraphQL API, v.v. ngay trong project full-stack.
Deploy 1-click: Từ giao diện Bolt, bạn có thể deploy lên Netlify, Vercel hoặc Cloudflare Pages và nhận ngay public URL.

AI không chỉ sinh code mà còn có quyền chạy lệnh, cài package, sửa file, đọc log, từ đó thích hợp để xây “AI dev agent” hoặc “AI web dev copilot” cho team.

Cài đặt bolt.diy chạy local (pnpm)

Nếu bạn muốn tự chạy môi trường tương tự bolt.new trên máy hoặc VPS (hữu ích cho self-host và tích hợp sâu hơn), bạn có hai lựa chọn phổ biến: clone repo bolt.diy hoặc bolt.new rồi chạy bằng pnpm.

1. Cài đặt bolt.diy bằng pnpm (máy cá nhân/VPS)

Yêu cầu: Git và Node.js đã cài sẵn.

Các bước nhanh:

# Clone nhánh ổn định
git clone -b stable https://github.com/stackblitz-labs/bolt.diy

cd bolt.diy

# Cài pnpm toàn cục
npm install -g pnpm

# Cài dependencies
pnpm install

# Chạy development server
pnpm run dev

Sau khi chạy, bolt.diy sẽ chạy trên http://localhost:5173/ (hoặc port tương tự hiển thị trong terminal) và bạn có thể đặt API key LLM ngay trong giao diện web.

Một số hướng dẫn khác cũng dùng flow tương tự nhưng build trước rồi mới start, ví dụ pnpm run build sau đó pnpm start để chạy bản build tối ưu.

2. Chạy bolt.new repo gốc bằng pnpm

Một cách khác là clone trực tiếp repo stackblitz/bolt.new:

git clone https://github.com/stackblitz/bolt.new.git

cd bolt.new
pnpm install

Tạo file .env.local trong thư mục bolt.new để cấu hình key LLM, ví dụ cho Anthropic:

ANTHROPIC_API_KEY=YOUR_API_KEY

Sau đó chạy:

pnpm run dev
# hoặc build & start
pnpm run build
pnpm run start

Terminal sẽ báo địa chỉ dev server dạng http://localhost:5173/, bạn chỉ cần mở trên trình duyệt để truy cập giao diện Bolt.

Cài đặt và deploy bolt.diy bằng Docker

Nếu bạn thích môi trường cô lập, dễ di chuyển giữa server, Docker là lựa chọn khá phổ biến cho bolt.diy/bolt.new.

Một flow điển hình trên VPS Ubuntu:

Chuẩn bị server: Cài Docker, Docker Compose, Git, Node.js và npm.
Cài corepack/pnpm (nếu cần):

npm install -g corepack
npm install -g pnpm

Clone repo bolt.diy:

git clone https://github.com/stackblitz-labs/bolt.diy.git
cd bolt.diy

Build Docker image (ví dụ trong một hướng dẫn):

npm run dockerbuild

Tùy chỉnh Dockerfile nếu cần: Một số môi trường thay dòng corepack enable pnpm bằng npm install -g [email protected] && pnpm install để ổn định hơn.
Chạy container: Sử dụng docker-compose với profile development/production, sau đó map port 5173 (hoặc port bạn muốn) ra ngoài host.

Khi container chạy, bạn truy cập local IP + port do Docker cung cấp (ví dụ http://SERVER_IP:5173) để mở bolt.diy, rồi thêm API key LLM trong dashboard.

Cấu hình LLM và API Key trong bolt.diy

bolt.diy cho phép bạn chọn LLM cho từng prompt, từ nhiều provider khác nhau như OpenAI, Anthropic hoặc local model qua Ollama. Trong hầu hết hướng dẫn, quy trình cấu hình gồm:

Tạo file .env hoặc .env.local trong thư mục bolt.diy để khai báo biến môi trường cho API key (ví dụ OPENAI_API_KEY, ANTHROPIC_API_KEY).
Hoặc để file env trống, rồi import cấu hình và key trực tiếp qua UI bolt.diy sau khi đăng nhập, nơi bạn có thể chọn model mặc định và nhà cung cấp.

Nhờ kiến trúc modular, bạn có thể thêm provider mới bằng cách tuân theo convention sẵn có, đảm bảo lỗi API được xử lý và có docs rõ ràng.

Quy trình làm việc tối ưu với bolt.new/bolt.diy

Dù dùng cloud hay self-host, workflow hiệu quả thường gồm 5 bước:

1. Viết prompt ban đầu thật rõ

Tài liệu chính thức nhấn mạnh: càng mô tả rõ stack, framework, thư viện, càng dễ để Bolt scaffold project đúng ngay từ đầu (React, Next.js, Astro, Tailwind, shadcn/ui,…). Bạn có thể dùng nút “Enhance prompt” để AI giúp refine prompt trước khi gửi.

Ví dụ prompt: “Tạo web app quản lý task với React + Tailwind, có CRUD, filter theo trạng thái, auth cơ bản và lưu dữ liệu bằng Supabase.”

2. Để AI scaffold codebase & UI

Ngay sau khi gửi, bolt sẽ:

Tạo cấu trúc thư mục + file cho dự án.
Sinh component UI, state management, routing… theo mô tả.
Chạy dev server và mở live preview trong pane bên phải IDE trên trình duyệt.

Bạn đã có một bản app chạy được chỉ sau một prompt đầu tiên.

3. Chỉnh sửa, lặp lại trong IDE

Từ đây, bạn có thể:

Chat tiếp với bolt để sửa UI, thêm feature, đổi màu, thêm responsive, v.v., nên gom nhiều yêu cầu đơn giản vào một message để tiết kiệm token.
Hoặc chỉnh code thủ công trong editor (VS Code-like) với diff, version history và Git integration để kiểm soát thay đổi chi tiết hơn.

Nếu muốn bỏ giao diện chat, bạn có thể “Open in StackBlitz” để tiếp tục code trong IDE của StackBlitz.

4. Kết nối GitHub và quản lý version

bolt hỗ trợ import/export project với GitHub, cho phép bạn push code trực tiếp hoặc mở repo sẵn có bằng URL dạng https://bolt.new/github/username/repo. Ngoài ra, bolt.diy tích hợp tính năng version control: auto commit, visual diff, revert version và cộng tác real-time.

5. Deploy 1-click lên production

Khi app đã ổn, bạn có thể deploy trực tiếp từ bolt lên Netlify, Vercel hoặc GitHub Pages chỉ với vài click và nhận live URL ngay. Một số hướng dẫn thực tế cho thấy chỉ mất vài giờ để non-coder build xong e-commerce site có tích hợp Stripe với quy trình chat-driven kiểu này.

bolt.new phù hợp với ai và use case nào?

Theo tài liệu chính thức và case study, bolt.new/bolt.diy đặc biệt phù hợp với:

Frontend / full-stack dev: Muốn bỏ qua khâu setup boilerplate, tập trung vào logic và UX, đồng thời có thể review/sửa code chi tiết.
PM, designer, marketer: Cần nhanh chóng có prototype UI/landing page/ứng dụng demo mà không phải tự dựng môi trường dev.
Team AI / tool nội bộ: Xây AI dev agent tùy biến cho team, tích hợp với GitHub, CI/CD, hệ thống nội bộ, chạy trên hạ tầng riêng thông qua bolt.diy.

Các use case điển hình gồm: CRUD dashboard, admin panel nội bộ, web marketing, docs site, demo AI agent, và MVP SaaS đơn giản – những thứ bạn muốn có “hôm nay”, không phải vài tuần nữa.

Gợi ý thực hành nhanh cho người mới

Nếu bạn lần đầu thử:

Trên cloud bolt.new:

Vào https://bolt.new, đăng nhập.
Prompt: “Create a to-do list app using React, with filters and due dates”.
Đợi AI scaffold, sau đó chỉnh UI, thêm logic bằng chat hoặc editor, rồi deploy 1-click.

Trên bolt.diy self-host:

Cài Git + Node, clone bolt.diy, pnpm install, pnpm run dev.
Vào http://localhost:5173, cấu hình API key LLM và chọn model.
Thử prompt giống bên trên, cảm nhận sự khác biệt khi dùng model/infra do chính bạn kiểm soát.

Với vài lệnh và một prompt tốt, bạn đã có một “AI web dev agent” tự build full-stack app trực tiếp từ trình duyệt – đây là điểm khiến bolt.new/bolt.diy trở thành công cụ đáng thử trong bất kỳ workflow phát triển web nào.

Duy Nghiện

Hãy làm khán giả, đừng làm nhân vật chính :)