Preview App trong Claude Code Desktop: Xem kết quả trực tiếp không cần mở trình duyệt

Video chính thức từ kênh Anthropic — "Preview your running app in Claude Code on desktop" (1m16s). Demo tính năng preview app trực tiếp trong Claude Code Desktop.

Vấn đề cũ: Context switching liên tục

Trước khi có tính năng này, workflow điển hình khi dùng Claude Code để xây app trông như thế này:

1. Nhờ Claude Code viết component hoặc sửa bug
2. Claude chạy npm run dev hoặc dev server tương đương
3. Bạn phải nhớ địa chỉ localhost (ví dụ http://localhost:5173)
4. Mở trình duyệt, gõ địa chỉ, kiểm tra kết quả
5. Thấy vấn đề, quay lại terminal Claude Code để mô tả
6. Lặp lại từ bước 1

Với những vòng lặp nhanh (hot reload mỗi vài giây), việc liên tục chuyển qua lại giữa terminal và trình duyệt tốn thời gian và làm gián đoạn tư duy. Tính năng Preview giải quyết điều này.

Preview hoạt động như thế nào

Khi Claude Code Desktop phát hiện một dev server đang chạy (dựa trên output terminal như "Server running on port 3000" hoặc "Local: http://localhost:5173"), nó tự động hiển thị một panel preview nhúng ngay trong giao diện desktop.

Panel này về cơ bản là một browser nhỏ nhúng trong app — bạn thấy app đang chạy, có thể click, cuộn, và tương tác với nó. Khi Claude Code thay đổi code và dev server hot-reload, preview cũng cập nhật tự động.

Các loại dev server được hỗ trợ

Preview hoạt động với hầu hết các dev server phổ biến:

• Vite (React, Vue, Svelte, Vanilla JS) — phổ biến nhất hiện nay
• Next.js (next dev)
• Create React App (react-scripts start)
• Nuxt.js (nuxt dev)
• SvelteKit (vite dev)
• Express/Fastify với static file serving
• Bất kỳ server nào expose HTTP trên localhost

Cách dùng Preview trong thực tế

Workflow cơ bản

Bạn không cần làm gì đặc biệt để kích hoạt Preview — chỉ cần nhờ Claude Code khởi động dev server như bình thường:

"Tạo cho tôi một landing page React đơn giản với hero section và CTA button. Chạy dev server để tôi xem."

Claude Code sẽ tạo code, chạy npm run dev, và ngay lập tức panel Preview xuất hiện bên phải giao diện. Bạn thấy landing page ngay trong cùng cửa sổ với conversation.

Vòng lặp chỉnh sửa nhanh

Đây là nơi Preview thực sự tỏa sáng. Ví dụ một session điển hình:

1. Preview hiển thị landing page vừa tạo
2. Bạn thấy màu button chưa ổn: "Đổi màu CTA button sang xanh lá #22c55e, bo tròn nhiều hơn"
3. Claude sửa CSS, Vite hot-reload, Preview cập nhật trong vòng dưới 1 giây
4. Bạn thấy ngay kết quả và tiếp tục: "Thêm animation fade-in cho hero text"
5. Cứ thế tiếp tục — không cần rời khỏi Claude Code Desktop

Debug trực tiếp từ Preview

Nếu thấy lỗi render hoặc layout issue, bạn có thể mô tả trực tiếp những gì thấy trong Preview:

"Trong Preview, tôi thấy hero image bị tràn ra ngoài viewport ở bên phải. Sửa lại."

Vì Claude Code nhìn thấy cùng Preview với bạn (nó có thể chụp screenshot từ panel), nó hiểu chính xác vấn đề mà không cần bạn mô tả chi tiết.

Preview với mobile responsive

Một tính năng hay là bạn có thể resize panel Preview để kiểm tra responsive design. Kéo edge của panel để thay đổi width, hoặc dùng các preset breakpoint:

• Desktop: 1280px (mặc định)
• Tablet: 768px
• Mobile: 375px (iPhone SE)
• Custom: Gõ bất kỳ width nào

Điều này giúp bạn kiểm tra responsive ngay trong vòng lặp phát triển mà không cần dùng DevTools của trình duyệt.

Khi nào Preview không hiện?

Preview chỉ hiện khi dev server đang thực sự chạy và accessible. Một số lý do Preview có thể không xuất hiện:

• Dev server chưa hoàn tất khởi động (thường mất 2-5 giây cho lần đầu)
• Port conflict (port đã bị chiếm bởi process khác)
• App crash ngay sau khi start (lỗi runtime)
• Backend API server không có UI (Preview chỉ dành cho web apps)

Trong các trường hợp này, Claude Code sẽ hiển thị lỗi trong terminal và bạn có thể nhờ nó debug.

So sánh với workflow truyền thống

Mẹo để dùng Preview hiệu quả nhất

• Dùng màn hình rộng hoặc dual monitor: Preview cần không gian để hiển thị đủ lớn. Trên màn hình 27"+ hoặc dual monitor, bạn có thể để conversation và preview song song thoải mái.
• Để dev server chạy suốt session: Đừng tắt dev server giữa chừng trừ khi cần. Claude Code quản lý process tự động.
• Mô tả vị trí chính xác khi báo lỗi: "Ở góc trên bên phải của card sản phẩm" tốt hơn "cái gì đó bị sai".
• Dùng Preview để validate trước khi commit: Sau khi Claude hoàn thành feature, kiểm tra kỹ trong Preview trước khi commit và deploy.

Tính năng Preview là bước tiến quan trọng trong việc biến Claude Code Desktop thành một môi trường phát triển hoàn chỉnh — nơi bạn không chỉ chat về code mà thực sự thấy và tương tác với kết quả ngay lập tức.