Chuyển đến nội dung chính

Hướng dẫn Google Antigravity: Xây dựng Bảng điều khiển Rủi ro Tài chính

Khám phá cách Google Antigravity biến prompt thành ứng dụng hoàn chỉnh. Xây dựng bảng điều khiển tài chính với Gemini 3 và kiểm thử trình duyệt do AI điều khiển.
· 12 phút đọc

Khám phá cùng AI

Google Antigravity là một IDE do agent điều khiển kết hợp các mô hình mạnh như Gemini 3 với quy trình ưu tiên agent. Thay vì tự cấu hình công cụ, terminal và phiên trình duyệt, bạn cộng tác với một agent AI có thể lập kế hoạch công việc thành các tác vụ, chạy lệnh, chỉnh sửa mã, và thậm chí tương tác với trình duyệt để kiểm thử và ghi tài liệu cho ứng dụng.

Trong hướng dẫn này, tôi sẽ đưa bạn qua cách xây dựng một Bảng điều khiển Rủi ro Tài chính Cá nhân hoạt động bằng Google Antigravity. Bạn sẽ thấy cách:

  • Cài đặt và cấu hình Antigravity với phát triển có trợ giúp của agent
  • Prompt agent để thiết lập ứng dụng Next.js, Tailwind và shadcn/ui
  • Xem xét và tinh chỉnh kế hoạch triển khai được tạo tự động
  • Để agent kiểm thử ứng dụng trên trình duyệt bằng tiện ích mở rộng Antigravity
  • Lặp tính năng như chế độ tối/sáng và gỡ lỗi với khả năng sử dụng máy tính

Kết thúc, bạn sẽ có một bảng điều khiển đa trang trực quan hóa mức độ rủi ro cho Tiết kiệm, Trái phiếu, Quỹ chỉ số và Crypto, kèm điều khiển tương tác và giao diện fintech hiện đại, được xây dựng chỉ với một prompt. Tôi cũng khuyến nghị xem hướng dẫn về Gemini 3 API và hướng dẫn Gemini 3 Flash.

Tuyên bố miễn trừ trách nhiệm: Hướng dẫn này chỉ nhằm mục đích giáo dục và không cấu thành lời khuyên tài chính; luôn tự nghiên cứu hoặc tham khảo ý kiến chuyên gia tài chính đủ điều kiện trước khi đưa ra quyết định đầu tư.

Google Antigravity là gì?

Google Antigravity là một nền tảng phát triển ưu tiên agent biến IDE của bạn thành trung tâm điều khiển cho các agent AI. Cốt lõi của nó trao cho agent quyền điều khiển đồng bộ với trình soạn thảo, terminal và trình duyệt, để chúng có thể lập kế hoạch, thay đổi mã, chạy lệnh và xác minh hành vi toàn trình từ một nơi duy nhất. 

Thay vì tự nối ghép script và công cụ, bạn mô tả kết quả mong muốn và để agent của Antigravity xử lý phần nặng. Chúng có thể:

  • Biến yêu cầu cấp cao thành kế hoạch cấp tác vụ hoặc danh sách kiểm triển khai
  • Chạy lệnh terminal để tạo dự án, cài phụ thuộc và khởi động máy chủ dev
  • Chỉnh sửa mã trên toàn workspace, từ tệp bố cục đến thành phần dùng chung
  • Dùng tiện ích mở rộng trình duyệt để mở ứng dụng, nhấp qua các luồng, và chụp ảnh màn hình hoặc bản ghi hướng dẫn dưới dạng Artifact.

Antigravity được xây dựng xoay quanh các mô hình Gemini 3 của Google, nhưng cũng hỗ trợ nhà cung cấp khác như Claude Sonnet 4.5 và GPT-OSS. Nó có hai bề mặt chính, tức là giao diện Trình soạn thảo giống IDE (nếu bạn từng dùng Cursor hoặc VS Code), và giao diện Trình quản lý Agent đóng vai trò trung tâm điều khiển cho các tác vụ chạy lâu, đa workspace. Kết hợp lại, chúng giúp bạn làm việc ở cấp độ định hướng tác vụ dễ dàng hơn trong khi agent xử lý chi tiết triển khai.

Demo Google Antigravity: Xây dựng Bảng điều khiển Rủi ro Tài chính

Trong phần này, chúng ta sẽ xây dựng một bảng điều khiển rủi ro tài chính cá nhân với Google Antigravity. Agent sẽ biến một prompt ngôn ngữ tự nhiên duy nhất thành dự án Next.js mô hình hóa các sản phẩm đầu tư khác nhau và hồ sơ rủi ro của chúng.

Kết thúc, bạn sẽ có:

  • Một bảng điều khiển đa trang cho Tiết kiệm, Trái phiếu, Quỹ chỉ số và Crypto
  • Thanh trượt tương tác cho thời hạn đầu tư
  • Giao diện tối/sáng chỉn chu
  • Hiểu biết về cách agent Antigravity lập kế hoạch, triển khai, kiểm thử và lặp trên một tính năng hoàn chỉnh

Bước 1: Cài đặt Google Antigravity

Bắt đầu bằng cách tải Google Antigravity từ trang web chính thức và chọn bộ cài phù hợp thông số máy của bạn.

Nhấp Download for MacOS (hoặc hệ điều hành của bạn), và bạn sẽ được đưa đến màn hình chọn nền tảng để chọn binary phù hợp với máy và hoàn tất cài đặt.

Download page

Trong hướng dẫn này, tôi chạy trên Mac dùng Apple Silicon, nhưng giao diện sẽ không khác trên các máy khác. 

Sau khi tải xong, thiết lập Google Antigravity như bất kỳ ứng dụng nào khác và khởi chạy.

Bước 2: Thiết lập lần đầu

Lần đầu mở, Antigravity sẽ hướng dẫn bạn qua trình hướng dẫn khởi tạo.

Bước 2.1: Chọn luồng thiết lập

Nếu bạn là người dùng thành thạo Cursor hoặc VS Code và muốn dùng cài đặt của chúng để thiết lập Antigravity, hãy chọn tùy chọn tương ứng. Tuy vậy, tôi thích bắt đầu mới, nên chọn Start fresh và nhấp Next.

Set up

Bước 2.2: Thiết lập Antigravity Agent

Tiếp theo, bạn sẽ thấy màn hình về cách dùng Agent. Cho hướng dẫn này, chọn:

  • Phát triển có trợ giúp của agent (khuyến nghị): Tùy chọn này để agent làm phần lớn công việc nhưng vẫn giữ con người trong vòng lặp để bạn có thể rà soát kế hoạch và thay đổi khi tiến hành.
  • Thực thi terminal (Tự động): Cho phép agent tự động chạy các lệnh terminal an toàn, thường quy mà không cần hỏi mỗi lần.
  • Chính sách rà soát (Agent quyết định): Để agent chọn khi nào cần sự rà soát rõ ràng của con người và khi nào có thể tự tiếp tục.
  • Dùng danh sách cho phép mặc định cho trình duyệt: Hạn chế quyền truy cập trình duyệt của agent vào tập miền và hành động an toàn đã phê duyệt sẵn để tăng bảo mật.

Nhấp Next để hoàn tất thiết lập.

Set up

Sau khi hoàn tất, bước tiếp theo là tạo một workspace cho thử nghiệm của chúng ta.

Bước 3: Tạo workspace mới

Khi thiết lập xong, bạn sẽ vào màn hình chính Antigravity. Để tiếp tục, nhấp Open Folder và tạo/chọn thư mục mới cho dự án này. ví dụ: ~/Antigravity/personal-finance-dashboard. Thư mục này sẽ trở thành ứng dụng Next.js của bạn.

Bên phải, bạn sẽ thấy bảng Agent nơi bạn có thể chọn mô hình và gửi prompt.

Set up

Bước 4: Xây dựng ứng dụng

Với workspace đã mở, chọn một mô hình (ví dụ, Gemini 3 Pro hoặc Claude Sonnet 4.5, hoặc GPT OSS 120B) trong bảng Agent. Sau đó, dán prompt sau:

Build me a Next.js app called “Personal Finance Risk Dashboard” that shows different risk profiles for Savings, Bonds, Index Funds, and Crypto, each on its own page. 
For every product, display risk level, volatility, and projected returns (with a slider for time horizon), 
and use Tailwind plus shadcn/ui to make the UI look like a polished, responsive fintech dashboard

Lưu ý: Tại thời điểm viết hướng dẫn này, tôi thử với mô hình Gemini 3 Pro (thấp) nhưng gặp một số lỗi. Tuy nhiên, bạn có thể thử mô hình phù hợp với trường hợp sử dụng của mình. 

Bạn sẽ thấy agent phản hồi như sau:

Ngay sau đó, Antigravity sẽ đề xuất một lệnh terminal để khởi tạo khung dự án. Chỉ cần nhấp Accept để cho phép agent chạy lệnh và thực hiện một vài bước nền nhằm tạo danh sách kiểm hoàn chỉnh cho ứng dụng.

Dưới đây là ảnh chụp các bước nền chạy trong terminal bên cạnh, bắt đầu với việc cài phụ thuộc.

Bạn có thể để nó chạy và theo dõi log.

Bước 5: Xem lại artifact Danh sách kiểm Tác vụ

Khi việc khởi tạo hoàn tất, agent tạo một artifact Task checklist cho toàn bộ dự án.

Mỗi phần chứa các ô đánh dấu như:

  • Khởi tạo dự án Next.js với TypeScript và Tailwind CSS
  • Thiết lập thư viện thành phần shadcn/ui
  • Trang Tiết kiệm/Trái phiếu/Quỹ chỉ số/Crypto với hồ sơ rủi ro
  • Triển khai chế độ tối, hoạt ảnh và bố cục đáp ứng
  • Kiểm thử điều hướng và chức năng thanh trượt

Khi danh sách này sẵn sàng, agent bắt đầu thực hiện từng tác vụ một. Lúc này, bạn có thể mở thanh bên Explorer để xem những gì agent đã tạo:

image7.png

Giờ bạn đã có bộ tệp Next.js, Tailwind và shadcn/ui tiêu chuẩn, sẵn sàng tùy biến cho ứng dụng này.

Bước 6: Xem xét kế hoạch triển khai

Song song với danh sách kiểm, Antigravity tạo một artifact Kế hoạch Triển khai chi tiết hơn:

Phần Cần người dùng rà soát thường gồm:

  • Cách tiếp cận thiết kế: Bao gồm chế độ tối, gradient, hoạt ảnh và thông tin thiết kế đáp ứng của ứng dụng.
  • Mô hình dữ liệu: Tham số này chứa tất cả chỉ số rủi ro, như tiết kiệm, trái phiếu, quỹ chỉ số và crypto cho ứng dụng rủi ro tài chính của chúng ta.
  • Cấu trúc ứng dụng cốt lõi: Mô tả cách các tệp bố cục chính sẽ được chỉnh sửa để thiết lập kiểu toàn cục, kiểu chữ, metadata, trang chủ và chủ đề chế độ tối.
  • Trang sản phẩm: Liệt kê các trang Next.js riêng như /savings, /bonds, /index-funds, /crypto, và thông tin rủi ro, biến động, lợi nhuận dự kiến mà mỗi trang hiển thị.
  • Thành phần dùng chung: Định nghĩa các thành phần UI tái sử dụng như thanh điều hướng, thẻ hồ sơ rủi ro, bộ tính lợi nhuận, và thẻ tổng quan sản phẩm dùng trên trang chủ và các trang sản phẩm.
  • Tiện ích và kiểu: Bao gồm tiện ích TypeScript trong lib/financial-data.ts chứa dữ liệu sản phẩm, hồ sơ rủi ro, tính toán lợi nhuận dự kiến, và hàm trợ giúp định dạng tiền và phần trăm.
  • Kế hoạch xác minh: Phác thảo cách kiểm thử ứng dụng, gồm khởi chạy máy chủ dev, kiểm tra thủ công từng trang và thanh trượt, xác nhận chế độ tối và đáp ứng, và dùng agent trình duyệt để ghi toàn bộ quy trình kèm ảnh chụp màn hình.

Chúng ta có thể điều chỉnh số liệu rủi ro nếu muốn dữ liệu thực tế hơn hoặc thêm yêu cầu bổ sung. Cuối cùng, thêm nhận xét trong các artifact Task/Implementation Plan nếu bạn muốn agent điều chỉnh hướng đi.

image12.png

Khi kế hoạch ổn, nhấp Proceed trong tab Implementation Plan. Khi làm vậy, agent sẽ bắt đầu chỉnh sửa và tạo tệp nguồn dưới thư mục src/. Nó sẽ xây dựng các trang riêng cho Tiết kiệm, Trái phiếu, Quỹ chỉ số và Crypto. 

Trong quá trình đó, nó sẽ tạo các thành phần tái sử dụng cho thẻ, thanh trượt và biểu đồ, áp dụng kiểu Tailwind và shadcn/ui trên toàn ứng dụng.

Cuối cùng, bạn sẽ thấy các Bước nền và Cập nhật tiến độ mới cho mỗi thay đổi mã.

Bước 7: Kiểm thử và xác minh 

Khi triển khai xong, Antigravity chuyển sang Kiểm thử và Xác minh. Bạn sẽ thấy một mục tiến độ mới nơi Antigravity sẽ yêu cầu dùng trình duyệt qua nút Setup hoặc Deny. Chỉ cần nhấp Setup để tiếp tục.

image6.png

Trước khi agent có thể tương tác với trình duyệt, bạn cần tiện ích mở rộng chính thức.

Truy cập Chrome Web Store và nhấp Add to Chrome.

Sau khi cài đặt, khi agent điều khiển trình duyệt, bạn sẽ thấy viền phát sáng quanh màn hình như bên dưới:

image29.png

Vầng sáng này cho biết Antigravity Agent đang chủ động dùng trình duyệt, tức là nhấp, cuộn và kiểm thử ứng dụng như một phần bước xác minh.

Bước 8: Xem lại artifact walkthrough

Khi kiểm thử hoàn tất, bạn sẽ thấy phần tóm tắt Cập nhật tiến độ cuối cùng như sau:

image10 (2).png

Artifact Walkthrough thường bao gồm:

  • Ảnh chụp màn hình của mỗi trang
  • Bản ghi phiên trình duyệt của agent khi nhấp qua ứng dụng
  • Mô tả tường thuật về những gì đã kiểm thử (ví dụ: “Đã xác minh thanh trượt trang Tiết kiệm cập nhật lợi nhuận dự kiến theo thời gian thực”)

Nếu mọi thứ ổn, nhấp Accept all để áp dụng thay đổi.

Đây là ứng dụng cuối cùng của chúng ta:

image25.png

image2 (1).png

image13.png

image28.png

image4.png

Bước 9: Chỉnh sửa bảng điều khiển

Giờ hãy lặp trên UI. Giả sử bạn muốn một nút chuyển chế độ tối/sáng ở header bảng điều khiển và thêm vài biểu đồ cho mỗi trang. Trong Task hoặc Implementation Plan, hoặc trực tiếp trong bảng Agent, bạn có thể yêu cầu:

image15.png

Antigravity sẽ:

  • Cập nhật thành phần bố cục để có nút chuyển chủ đề (nhiều khả năng dùng tiện ích chủ đề của shadcn/ui)
  • Thêm, thay hoặc xóa các thành phần biểu đồ
  • Chạy lại ứng dụng và kiểm thử nút chuyển trong trình duyệt

Giờ nhấp Submit, và cả bình luận trước đó lẫn bình luận này sẽ được triển khai.

Bước 10: Xem lại lỗi và gỡ lỗi 

Trong thực tế, bạn có thể thấy các lần rà soát thường dẫn đến nhiều lỗi, có thể do mô hình, nhưng Antigravity vẫn tiếp tục xử lý với Computer Use.

Ngay cả khi agent gặp lỗi, nó vẫn có thể:

  • Đọc thông báo lỗi trong terminal
  • Mở ứng dụng trong trình duyệt và tái hiện vấn đề
  • Chụp ảnh màn hình và bản ghi phát lại trạng thái lỗi
  • Dùng các dấu hiệu trực quan và log đó để sửa lỗi

image27.png

Bạn có thể theo dõi bằng cách mở Walkthrough hoặc kiểm tra Cập nhật tiến độ mới cho các bước gỡ lỗi.

Tại thời điểm này, bạn đã:

  • Prompt một agent để khởi tạo trọn bộ ứng dụng Next.js + Tailwind + shadcn/ui
  • Xem xét và chỉnh sửa Kế hoạch Triển khai có cấu trúc
  • Để Antigravity xử lý thiết lập, viết mã, kiểm thử và xác minh trên trình duyệt
  • Lặp UI bằng bình luận và prompt bổ sung
  • Xem agent gỡ lỗi qua khả năng sử dụng máy tính và ảnh chụp màn hình

Giờ ứng dụng cuối cùng của chúng ta đã sẵn sàng để rà soát.

Bước 11: Kết quả cuối cùng

Sau khi lặp trên nút chuyển và bố cục, bạn sẽ có ứng dụng cuối cùng nơi các biểu đồ được gỡ bỏ, và nút chuyển chế độ sáng/tối hoạt động trên toàn bộ bảng điều khiển.

Chế độ tối:

image25.png

Chế độ sáng:

image9.png

Bạn có thể xem bảng điều khiển của chúng tôi hoạt động trong video bên dưới: 

Tổng kết

Google Antigravity chuyển dịch phát triển từ việc viết mã thủ công trong trình soạn thảo sang cộng tác với một agent có thể lập kế hoạch, triển khai và xác minh các tính năng hoàn chỉnh.

Trong một quy trình, chúng ta đã thấy:

  • Lập kế hoạch: Gồm artifact Danh sách kiểm Tác vụ và Kế hoạch Triển khai
  • Thực thi: Phần lớn do Agent thực hiện qua lệnh terminal, chỉnh sửa tệp và xây dựng UI
  • Xác minh: Cần tự động hóa trình duyệt, bản ghi walkthrough và tóm tắt kiểm thử
  • Lặp: Chủ yếu là tinh chỉnh dựa trên bình luận (chế độ tối/sáng, tinh chỉnh bố cục), nơi agent làm theo ý kiến người dùng.
  • Gỡ lỗi: Cuối cùng, việc điều tra lỗi tự động thông qua sử dụng máy tính giúp gỡ lỗi dễ dàng

Giờ bạn có thể tái sử dụng cùng mẫu này cho các ứng dụng demo khác:

  • Bảng điều khiển cường độ tập luyện
  • Khám phá tiếng ồn đô thị
  • UI giao đồ ăn đầy đủ tính năng

Nếu bạn muốn học thêm về tạo AI Agent, tôi khuyến nghị khóa Building AI Agents with Google ADK.

Câu hỏi thường gặp về Google Antigravity

Google Antigravity có hỗ trợ các ngôn ngữ lập trình ngoài JavaScript và Next.js không?

Có. Dù trọng tâm ban đầu của Antigravity là các framework web như JavaScript, TypeScript, React và Next.js, nền tảng này được thiết kế để hỗ trợ quy trình đa ngôn ngữ. Các agent AI của nền tảng có thể lập kế hoạch và thực thi lệnh trên các loại dự án khác nhau, vì vậy phạm vi hỗ trợ ngôn ngữ dự kiến sẽ mở rộng theo thời gian.

Hạn mức hiện tại hoặc mô hình giá của Google Antigravity là gì?

Google Antigravity hiện đang ở giai đoạn xem trước công khai và miễn phí sử dụng. Nền tảng cung cấp hạn mức hào phóng cho các tác vụ chạy bằng Gemini 3 Pro và các mô hình được hỗ trợ khác. Các hạn mức này sẽ được đặt lại định kỳ, và chi tiết giá cho các gói trả phí trong tương lai chưa được công bố.

Antigravity đảm bảo công việc của AI agent là đúng và có thể kiểm toán như thế nào?

Antigravity tự động tạo ra các “Artifact” ghi lại từng giai đoạn công việc của agent, bao gồm danh sách tác vụ, kế hoạch triển khai, log terminal, ảnh chụp màn hình và bản ghi walkthrough trên trình duyệt. Dấu vết kiểm toán này giúp nhà phát triển xác minh và rà soát mọi bước mà agent đã thực hiện.

Nhiều agent có thể chạy song song trong Antigravity không?

Có. Antigravity cho phép người dùng tạo và quản lý nhiều AI agent đồng thời. Mỗi agent có thể tập trung vào các tác vụ hoặc workspace khác nhau (ví dụ, một agent xử lý triển khai mã trong khi agent khác kiểm thử tính năng hoặc cập nhật tài liệu), cho phép quy trình đa agent song song thực sự.

Antigravity có yêu cầu phần cứng hoặc hệ điều hành như thế nào?

Antigravity có sẵn cho macOS, Windows và Linux. Ứng dụng hoạt động tốt nhất trên hệ thống hiện đại với đủ RAM và sức mạnh xử lý cho các tác vụ có trợ giúp AI. Với macOS, khuyến nghị dùng phiên bản Monterey hoặc mới hơn, và với Windows, yêu cầu cài đặt 64-bit.

Aashi Dutt

Tác giả

Aashi Dutt

LinkedInTwitter

Tôi là Chuyên gia Google Developers trong lĩnh vực ML (Gen AI), Chuyên gia Kaggle 3x và Đại sứ Women Techmakers với hơn 3 năm kinh nghiệm trong ngành công nghệ. Tôi đồng sáng lập một startup công nghệ y tế vào năm 2020 và hiện đang theo học thạc sĩ khoa học máy tính tại Georgia Tech, chuyên sâu về học máy.

Chủ đề

AI AgentsTrí tuệ Nhân tạoMô hình Ngôn ngữ Lớn

Liên quan

Xem thêm →