Header Ads Widget

Đồng bộ Google AI Studio với GitHub

 Google AI Studio là một công cụ rất mạnh để thiết kế và chỉnh sửa giao diện React bằng AI. Tuy nhiên, nếu kết nối trực tiếp với repository đang phát triển, AI có thể chỉnh sửa nhiều file ngoài ý muốn, gây ảnh hưởng đến toàn bộ dự án.


Sau một thời gian sử dụng, mình chọn cách tách riêng một repository dành cho AI. Workflow này giúp mình vừa tận dụng được sức mạnh của AI, vừa đảm bảo an toàn cho source code chính.

Vấn đề khi để AI sửa trực tiếp repository chính

Ban đầu mình định kết nối Google AI Studio với repository React đang phát triển.

Tuy nhiên sau khi sử dụng, mình nhận ra một số rủi ro:

  • AI có thể chỉnh sửa nhiều file chỉ với một prompt.

  • Có thể thay đổi cấu trúc thư mục.

  • Có thể cập nhật package.json hoặc các file cấu hình.

  • Nếu AI push trực tiếp lên nhánh main sẽ rất khó kiểm soát.

  • Khi làm việc theo nhóm càng dễ phát sinh xung đột.

Đặc biệt với các dự án lớn có nhiều logic nghiệp vụ thì việc để AI ghi trực tiếp vào repository chính là khá rủi ro.

Giải pháp mình lựa chọn

Thay vì chỉ sử dụng một repository, mình tạo hai repository riêng biệt.

trang-vang-dong-y-ai
        ↑
Google AI Studio

trang-vang-dong-y
        ↑
Repository chính

Trong đó:

  • trang-vang-dong-y-ai chỉ dùng để Google AI Studio chỉnh sửa giao diện.

  • trang-vang-dong-y là repository chính để phát triển, review và triển khai production.

Nhờ vậy AI sẽ không bao giờ tác động trực tiếp đến source code chính.

Workflow làm việc

Bước 1. Google AI Studio

Google AI Studio được kết nối với repository:

trang-vang-dong-y-ai

Sau khi AI chỉnh sửa giao diện, chỉ cần Commit và Push.


Bước 2. Thêm repository AI vào project local

Trong project chính, thêm repository AI làm một remote mới.

git remote add ai git@github.com:YOUR_USERNAME/trang-vang-dong-y-ai.git

Kiểm tra:

git remote -v

Ví dụ:

origin  git@github.com:YOUR_USERNAME/trang-vang-dong-y.git
ai      git@github.com:YOUR_USERNAME/trang-vang-dong-y-ai.git

Bước 3. Lấy code AI về

Mỗi lần AI Studio chỉnh sửa xong:

git fetch ai

So sánh sự khác biệt:

git diff main ai/main

Nếu mọi thứ ổn, merge:

git merge ai/main

Sau đó đẩy lên repository chính:

git push origin main

Chỉ lấy một vài file AI chỉnh sửa

Nhiều khi AI chỉ sửa phần giao diện, mình không muốn merge toàn bộ.

Có thể lấy riêng thư mục hoặc file:

git checkout ai/main -- src/components

Hoặc:

git checkout ai/main -- src/pages

Cách này giúp mình chỉ lấy đúng những phần cần thiết.


Ưu điểm của mô hình này

  • AI không thể sửa trực tiếp repository production.

  • Có thể review toàn bộ thay đổi trước khi merge.

  • Dễ rollback khi AI sinh code không đúng.

  • Không ảnh hưởng đến các lập trình viên khác trong nhóm.

  • Dễ thử nghiệm nhiều ý tưởng giao diện khác nhau.

Khi nào không cần tách repository?

Nếu bạn chỉ làm:

  • Landing Page

  • Website giới thiệu

  • Dự án cá nhân nhỏ

thì chỉ cần:

Google AI Studio
        ↓
GitHub
        ↓
VS Code

là đủ.

Kết luận

Nếu dự án của bạn có nhiều tính năng, nhiều API hoặc sẽ phát triển lâu dài, mình khuyên nên tách riêng một repository dành cho Google AI Studio.

Repository AI chỉ đóng vai trò là nơi AI tạo và chỉnh sửa giao diện.

Repository chính vẫn là nơi bạn review, kiểm thử và triển khai production.

Việc thêm một repository không làm quy trình phức tạp hơn quá nhiều, nhưng đổi lại giúp giảm đáng kể nguy cơ AI chỉnh sửa nhầm source code quan trọng. Đây là workflow mình thấy phù hợp khi kết hợp Google AI Studio với GitHub trong các dự án React thực tế.

Nhận xét