- AI đang thay đổi toàn bộ vòng đời phát triển ứng dụng web, từ giai đoạn viết mã, gỡ lỗi, tối ưu hiệu suất đến cách các tác nhân AI tương tác với ứng dụng.
- Để tối ưu hóa hiệu quả của AI trong lập trình, nhà phát triển cần sử dụng "tác nhân AI" và các "skill" (plugin chuyên biệt) để thêm chuyên môn miền, tự động hóa quy trình làm việc và kiểm soát các công cụ phát triển.
- Các công cụ dành cho nhà phát triển trình duyệt hiện đã tích hợp trực tiếp AI, cung cấp khả năng chẩn đoán, giải thích lỗi (như CORS) và đề xuất cải thiện hiệu suất ngay lập tức mà không cần dùng công cụ bên ngoài.
AI Didn’t Kill the Web, It Moved in! — Olivier Leplus (AWS) & Yohan Lasorsa (Microsoft)
- Tận dụng AI Agents và Skills: Sử dụng các tác nhân AI và plugin nhẹ gọi là "skill" để mở rộng khả năng của tác nhân, cung cấp chuyên môn miền cụ thể (ví dụ:
GitHub CLI,Playwright CLI) và tự động hóa các tác vụ lặp lại trong quá trình phát triển. - Tạo Workflow Tùy chỉnh: Xây dựng các quy trình làm việc (workflow) với tác nhân AI bằng cách định nghĩa chúng trong tệp
agent.md. Điều này cho phép tự động hóa các chuỗi hành động như triển khai tính năng, quay video kiểm thử, tạo đường hầm cục bộ và gửi thông báo. - Gỡ lỗi Tự động với Chrome Dev Tools MCP: Triển khai
Chrome Dev Tools MCPđể cho phép tác nhân AI kiểm soát trình duyệt, thực hiện các hành động như điều hướng trang, điền biểu mẫu, chụp ảnh màn hình, và chạy các kiểm tra hiệu suất (Lighthouse, đoLCP,CLS). - Phân tích Hiệu suất với AI: Sử dụng tác nhân AI để chạy ứng dụng trong các điều kiện mạng khác nhau (2G, 3G, nhanh) và phân tích hiệu suất, từ đó đưa ra các gợi ý tối ưu hóa cụ thể (ví dụ: kích thước hình ảnh, tối ưu CSS/JavaScript).
- Tích hợp AI trong Trình duyệt Dev Tools: Kích hoạt tính năng "AI Innovation" trong cài đặt của trình duyệt Dev Tools để nhận giải thích lỗi tự động (như lỗi CORS, lỗi mạng 400) và các đề xuất sửa lỗi trực tiếp trong console hoặc tab Network.
- Thiết lập Thông báo và Phản hồi Tự động: Tích hợp các skill gửi thông báo (ví dụ: Telegram) vào quy trình làm việc để nhận URL kiểm thử hoặc video tính năng đã triển khai, cho phép kiểm tra nhanh chóng trên các thiết bị khác và xác nhận hoàn thành công việc.
AI model— mô hình AIintegration— tích hợpdebug— gỡ lỗiAI agent/agent— tác nhân AI / tác nhânskill— kỹ năng (plugin chuyên biệt cho tác nhân AI)workflow— quy trình làm việcChrome Dev Tools MCP(Machine Control Protocol) — Giao thức Điều khiển Máy móc của Công cụ dành cho nhà phát triển ChromeLCP(Largest Contentful Paint) — Thời gian hiển thị nội dung lớn nhấtCLS(Cumulative Layout Shift) — Thay đổi bố cục tích lũyCORS(Cross-Origin Resource Sharing) — Chia sẻ tài nguyên giữa các nguồn gốcprompt— lời nhắccontext— ngữ cảnhlocal tunnel— đường hầm cục bộ
Giới thiệu về AI trong phát triển Web
Chào các bạn, chào mừng đến với phiên này, nơi chúng ta sẽ thảo luận một chút về web và những thay đổi mà đổi mới AI gần đây đã mang lại cho chúng ta với tư cách là các nhà phát triển web. Vậy thì, hãy dành chút thời gian cho một bài thuyết trình nhanh.
Tên tôi là Yuan. Tôi làm việc với tư cách là người ủng hộ nhà phát triển tại Microsoft. Tôi cũng là GDU cho Angular, và hôm nay tôi có mặt cùng với Olivier. Vâng, tôi là Olivier. Tôi là người ủng hộ nhà phát triển tại AWS và cũng là GDB về web vào thời điểm này.
Không có gì ngạc nhiên ở đây. Tôi sẽ nói về AI, và cụ thể hơn là trong sáu tháng qua, chất lượng ngày càng tăng của các model đã thay đổi cuộc chơi cho các nhà phát triển web. Và không chỉ riêng các model, mà còn là các integration xung quanh chúng.
Vì vậy, AI hiện diện ở mọi giai đoạn của vòng đời các ứng dụng web của chúng ta, từ phát triển, tất nhiên, nhưng còn để debug (gỡ lỗi), cải thiện hiệu suất, được tích hợp nguyên bản vào các trình duyệt, và thậm chí hoàn thiện một chu trình khi các tác nhân ngày càng được nhìn thấy sử dụng các ứng dụng web của chúng ta cùng với con người, điều này cũng đòi hỏi chúng ta phải điều chỉnh các ứng dụng web của mình cho phù hợp.
Vì vậy, kế hoạch hôm nay là đề cập đến một số tiến bộ mới nhất trong tất cả các giai đoạn này: viết mã, tất nhiên, nhưng còn debug (gỡ lỗi) và tinh chỉnh các ứng dụng của chúng ta bằng cách sử dụng các API cục bộ mới đã bắt đầu xuất hiện trong các trình duyệt của chúng ta. Và cuối cùng, Olivier sẽ cho chúng ta thấy cách nâng cấp các ứng dụng web của bạn cho kỷ nguyên ứng dụng web dựa trên tác nhân (agentic web app) mới. Thật là một đoạn giới thiệu hấp dẫn.
Tác nhân AI viết mã và Skill
Vậy là năm 2026. Vấn đề không còn là liệu tôi có thể viết mã ứng dụng web của mình bằng AI hay không, mà là làm thế nào để đạt được kết quả tốt nhất từ các tác nhân AI viết mã. Tôi vẫn thỉnh thoảng nghe một số người tranh luận rằng họ không thể có được kết quả tốt với AI hoặc nó không bao giờ chính xác như họ muốn khi họ yêu cầu các tác nhân viết mã của mình. Sự thật là ngày nay, đó chủ yếu là vấn đề về các skill (kỹ năng), nhưng đừng hiểu lầm tôi. Đó là những skill mà bạn cài đặt và sử dụng với tác nhân mã hóa yêu thích của bạn.
Vì vậy, nếu bạn chưa bao giờ sử dụng chúng, các skill là những plugin nhẹ, được mô tả ở định dạng văn bản dựa trên một đặc tả mở được hỗ trợ bởi hầu hết các tác nhân viết mã ngày nay. Về cơ bản, chúng hữu ích để thêm chuyên môn miền cho một điều gì đó rất cụ thể vào trường hợp sử dụng của bạn, vào những gì bạn đang phát triển. Những capability (khả năng) mới không được tích hợp sẵn vào các tác nhân của bạn sẽ được tìm hiểu thêm một chút, đặc biệt nếu bạn cần tùy chỉnh chúng. Và một điều cũng rất quan trọng trong kỷ nguyên các tác nhân viết mã này là thực hiện các workflow (quy trình làm việc) có thể lặp lại. Vì vậy, chúng ta sẽ xem một bản demo nhanh về tầm quan trọng của nó đối với bạn.
Demo: Triển khai tính năng với Tác nhân AI
Vậy thì, chuyển sang VS Code của tôi.
Hãy bắt đầu với một điều gì đó rất đơn giản. Và thực ra trước khi chuyển đến mã, hãy để tôi chỉ cho bạn một ứng dụng mẫu mà chúng tôi đã xây dựng, sẽ được sử dụng cho hầu hết các bản demo của chúng ta hôm nay. Nó là tên một con sông của Pháp, chỉ là để có một trang web thương mại điện tử làm ví dụ. Ở đây chúng ta có một trang sản phẩm với mô tả, một số đánh giá, khả năng thêm đánh giá của bạn, giống như có một số ví dụ cho tất cả các bản demo của chúng ta. Và trong sản phẩm này, tôi muốn thêm một cái gì đó mới.
Vì vậy, hãy thử một lời nhắc rất đơn giản: tôi chỉ yêu cầu xem xét các issue đang mở trong repo và yêu cầu tác nhân viết mã của tôi triển khai issue đầu tiên. Vì vậy, nó sẽ mất khá nhiều thời gian. Trong khi chờ đợi, tôi sẽ phải cho bạn thấy điều gì sẽ xảy ra đằng sau hậu trường. Như bạn có thể thấy, tôi không yêu cầu cụ thể sử dụng gì. Tôi có thể thấy nó đã cố gắng chạy GitHub CLI. Hãy chuyển sang cho bạn xem GitHub.
Về cơ bản, đây là repo cho ứng dụng này. Tôi đã tạo một issue là thêm một trang liên hệ. Vì vậy, tôi chỉ đang mô tả những gì tôi muốn thấy trong trang liên hệ này cho trang web của mình. Và về cơ bản, khi tôi yêu cầu triển khai issue đang mở đầu tiên, nó sẽ sử dụng GitHub CLI để kéo thông tin đó và hiện đang cố gắng triển khai nó.
Giải thích về Skill
Tôi đã đề cập đến các skill. Vì vậy, nếu tôi xem trong repo của mình, bên trong thư mục .agent/skills, tôi có thể thấy mình có một vài skill. Và bạn đã thấy nó sử dụng GitHub CLI để truy cập issue. Đây là skill triển khai điều đó, một điều tôi đã biết là có sẵn. Nếu bạn xem tệp skill.md, bạn có thể thấy rằng mỗi skill có một tên. Về cơ bản, nó khớp với tên thư mục. Nó có một mô tả nằm ở phần quan trọng, nơi các skill về cơ bản không phải lúc nào cũng được tải vào các tác nhân viết mã của bạn. Nó về cơ bản được tập hợp tùy thuộc vào những gì cần thiết để triển khai tác vụ hiện tại. Vì vậy, mô tả ở đó để giải thích cho các tác nhân viết mã của bạn khi nào thì nó hữu ích và khi nào các tác nhân viết mã của bạn cần lấy thông tin từ skill này vào ngữ cảnh của chúng. Và sau đó bạn có thông tin cơ bản cho skill này, giải thích GitHub CLI làm gì với rất nhiều ví dụ lệnh và cho tác nhân của bạn biết cách sử dụng nó.
Skill tùy chỉnh và Workflow
Vì vậy, bạn có thể thấy rằng tôi có một vài skill trong repo của mình. Ví dụ, tôi có một skill cho phép thiết kế front-end tốt hơn, một điều quan trọng đối với chúng ta với tư cách là các nhà phát triển web. Tôi có một skill cho phép sử dụng Playwright CLI. Ví dụ, bạn có thể thấy rằng sau này nó sẽ quay một video về tính năng đó. Hy vọng là vậy. Tôi cũng đã xây dựng một vài skill tùy chỉnh bằng cách sử dụng các skill tạo skill.
Vâng, bạn có một skill có thể giúp bạn tùy chỉnh và xây dựng skill của riêng mình, và tôi thực sự đã xây dựng hai cái: một cái tên là public tunnel có thể giúp gửi cho tôi — điều tôi muốn là về cơ bản, khi một tính năng được tác nhân viết mã triển khai, tôi muốn có thể kiểm tra nó trên điện thoại thông minh của mình. Và để làm được điều đó, tôi cần một local tunnel (đường hầm cục bộ) giữa máy phát triển của tôi và điện thoại thông minh. Để mọi thứ dễ dàng hơn, tôi muốn có thể nhận URL trực tiếp trên điện thoại thông minh của mình. Vì vậy, tôi đã xây dựng skill gửi Telegram này và yêu cầu các tác nhân gửi cho tôi một tin nhắn kèm URL để tôi có thể kiểm tra ứng dụng trực tiếp trên điện thoại thông minh của mình.
Vì vậy, đây là workflow (quy trình làm việc) của tôi và tất cả đều hoạt động thông qua các skill, và về cơ bản, những gì tôi giải thích chỉ được mô tả ở đây trong tệp agent.md của tôi, đây là tệp tiêu chuẩn hiện được sử dụng bởi hầu hết các tác nhân viết mã. Và tôi chỉ ghi vào đó rằng mỗi khi tác nhân thực hiện một thay đổi mới cho trang web, tôi muốn nó ghi lại một đoạn video ngắn, vì vậy nó sẽ sử dụng Playwright CLI để làm điều đó, hiển thị dev server và tạo một local tunnel, sau đó gửi URL cho tôi qua Telegram, và về cơ bản, không đóng issue trên GitHub cho đến khi tôi xác nhận nó đã hoàn tất.
Nó vẫn đang chạy, tôi có thể thấy nó đã chạy Playwright CLI, chuyển sang tạo tunnel (đường hầm). Vì vậy, tôi sẽ hiển thị thông báo cho bạn khi nó hoạt động trở lại các trang trình bày ngay bây giờ. Tôi sẽ cho bạn xem khi cần thiết.
Gỡ lỗi với Tác nhân AI và Chrome Dev Tools MCP
Bây giờ chuyển sang Olivier, tôi nhường lời cho bạn để trình bày bước tiếp theo trong quá trình phát triển với các tác nhân. Vâng, hãy xem làm thế nào chúng ta có thể sử dụng các tác nhân để debug (gỡ lỗi) ứng dụng của mình. Hiện tại, hầu hết mọi người đều làm điều đó bằng cách viết các test để kiểm tra ứng dụng của bạn. Và tất cả những gì bạn có thể làm — điều mà nhiều người làm hơn — là bạn vào trang web, vào các dev tools (công cụ dành cho nhà phát triển), và bạn cố gắng làm cho nó hoạt động và mọi thứ.
Và Chrome - các Chrome dev tools (công cụ dành cho nhà phát triển Chrome) thật tuyệt vời; có rất nhiều thứ bạn có thể làm: bạn có thể kiểm soát các issue, animation, bố cục giao diện, bạn có thể xem hiệu suất, bạn có quyền truy cập vào tất cả các tool (công cụ) này. Chà, chúng ta sẽ tuyệt vời nếu một MCP tồn tại cho việc đó, giống như một tác nhân có thể gọi nó – đó chính xác là những gì Chrome MCP làm. Nếu bạn truy cập vào GitHub Chrome Dev Tool MCP ở đây, bạn sẽ có thông tin về cách cài đặt. Về cơ bản, máy chủ MCP là một server (máy chủ) chứa các tool (công cụ) có thể được gọi bởi tác nhân của bạn, và nó rất dễ cài đặt trên bất kỳ IDE, CLI nào, bất cứ thứ gì bạn sử dụng cho các tác nhân của mình.
Và đây là những gì bạn phải đặt để cài đặt Chrome Dev Tools MCP. Vì vậy, đây là những gì tôi đã làm ở đây: nếu tôi truy cập vào tệp mcp.json của mình, tôi có Chrome Dev Tool MCP của tôi.
Điều khiển trình duyệt và đo lường hiệu suất với Tác nhân AI
Bạn có thể thấy rằng trong IDE của tôi, tôi có quyền truy cập vào tất cả các công cụ này. Mọi thứ tôi có thể làm trong Chrome DevTools hoặc trình duyệt, tôi đều có thể thực hiện tại đây: nhấp, điền biểu mẫu, nhận thông báo console, các yêu cầu mạng, kiểm tra Lighthouse, điều hướng trang, chụp ảnh chụp màn hình, thay đổi kích thước trang, và mọi thứ khác. Vì vậy, tôi có thể làm mọi thứ từ đây.
Ví dụ, nếu tôi có tác nhân của mình ở đây, khi tôi mở cửa sổ tác nhân và hỏi: "Bạn có thể chạy ứng dụng và xem trang chính hoạt động như thế nào trong trình duyệt Chrome không?" Nếu tôi làm vậy, nó sẽ kiểm tra các tệp Markdown và mọi thứ khác. Sau đó, nó sẽ nói: "Để chạy ứng dụng, tôi cần khởi động nó." Vì vậy, nó sẽ xem xét tệp package.json của tôi. Đó chỉ là một tác nhân cơ bản đang thực hiện công việc của mình: mở một cửa sổ dòng lệnh, chạy ứng dụng. Và bây giờ để kiểm tra, nó sẽ cần mở Chrome, đó là lúc nó sẽ gọi công cụ MCP ở đây. Nó sẽ nói: "Được, tôi có thể điều hướng đến một trang, tôi có thể liệt kê một trang." Tôi biết nó đang mở Chrome, tôi không chạm vào bất cứ thứ gì. Bạn có thể thấy đó là Chrome đang được điều khiển bởi phần mềm kiểm thử tự động. Vậy bây giờ nó đã mở Chrome và sẽ kiểm thử nó. Tôi có thể chạy hoặc kiểm thử. Bây giờ tôi xem liệu nó có thể chụp một vài ảnh chụp màn hình không. Lời nhắc của tôi ở đây rất cơ bản; tôi chỉ yêu cầu nó kiểm thử trang chính. Và thế là nó đang thực hiện, có một ảnh chụp màn hình mới và liệt kê nó.
Sau đó, bạn có thể làm mọi thứ bạn muốn. Bạn có thể nói: "Được rồi, tôi muốn làm điều gì đó khác. Tôi muốn... hãy tắt nó đi. Tôi không cần bạn nữa." Tại đây, tôi có thể nói: "Hãy mở một cửa sổ mới và chạy ứng dụng trong mạng internet 2G, 3G và mạng nhanh, sau đó xem hiệu suất của ứng dụng và nó bị chậm ở đâu."
Phân tích hiệu suất ứng dụng với Tác nhân AI
Mục tiêu bây giờ là kiểm soát Công cụ dành cho nhà phát triển Chrome, bao gồm cả điểm mạng (network point) và hiệu suất. Hãy xem xét lại; điều này có lẽ rất cơ bản, vì vậy bạn có thể cụ thể hơn. Hãy dành một phút để xem nó sẽ thực hiện những gì. Đôi khi tôi không yêu cầu, nhưng nó đôi khi lại rất chung chung, như ảnh chụp màn hình hoặc tệp JSON của báo cáo.
Được rồi, nó đang khởi chạy ứng dụng, nó đang điều hướng đến đó. Và bạn có thể thấy rằng kiểm thử đầu tiên, nó sẽ sử dụng điều đó để biết hiệu suất thực sự của việc bắt đầu theo dõi (start trace) để kiểm thử trên mạng internet nhanh. Điều đó tốt, nó đã giữ nguyên baseline (đường cơ sở). Nó sẽ thực hiện phân tích. Bạn có thể thấy rằng mỗi khi bạn gọi công cụ, bạn có thể thấy các lệnh gọi công cụ với các chi tiết. Vậy bây giờ nó nói trên 3G nhanh. Hãy nhớ tôi đã kiểm thử 3 tốc độ kết nối khác nhau và hãy đợi thêm một phút nữa. Nó mô phỏng việc bắt đầu theo dõi hiệu suất. Được rồi, nó đã thực hiện phân tích và sau đó nó sẽ thực hiện cái cuối cùng, hy vọng là vậy.
Được rồi, tôi có thể xem liệu nó có tham gia kiểm thử như một báo cáo cuối cùng không. Đôi khi nó làm, đôi khi không, tùy thuộc vào việc tôi có yêu cầu hay không. Vì vậy, hãy xem nó đã đưa ra những gì. Được rồi, và tôi thấy cửa sổ của tôi ở đây. Nó không mở Công cụ dành cho nhà phát triển Chrome, nhưng nó đang sử dụng công cụ đó trong nền để phân tích hiệu suất. Được rồi, kích thước ảnh SP và stand size. Được rồi, hãy đợi vài giây để xem nó đang làm gì; nó đang kiểm tra hình ảnh. Vì vậy, nó chắc hẳn đã nhận thấy có điều gì đó chúng ta có thể tối ưu hóa với hình ảnh. Tôi đoán nó đang kiểm tra kích thước của nó; nó đang phân tích mã nguồn.
Thông thường nó không đi xa đến mức phân tích mã nguồn. Vì vậy, tôi sẽ cho nó khoảng 15 giây nếu nó tiếp tục. Được rồi, bây giờ thì xong rồi. Bạn có thể thấy nó cho phép mọi thứ và có thể cung cấp cho bạn tất cả các báo cáo này. Đối với mỗi tốc độ kết nối internet, tôi có LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), độ trễ đường dẫn quan trọng (critical path latency) và tiết kiệm chặn ngẫu nhiên (random blocking saving). Sau đó, nó đưa ra một số hướng dẫn: hình ảnh tai nghe quá lớn, vì vậy 3G không tốt. Nó đưa ra các cách để cải thiện điều đó, bạn có thể đặt mức độ ưu tiên cao (priority high), bạn có CSS tĩnh (silence CSS), một số vấn đề trong JavaScript. Bạn có thể đặt một số tải trước (pre-load) cho một số JSON. Vì vậy, bạn có tất cả những thứ này mà bạn có thể thử nghiệm để cải thiện ứng dụng của mình.
Tích hợp thông báo và quy trình làm việc
Bạn có tin tức gì về thông báo và bản demo của bạn không? Hãy cùng xem. Vâng, tôi không nhận được gì cả. Bạn có thể kiểm tra, đôi khi tác nhân bị kẹt. Nó đã thất bại vì không thể tìm thấy mã thông báo. Vâng, tôi có một tệp .env. Tôi không chắc tại sao đôi khi nó không tìm thấy được. Tôi có một tệp .env, hãy sử dụng nó và thử lại. Vâng, đôi khi các tác nhân hoạt động, đặc biệt trong các bản demo, bạn biết đấy, tệp .env là dành cho ứng dụng nhắn tin của bạn, đúng vậy. Vì vậy, nó biết kênh nào cần sử dụng để gửi tin nhắn Telegram cho tôi. Vâng, được rồi, chúng ta hãy tiếp tục và quay lại vấn đề đó sau.
Được rồi, ồ, và đó chỉ là cách nó thông báo. Để tôi cố gắng cho bạn xem. Vâng, tôi đã nhận được thông báo. Vâng, tôi đã nhận được thông báo trên điện thoại thông minh của mình, vì vậy tôi sẽ mở nó để bạn có thể xem. Vâng, bạn có thể thấy, cố gắng lấy nét vào đó. Vâng, bạn có thể thấy ở đây một bản xem trước của video hiển thị tính năng nó đã ghi lại. Tôi sẽ mở liên kết để chúng ta có thể xem giao diện của trang liên hệ mà nó đã tạo. Và vâng, đây trông giống như một trang liên hệ tuyệt vời. Vâng, tôi cũng có thể cho bạn xem vì tôi có nó đang chạy ở đó. Bạn có thể thấy bây giờ chúng ta có trang liên hệ này. Vâng, về cơ bản, nó đã hoàn thành công việc và tôi có thể kiểm thử nó và xem video. Đây là một tính năng rất đơn giản, nhưng bạn có thể thấy nó có thể hữu ích cho các tính năng phức tạp hơn và về cơ bản cho phép bạn xem xét mọi thứ trực tiếp từ điện thoại thông minh của mình, và thậm chí không cần chạy bất cứ thứ gì trong trường hợp xem video, chỉ để có thể kiểm thử nó. Nếu bạn muốn gửi nó, tôi đã gửi nó cho chính mình bằng Telegram, nhưng bạn có thể chọn gửi nó cho đồng nghiệp của mình hoặc bất cứ điều gì khác mà bạn có thể tưởng tượng trong quy trình làm việc của mình. Vâng, điều đó thực sự tuyệt vời.
Tận dụng AI trong Công cụ dành cho nhà phát triển trình duyệt
Chuyển sang điều thú vị tiếp theo. Chúng ta đã thấy với Olivier rằng Công cụ dành cho nhà phát triển của bạn có thể được kiểm soát trực tiếp bởi các tác nhân thông qua MCP. Nhưng bạn có biết rằng bạn cũng có thể sử dụng AI trực tiếp trong Công cụ dành cho nhà phát triển trình duyệt của mình không? Bạn có thể nhận được mọi loại thông tin chi tiết trực tiếp từ đó, từ trình duyệt của mình để giúp bạn chẩn đoán và khắc phục sự cố.
Thay vì chỉ mô tả tất cả những điều bạn có thể làm, hãy để tôi thực sự trình bày cho bạn xem. Vì vậy, quay lại trang web, chúng ta sẽ chuyển sang trang "Giới thiệu" chẳng hạn. Hãy mở Công cụ dành cho nhà phát triển để chúng ta có thể thấy có một lỗi. Điều đầu tiên, nếu bạn muốn có tất cả các tính năng AI mới hữu ích, bạn phải vào cài đặt của Công cụ dành cho nhà phát triển và đảm bảo rằng trong tab Đổi mới AI (AI Innovation), bạn đã bật bất kỳ tính năng nào. Nó không được bật theo mặc định, bạn phải tự làm điều đó nếu muốn nhận hỗ trợ AI này.
Một khi bạn đã làm điều đó, ví dụ ở đây bạn có thể thấy tôi có một lỗi phổ biến trong console nói rằng một số yêu cầu đã bị chặn bởi chính sách CORS. Và bạn có thể thấy biểu tượng nhỏ này ở đó; tôi có thể trực tiếp nhấp vào nó để nhận giải thích bằng AI về lỗi này, và thậm chí là một bản sửa lỗi được đề xuất: tại sao lỗi này xảy ra và phải làm gì để khắc phục nó. Vì vậy, trực tiếp trong console của bạn, bạn không cần phải sao chép-dán lỗi bằng cách đó và gọi GenSort hay ChatGPT tùy thuộc vào công cụ bạn đang sử dụng; nó trực tiếp ở đó, bên trong Công cụ dành cho nhà phát triển của bạn. Và bạn có thể thấy nó khá toàn diện và cung cấp cho bạn đủ loại gợi ý để cố gắng khắc phục sự cố.
Gỡ lỗi mạng và tối ưu hóa hiệu suất với AI
Vậy hãy thử xem nó có thể hữu ích ở những nơi nào khác. Ví dụ, trong tab Mạng (Network), hãy tải lại trang. Bạn có thể thấy một trong những yêu cầu bị lỗi có lỗi 400. Một lần nữa, chúng ta có biểu tượng Gỡ lỗi với AI (Debug with AI). Vì vậy, tôi sẽ nhấp vào nó và có thể thấy rằng yêu cầu bị lỗi của tôi đã được thêm vào giao diện trò chuyện này. Và tôi có thể hỏi, ví dụ, tại sao yêu cầu lại bị lỗi. Vì vậy, tôi có một loại trò chuyện tích hợp với AI có thể trực tiếp truy cập ngữ cảnh của ứng dụng đang chạy của tôi ngay từ Công cụ dành cho nhà phát triển.
Một lần nữa, nó đang phân tích tại sao yêu cầu này lại bị lỗi và đưa ra cho tôi một số gợi ý về những gì tôi có thể thử để khắc phục điều đó. Được rồi, nó nói với tôi rằng đó là yêu cầu không hợp lệ (bad request), rất có thể vì đó là một endpoint cũ không còn tồn tại nữa. Vâng, tôi nghĩ điều đó khá tuyệt khi bạn có thể làm trực tiếp từ Công cụ dành cho nhà phát triển bên trong trình duyệt của mình.
Bạn có thể làm đủ loại thứ thú vị khác, chẳng hạn như, để tôi chuyển sang GitHub chẳng hạn. Điều này sẽ có ý nghĩa hơn với điều đó. Tôi chuyển sang tab Hiệu suất (Performance). Lần này, tôi sẽ nhấp vào nút làm mới ở đó, vì vậy nó sẽ thu thập một số thông tin chi tiết về trang web, chẳng hạn như mất bao lâu để chạy các thứ khác nhau và một số số liệu về nó. Vì vậy, tôi có trace này, nó hơi giống với loại kiểm thử mà Olivier đã làm trước đó với máy chủ công cụ Dev MCP.
Ví dụ, tôi có thể mở phân tích LCP (LCP breakdown). Và một lần nữa, bạn có thể thấy tôi có các nút Hỏi AI (Ask AI) này. Vì vậy, tôi có thể hỏi nó, sử dụng trace mà tôi vừa ghi lại trên trang web GitHub, để giúp tôi tối ưu hóa điểm LCP của mình. Khi chạy nó, nó sẽ phân tích tất cả trace từ trang web và nói với tôi: "Được rồi, LCP (Largest Contentful Paint) cho trang này lần này là ổn." Và về cơ bản, điều gì đang gây ra hầu hết độ trễ, bởi vì đó là một số thứ và ồ, tôi không thể thấy điều tra xung quanh vấn đề chặn. Đôi khi nó chi tiết hơn, đôi khi không. Một lần nữa, đây là AI. Vì vậy, vâng, nó có thể cho tôi một vài gợi ý về những gì tôi cần tối ưu hóa. Mọi lúc nó đều nói với tôi rằng hầu hết là do CSS. Và vâng, bạn có thể nhận được một số gợi ý nếu bạn không chắc nên bắt đầu từ đâu, ví dụ để tối ưu hóa hiệu suất trên trang web của mình.
Sửa đổi mã nguồn trực tiếp với AI
Nhưng nó có thể làm được nhiều hơn thế. Hãy quay lại trang web của chúng ta. Lần này, tôi sẽ chọn ví dụ này về các phần tử (elements) "send", ý tôi là CSS. Bạn có thể thấy, vâng, đây là H1 này. Vì vậy, ở đây tôi đang điều hướng DOM, và bạn có thể thấy một lần nữa tôi có các nút Gỡ lỗi với AI (Debug with AI). Khi chọn nó, bạn có thể thấy rằng nó đã thêm phần tử H1 cụ thể này vào ngữ cảnh và tôi có thể hỏi điều gì đó. Ví dụ, hãy nói rằng tôi muốn thay đổi tiêu đề nhàm chán này và làm cho nó có gradient đẹp mắt. Vì vậy, tôi sẽ chỉ nói với nó rằng hãy làm cho CSS văn bản đó có gradient đẹp mắt và tôi muốn nó phù hợp với chủ đề màu sắc hiện có vì tôi đã sử dụng một số biến CSS (CSS variables). Vâng, vậy hãy tiếp tục. Tôi đồng ý rằng trang có thể được sửa đổi, và vâng, bạn có thể thấy tôi có các gradient rất đẹp, phù hợp với tất cả các màu khác mà tôi có trên trang web của mình.
Và bạn có thể thấy một điều thú vị hơn nữa, bởi vì từ đó tôi vừa sửa đổi CSS trực tiếp (live CSS) trên trang web, nhưng điều có thể hữu ích hơn là trực tiếp sửa đổi mã nguồn, bởi vì ở đây tôi chỉ đang thực hiện các thay đổi không vĩnh viễn. Vì vậy, bạn có thể thấy tôi có tab Thay đổi không an toàn (unsafe change) ở đó với CSS đã được thêm vào trang web của tôi. Tôi có thể thử áp dụng thay đổi đó trực tiếp vào mã nguồn của mình bằng cách sử dụng áp dụng vào không gian làm việc (apply to workspace). Về cơ bản, nó sẽ yêu cầu bạn thêm thư mục nguồn của mình vào Công cụ dành cho nhà phát triển và nó sẽ cho phép Công cụ dành cho nhà phát triển trực tiếp thực hiện sửa đổi CSS này trở lại tệp mã nguồn của bạn.
Vì vậy, nó không chỉ có thể thực hiện sửa đổi trực tiếp trên DOM CSS và JavaScript của bạn mà còn có thể áp dụng lại những thay đổi đó vào mã nguồn gốc của bạn. Tôi nghĩ điều này rất thú vị, đặc biệt là với tư cách là một nhà phát triển web, tôi thường phải vật lộn với CSS hầu hết thời gian, phải không Olivier? Vâng, và sau đó tôi đã nghĩ, bạn thực hiện rất nhiều thay đổi trên Công cụ dành cho nhà phát triển Chrome và sau đó bạn không nhớ dòng nào bạn phải sao chép-dán vào tệp CSS của mình, và sau đó bạn lại không tìm thấy nó nữa vì sau đó chúng ta làm mới. Dù sao thì, tất cả chúng ta đều đã trải qua điều đó. Vâng, tôi thấy điều đó rất thú vị. Nó cũng giảm thiểu sự qua lại mà bạn đôi khi phải có giữa trình duyệt của mình khi gỡ lỗi, điều chỉnh CSS và các tác nhân viết mã của bạn, bởi vì về cơ bản bạn có mọi thứ ở một nơi.
Tích hợp AI vào ứng dụng
Vậy bây giờ chúng ta đã thấy cách viết mã, cách gỡ lỗi với AI, hãy xem cách chúng ta có thể đưa AI vào ứng dụng của mình. Bạn có thể đã sử dụng một số Giao diện lập trình ứng dụng AI (AI API) từ nhà cung cấp AI hoặc nhà cung cấp đám mây, nhưng điều đó yêu cầu thực hiện một số cuộc gọi trên internet, thường là phải trả tiền cho nó, sử dụng một số mã thông báo và mọi thứ.
Các API AI trực tiếp trong trình duyệt
Điều tốt là có một Giao diện lập trình ứng dụng (API) mới, hiện đang ở dạng bản nháp, được gọi là AI API, sẽ tích hợp trực tiếp vào trình duyệt. Bạn có thể thấy chúng ta có nhiều API khác nhau: summarized API, rewrite API và prompt API. Hãy cùng xem cách chúng ta có thể sử dụng chúng trong trình duyệt. Mục tiêu là có một mô hình chạy trực tiếp trên máy của chúng ta, trong trình duyệt.
Ứng dụng tóm tắt đánh giá người dùng
Tôi có một ứng dụng mà bạn đã thấy. Tôi có một số đánh giá và có thể thêm các đánh giá. Bạn có thể đã thấy trên một số trang web hiện nay rằng họ cung cấp bản tóm tắt của tất cả các đánh giá, vì vậy hãy xem cách chúng ta có thể triển khai điều đó. Tôi sẽ chuyển đến phần mã của mình. Tôi có ba việc khác nhau mà chúng ta sẽ làm. Việc đầu tiên là tóm tắt. Tôi muốn khi tôi nhấp vào nút này, nó sẽ cung cấp cho tôi bản tóm tắt tất cả các đánh giá ở đây. Hiện tại, nó không làm gì ngoài việc gọi hàm này. Vì vậy, hãy bắt đầu bằng cách kiểm tra, bởi vì không phải tất cả các trình duyệt đều có API đó. Hãy xem trình duyệt của tôi có nó không.
Sau đó, tôi sẽ tạo một bộ tóm tắt (summarizer) như summarizer.create mà tôi sẽ cung cấp một số tùy chọn. Loại ở đây, key point (điểm chính), là loại mặc định. Nếu bạn xem tài liệu, bạn có thể thấy có nhiều loại khác nhau: TLDR, TZR, key points, headline. Đối với mỗi loại, bạn có thể chỉ định một độ dài khác nhau (kích thước câu hoặc từ), vì vậy bạn có thể quyết định loại nào bạn muốn sử dụng. Cung cấp ngôn ngữ đầu vào dự kiến của các đánh giá của tôi và ngôn ngữ đầu ra dự kiến (đây là một mảng, vì vậy bạn có thể có nhiều ngôn ngữ đầu ra).
Tôi sẽ cung cấp ngữ cảnh. Tôi nói: "Được rồi, đây là các đánh giá cho một bài viết. Bạn cung cấp dưới dạng JSON được chuỗi hóa (JavaScript Object Notation), hãy cho tôi một bản tóm tắt về những gì mọi người nghĩ." Sau đó, tôi sẽ cung cấp một màn hình giám sát (monitor). Hàm monitor này ở đây để giám sát việc tải xuống mô hình. Cách API này hoạt động là nó sẽ tải mô hình xuống máy tính của bạn. Nó sẽ chỉ tải xuống một lần, điều này tốt vì hiện tại nó chiếm bốn gigabyte. Nhưng khi hoàn tất cho mỗi trang web, nếu máy tính của bạn cần dung lượng lưu trữ (ví dụ: dung lượng lưu trữ của bạn đang cạn kiệt), Chrome sẽ xóa nó. Nhưng theo mặc định, nó sẽ giữ lại.
Vì vậy, tôi có màn hình giám sát này. Sau đó, những gì tôi sẽ làm là gọi nó. Tôi sẽ tóm tắt hoặc hoàn thành tóm tắt (done summarize) và cung cấp dữ liệu cho nó. Sau đó, hãy trả về bản tóm tắt, hoặc tôi sẽ chỉ trả về kết quả của những gì tôi sẽ làm ở đây. Được rồi, bây giờ hãy xem chúng ta có gì ở đây. Quay lại đây, tôi sẽ nhấp vào tóm tắt. Điều gì đang xảy ra là, được rồi, nó đang làm điều gì đó với mô hình, vì vậy nó đang chạy lại hàm, và nó sẽ cho tôi kết quả trong giây lát. Bạn có thể thấy rằng mô hình đã được tải xuống cho tôi, vì vậy nó chuyển từ 0% đến 100% trực tiếp vì tôi không phải tải xuống lại.
Và bạn có thể thấy ở đây, tôi có bản tóm tắt tất cả các đánh giá của mình: "Khách hàng thường khen ngợi tai nghe vì chất lượng âm thanh và thời lượng pin của chúng..." Để điều này hoạt động, bạn phải kích hoạt một số flag trên Chrome. Chỉ cần tìm kiếm "AI" thường xuyên, và bạn sẽ tìm thấy nó. Giống như Jamie Jamie 9 có prompt API, proofreader API, writer API, rewriter (bất cứ thứ gì). Chỉ cần kích hoạt chúng để bạn có thể sử dụng chúng trong ứng dụng của mình. Ở đây, bạn cũng có các on-device intervals này trên Chrome. Bạn có thể thấy một vài điều: bạn có thể tải một mô hình, hoặc tải mô hình âm thanh, và sau đó bạn có thể nói chuyện với nó. Bạn có thể thêm hình ảnh hoặc thử nghiệm với top-k temperature. Bạn có thể thấy tất cả các event logs (nhật ký sự kiện). Vì vậy, đây là các event logs của những gì tôi vừa làm với hàm tóm tắt. Bạn có thể thấy trạng thái mô hình của việc có bao nhiêu mã thông báo đã được sử dụng cho mỗi cuộc gọi API. Vâng, đây là một cách tốt để gỡ lỗi.
Sửa lỗi chính tả với Proofreader API
Bây giờ, hãy cùng xem một Giao diện lập trình ứng dụng (API) khác. Tôi sẽ xem xét bộ kiểm tra lỗi chính tả (proofreader). Quy trình tương tự: kiểm tra xem tôi có quyền truy cập vào API hay không. Tôi đang tạo một proofreader. Màn hình giám sát (monitor) cũng vậy; tôi chỉ giám sát xem nó có tải xuống mô hình hay không. Sau đó, tôi sẽ nói: "Được rồi, tôi sẽ cung cấp cho bạn danh sách ngôn ngữ ngữ cảnh dự kiến." Ở đây, tôi sẽ nói: "Được rồi, đây sẽ là tiếng Anh," bởi vì tôi muốn nó sửa lỗi. Và sau đó tôi đang lập trình proofreader và trả về proofreader. Vì vậy, điều này hữu ích để khắc phục các vấn đề chính tả.
Giả sử tôi có bài đánh giá của mình ở đây, và tôi viết: "This is is a very good article." Tôi sẽ nói, ví dụ, lower. Được rồi, ví dụ, tôi chạy cái này, và nếu tôi rời khỏi vùng tập trung, bạn có thể thấy ở đây tôi đang lập trình API sẽ thực hiện phân tích của bạn. Bạn có thể thấy rằng nó đã sửa đúng thành: "This is a very good article." Vì vậy, tất cả các lỗi tôi đã mắc phải, bạn có thể thấy rằng nó đã thay đổi chúng. Và thực ra, nếu tôi (giả sử chúng ta có thời gian, vâng, hãy để tôi in nó ra) nếu tôi in nó ra bảng điều khiển (console), được rồi, vâng, nó tệ, "This is good products," một lần nữa, tôi thực sự đang nghĩ về nó, và bạn có thể thấy rằng nó đã sửa lại. Và bạn có thể thấy rằng nó cũng cung cấp cho tôi kết quả đã sửa và tất cả các sửa đổi với "and starting next" và "in next" và "waiting." Vì vậy, bạn thậm chí có thể có các đề xuất sửa lỗi nếu bạn muốn trên đầu vào của mình.
Đây là hai ví dụ. Tôi sẽ để bạn làm cái hay ho, bản demo thú vị đó. Vâng, hãy thêm vào. Vậy, những gì Olivier đã cho bạn thấy về cơ bản là một API rất tập trung cho tóm tắt và sửa lỗi chính tả. Nhưng chúng ta cũng có quyền truy cập vào các API tổng quát hơn, chẳng hạn như API mà bạn có thể đã sử dụng, ví dụ, nếu bạn đang sử dụng OpenAI API hoặc bất kỳ nhà cung cấp AI nào bạn đang sử dụng, để về cơ bản chỉ cần gửi lời nhắc của bạn.
Prompt API đa phương thức và tạo đánh giá tự động
Vì vậy, chúng ta có API tạo mô hình ngôn ngữ này. Bạn có thể thiết lập loại đầu vào dự kiến mà bạn có vì bạn có thể đặt nó là văn bản. Trong trường hợp của chúng ta, tôi muốn có thể gửi hình ảnh. Bạn cũng có thể có âm thanh làm một kiểu (type), vì vậy nó là đa phương thức (multimodal). Bây giờ tôi đã có ở đây, bạn về cơ bản xây dựng lời nhắc tổng quát của mình. Điều tôi muốn làm là tự động viết một bài đánh giá chỉ dựa trên một hình ảnh mà tôi tải lên. Vì vậy, tôi nói: "Được rồi, đây là một hình ảnh của sản phẩm, và tôi muốn tạo một mô tả cho bài đánh giá để đề cập đến kết nối trong một câu và về cơ bản kể cảm nhận của bạn khi nhận sản phẩm." Và sau đó, "Tạo một tiêu đề." Tôi muốn kết quả là một đối tượng JSON với tiêu đề và nội dung đánh giá. Được rồi, đây là lời nhắc của tôi, giống như khi bạn đang cố gắng sử dụng một AI API thông thường.
Bước tiếp theo về cơ bản là chạy prompt API: session.prompt() ở đây để nhận phản hồi. Đầu vào về cơ bản là một danh sách tin nhắn. Ở đây, tôi đang sử dụng tin nhắn người dùng để gửi lời nhắc của chúng ta vào đó và hình ảnh đầu vào làm nội dung. Bạn có thể thấy bạn có thể kết hợp các loại nội dung khác nhau. Tôi muốn có một JSON làm đầu ra, vì vậy tôi cần thêm một số ràng buộc vào phản hồi. Tôi muốn nói: "Phản hồi của tôi cần tuân theo một schema cụ thể, đã chỉ định." Vì vậy, hãy định nghĩa schema ở đó. Schema chỉ là một JSON schema thuần túy. Tôi nghĩ tôi muốn một đối tượng có tiêu đề (là một chuỗi) và mô tả (cũng là một chuỗi). Và bây giờ tôi nên có mọi thứ ngoại trừ việc trả về kết quả và cũng in nó ra nhật ký.
Vì vậy, hãy kiểm tra những gì chúng ta vừa làm. Chuyển sang trình duyệt, hãy cho nó thêm một chút không gian. Vì vậy, tôi muốn thử prompt API này để về cơ bản viết bài đánh giá thay cho tôi. Vì vậy, tôi sẽ tải lên hình ảnh này. Đây là tai nghe tôi nhận được. Như bạn có thể thấy, nó ở trong tình trạng khá tốt. Vì vậy, hãy xem nó sẽ đưa ra bài đánh giá nào. Nếu tôi chọn phân tích (analyze), ồ, tôi chỉ muốn hiển thị bảng điều khiển (console) ở đó. Ồ, đó có thể là điều mới, tôi nghĩ là do tôi không chỉ định ngôn ngữ. Vâng, như bạn có thấy, Olivier luôn chỉ định ngôn ngữ mà yêu cầu được gửi. Vì vậy, đây là kết quả. Bạn có thể thấy JSON, và bạn có thể thấy rằng nó đã điền vào các trường cho tôi. "Thật tai hại, hình ảnh đã bị hỏng và đã được đặt ngay khi đến nơi, và tất nhiên, tôi đã thất vọng và bực bội khi nhận được loại sản phẩm này." Vì vậy, vâng, tôi về cơ bản có thể gửi bài đánh giá ở đó, và tôi có thể tiết kiệm thời gian bằng cách chỉ tải lên hình ảnh và để AI viết mọi thứ cho tôi.
Và một lần nữa, chỉ cần nhắc lại những gì Olivier đã nói, nhưng tất cả điều này đều sử dụng một mô hình cục bộ (local model) chạy trên máy khách (client machine), thực sự không bị động chạm trong trình duyệt. Vì vậy, không có gì và không sử dụng bất kỳ web API nào; tất cả đều nằm trong trình duyệt. Vì vậy, tôi nghĩ điều đó khá tuyệt, và đây chỉ là một ví dụ trường hợp sử dụng duy nhất về những điều bạn có thể làm. Bởi vì mô hình cục bộ này, như bạn có thể thấy, là đa phương thức: nó có thể hiểu hình ảnh, nó có thể hiểu âm thanh và văn bản, và bạn có thể làm đủ loại thứ mà không phải trả tiền cho một API bên ngoài.
Vâng, API này tôi đang thấy, ý tôi là, nếu bạn có thể chuyển sang màn hình của tôi, tôi vừa mở summarize API trên tài liệu MDN. Và bạn có thể thấy rằng nó vẫn còn rất thử nghiệm. Và bạn có thể thấy rằng thực tế, tôi chỉ cảm thấy như Opera đã ngăn chặn nó. Bạn có Chrome, Edge đang đến. Vì vậy, API vẫn đang thay đổi, và những gì chúng ta vừa thấy trên màn hình của bạn thực sự là mới. Chúng ta không có ngoại lệ ngôn ngữ này một tuần trước khi chúng ta thử nó. Vì vậy, hãy cẩn thận, các API này có thể thay đổi. Vì vậy, nếu bạn đến trang web của mình, bây giờ bạn đã biết. Vâng, rất thử nghiệm, nhưng tôi nghĩ điều đó rất thú vị cho những loại khả năng mà nó mở ra cho các nhà phát triển web. Ý tôi là, việc bạn có thể chụp một hình ảnh và đưa ra lời giải thích dựa trên hình ảnh. Chúng ta đã thấy một số bản demo picture-inary nơi bạn có một hình ảnh, và mọi người có thể vẽ trên màn hình, và sau đó bạn có thể xử lý hình ảnh và nó cung cấp cho bạn một bài trình bày. Nó có giống vậy không? Vì vậy, nó thực sự khá tuyệt mà không cần dựa vào bất kỳ đám mây nào, bất kỳ mô hình trực tuyến nào, bất kỳ mã thông báo nào bạn phải gửi, hoặc bất cứ điều gì. Khá tuyệt.
Tối ưu hóa trang web cho tác nhân AI
Quay lại slide, phần cuối cùng nhưng không kém phần quan trọng, vì điều này có nghĩa là: "Này, các tác nhân (agents) làm rất nhiều việc cho chúng ta mỗi ngày, nhưng chúng ta cũng phải làm một số việc cho chúng." Đây là lúc mà bạn, con người, thực sự cần nâng cấp các trang web của mình cho các tác nhân. Vâng, các tác nhân có khả năng duyệt web. Điều mới mẻ là bạn phải tối ưu hóa trang web không chỉ cho khả năng sử dụng của con người và SEO tốt để có thể được khám phá trong các công cụ tìm kiếm, mà bây giờ chúng ta cũng phải nghĩ về cách các tác nhân có thể tiêu thụ và sử dụng các ứng dụng web của bạn. Đó là một điều hoàn toàn mới.
Và trước tiên, chúng ta bắt đầu với một đề xuất rất đơn giản, giống như chúng ta đã có robots.txt đã được áp dụng cho các công cụ tìm kiếm đang thu thập dữ liệu web để đưa ra một số quy tắc về cách các bộ thu thập dữ liệu này điều hướng đến các trang web của bạn. Chúng ta cũng có sitemaps cho con người để cải thiện cách họ có thể điều hướng một trang web một cách dễ tiếp cận hơn. Chúng ta có đề xuất lm.txt mới này, về cơ bản là một sự kết hợp của cả hai. Nó được các tác nhân sử dụng để hoạt động như một bản đồ để khám phá nơi bạn có thể tìm thấy thông tin mà nó cần trên trang web của bạn, giống như sự kết hợp giữa robots.txt và sitemap về định dạng tệp văn bản.
Và hãy để tôi thực sự cho bạn một ví dụ. Tôi đã nói với bạn về Angular.dev, vì vậy tôi sẽ cho bạn xem lm.txt cho trang web Angular.dev. Đây là những gì bạn nhận được: bạn nhận được một tệp markdown với một loạt các liên kết. Vì vậy, về cơ bản, nếu một AI muốn tìm kiếm tài liệu, nó không cần phải duyệt qua từng trang web để cố gắng tìm thông tin mà nó cần. Ví dụ, nếu tôi muốn tìm hiểu về animation, nó về cơ bản sẽ trực tiếp hướng dẫn các tác nhân AI chuyển sang xem một trong các trang tài liệu này tùy thuộc vào những gì bạn đang cố gắng làm. Đây là lm.txt cơ bản được đề xuất, giúp các tác nhân của bạn dễ dàng hơn trong việc cố gắng tìm nội dung mà chúng cần. Nhưng nó có thể đi xa hơn một chút vì chúng ta có biến thể lm-full.txt này, nơi về cơ bản nó đưa tất cả nội dung của trang web của bạn vào một tệp duy nhất. Vì vậy, chúng ta cũng có một cái cho Angular. Cái này khá mở rộng như bạn có thể thấy thanh cuộn ở đó.
Tối ưu hóa Tác nhân AI với Dữ liệu Mới nhất
Và nếu bạn cuộn một chút bên trong đó, bạn có thể thấy rằng tôi thậm chí còn có một số ví dụ về tệp mã. Đó là toàn bộ nội dung của phiên bản Angular mới nhất được tập hợp trong một tệp văn bản duy nhất mà bạn có thể cung cấp cho các tác nhân của mình. Chẳng hạn, một trong những điều khó khăn khi đôi khi sử dụng các tác nhân lập trình là điểm kiểm tra cuối cùng của chúng được dựa trên việc sử dụng các phiên bản cũ hơn của các framework. Bởi vì, bạn không thể luôn luôn huấn luyện mô hình mới với nội dung mới, đôi khi nó có độ trễ hàng tháng hoặc hàng năm liên quan đến nội dung. Vì vậy, nó không biết cách sử dụng phiên bản mới nhất, hoàn toàn mới của framework của bạn, ví dụ như Angular.
Vì vậy, nếu bạn muốn đảm bảo rằng, ví dụ, tôi muốn lập trình một ứng dụng sử dụng tính năng mới nhất của Angular trên phiên bản mới nhất, tôi muốn đảm bảo rằng nó sử dụng tài liệu tham khảo cập nhật nhất. Tôi có thể cung cấp tệp lm-full.txt này cho tác nhân lập trình của mình để nó có tất cả thông tin cập nhật, đảm bảo rằng tôi không sử dụng các tính năng cũ từ dữ liệu huấn luyện, như các ví dụ AngularJS cũ từ 10 năm trước và những thứ tương tự. Vì vậy, điều này khá hay và hữu ích, ví dụ, để đảm bảo rằng các tác nhân có thể có thông tin mới nhất về — đây là cho một thư viện lập trình, nhưng nó có thể được áp dụng cho bất kỳ loại nội dung nào mà trang web của bạn cung cấp.
Giới thiệu Web MCP: Tương tác Trực tiếp với Tác nhân AI
Bây giờ, cuối cùng nhưng không kém phần quan trọng là Web MCP. Chúng ta sẽ chuyển sang các slide và tôi sẽ nhường lời cho Olivier về phần này, bản demo cuối cùng và thú vị mà chúng tôi có. Vâng, chúng tôi đã chuyển từ các API mang tính thử nghiệm sang các API mang tính thử nghiệm cao hơn rất nhiều. Vậy Web MCP, bạn có thể chia sẻ với người dùng được không? Vâng, Web MCP. Ý tôi là, nếu bạn muốn xem nó thử nghiệm đến mức nào, hãy truy cập trang web của Web MCP. Đây là trang web hiện tại, không có nhiều thứ.
Nhưng ý tưởng là: "Chúng ta có các tác nhân có thể duyệt web, như bạn đã đề cập, chúng truy cập và chúng lấy các LLM, những thứ mà chúng tìm thấy." Nhưng ngày càng nhiều, chúng ta đang thấy AI được nhúng vào trình duyệt của bạn, bạn có một thứ gọi là agent browser (trình duyệt tác nhân). Về cơ bản, nó sẽ duyệt web thay bạn. Và hiện tại chúng ta có một số công cụ có thể làm điều đó. Chúng sẽ mở một trình duyệt, chúng sẽ nhấp và duyệt. Nhưng cách chúng làm điều đó là chúng cố gắng bắt chước các tương tác của con người. Chúng sẽ xem trang bằng cách chụp ảnh màn hình hoặc bằng cách xem DOM dump và nói rằng: "Ồ, có một nút ở đây nói rằng tôi có thể nhấp vào nó." Lấy tọa độ, đi và nhấp vào nó. Tương tự cho một biểu mẫu. Nhưng về cơ bản, chúng đang cố gắng bắt chước hành vi của con người. Vì vậy, trang web đã được thiết kế cho con người, không phải tác nhân.
Và đây chính xác là điều mà đề xuất này đang cố gắng khắc phục. Mục tiêu của Web MCP là có một máy chủ MCP, giả sử, đang chạy trên các ứng dụng web của bạn. Bạn có quyền truy cập vào các công cụ, và chúng ta biết rằng các công cụ mà tác nhân hiểu, tác nhân có thể gọi các công cụ vì chúng có quyền truy cập vào tên và định nghĩa, và sau đó chúng muốn gọi chúng.
Demo: Tác nhân AI Tương tác với Trang Web qua Công cụ
Hãy để tôi cho bạn xem ví dụ. Tôi có ứng dụng ở đây. Một lần nữa, tôi có một nút "Thêm vào giỏ hàng" ở đây. Vì vậy, bạn có thể thấy rằng tôi có một cái gì đó như "Giỏ hàng" bây giờ. Nhưng nếu một AI mới phải làm điều tương tự, nó sẽ phải mở Chrome, cố gắng đoán rằng có một nút ở đây, lấy tọa độ và nhấp vào nút. Nhưng điều gì sẽ xảy ra nếu nó thực sự có thể truy cập vào một công cụ — một công cụ AI để gọi nó?
Vì vậy, ở đây tôi có Chrome. Chrome chưa phải là một Agentic IDE, nhưng tôi có một tiện ích mở rộng ở đây có thể hiển thị nếu tôi có bất kỳ công cụ nào trên trang của mình. Vì vậy, hãy xem làm thế nào tôi có thể đăng ký một công cụ trên trang của mình. Tôi có một tệp cart tool ở đây, chỉ đơn giản là nhập add cart — đó là hàm được gọi khi tôi nhấp vào "Thêm vào giỏ hàng" ở đây, nó chỉ thêm một cái gì đó vào giỏ hàng của tôi.
Và vì vậy, tôi sẽ tạo một công cụ. Nếu bạn nhớ, nếu bạn đang tạo một công cụ trước đây, bạn có tất cả các SDK này. Đây là cách chúng tôi đã làm. Chúng tôi sử dụng một JSON, bạn sẽ đặt tên cho nó, bạn sẽ đặt mô tả cho nó. Vì vậy, ở đây nó là một công cụ để thêm các mặt hàng vào giỏ hàng, và đặt cho nó một schema. Vì vậy, nó đang lấy một đối tượng với item (tên mặt hàng) và quantity (số lượng). Tôi không có cái đó, tôi đã dựa trên bất cứ điều gì. Chỉ là tên và số lượng. Và sau đó tôi có execute. Vì vậy, execution là một hàm sẽ chứa mã nghiệp vụ trong đó. Vì vậy, tôi sẽ lấy các đối số. Tôi đang truy xuất item và quantity. Tôi sẽ lặp lại quantity bởi vì add to cart của tôi chỉ lấy một. Nó không quản lý số lượng. Vì vậy, tôi đang di chuyển và thêm vào giỏ hàng những gì tôi có. Và tôi chỉ trả về bất cứ điều gì, chỉ nói rằng "Số lượng mặt hàng đã được thêm vào".
Và điều khác tôi sẽ làm là đăng ký công cụ của tôi. Vì vậy, tôi vào công cụ của mình và tôi đăng ký nó trên đối tượng navigator của trang của tôi. Bây giờ nếu tôi quay lại đây và làm mới, và thấy rằng tiện ích mở rộng dữ liệu của tôi ở đây, thấy rằng tôi có một item cart tool và tôi có thể gọi nó. Vì vậy, tôi có thể nói: "Được rồi, tôi muốn thêm, tôi không biết, chai nước, và tôi muốn có năm." Tôi sẽ thực thi công cụ ở đây. Về cơ bản, bạn có thể thấy rằng tôi đã làm năm chai nước, và về cơ bản, giống như một AI đã làm điều đó thay mặt tôi. Nó đang lập trình công cụ mà bạn đăng ký trên trang của tôi.
Và hãy để tôi xem, chúng ta có một chút thời gian. Tôi đang thử nghiệm nó. Tôi nghĩ nếu tôi có thể sửa trực tiếp từ IDE của mình. Vâng, tôi biết rất nhiều điều này. Hãy để tôi xem. Vâng, về cơ bản tôi thậm chí có thể làm điều đó từ đây. Vì vậy, vâng, tác nhân của tôi. Tôi có thể nói như: "Bạn biết đấy, thêm, tôi không thể đi vào xóa dev tool." Vì vậy, không có hai phương pháp. "Thêm ba, tôi không biết, ba máy tính xách tay vào giỏ hàng của tôi." Vì vậy, tôi sẽ làm điều đó. Và thông thường, nếu mọi thứ hoạt động tốt, nó sẽ gọi công cụ được đăng ký trên trang web của tôi trong Chrome của tôi. Vì vậy, hãy xem. Vì vậy, thay vì cái này, và tôi thêm vào giỏ hàng. Ồ, nó đang làm gì vậy? Nó là một công cụ tốt để tạo nội dung.
Được rồi, nó đang lập trình. Vâng, nó đang gọi công cụ add to cart với laptop quantity ba. Bạn có thể thấy ở đây nếu tôi quay lại trang web của mình bây giờ. Được rồi, xem nào, ba máy tính xách tay. Tôi chỉ có ba máy tính xách tay ở đây. Vì vậy, bây giờ tôi đã gọi nó từ một tiện ích mở rộng hoặc từ IDE của tôi. Nhưng mục tiêu sẽ là trình duyệt của bạn có thể làm điều đó cho bạn bởi vì đó là một agent type browser có thể để tôi lấy các tab và đọc cho bạn. Vì vậy, bạn có thể thấy rằng công cụ của tôi đang chạy trên trang web của tôi.
Và không có nhiều mã, nhưng thậm chí còn có một cách tốt hơn – tôi không biết liệu đó có phải là cách tốt hơn không – nhưng giả sử bạn không muốn thêm JavaScript mới vào ứng dụng của mình bởi vì bạn đang chuyển đổi và bạn chỉ muốn kiểm tra các công cụ MCP này trên ứng dụng của mình mà không thay đổi nhiều mã.
Chuyển đổi Biểu mẫu HTML thành Công cụ MCP
Vì vậy, giả sử tôi có biểu mẫu ở đây. Biểu mẫu này là để viết đánh giá. Những gì tôi có thể làm, bạn có thể nói: "Được rồi, tôi sẽ thêm một tên công cụ write review tool." Tôi sẽ đặt mô tả công cụ ở đây. Tôi sẽ nói như "thêm đánh giá vào sản phẩm." Và bằng cách làm đó, tôi đã biến biểu mẫu của mình thành một công cụ. Nó sẽ lấy tất cả các đầu vào khác nhau trong đó và sau đó biến chúng thành các đối số. Tôi thậm chí có thể làm một số mô tả tool prime – nó giống như "đánh giá sản phẩm." Vì vậy, tôi có thể thêm một số mô tả vào đó. Ví dụ, tôi có bất cứ điều gì tôi có là đầu vào ở đây, nó giống như "được rồi, mô tả tool prime," nó được gọi là "thêm tiêu đề" – ôi, "thêm tiêu đề cho đánh giá." Và tôi có thể thêm cái này, nhưng tôi không phải.
Nếu tôi quay lại đây, bạn có thể thấy rằng bây giờ tôi có "viết đánh giá" của mình, và đây là schema của nó đã được tạo. Về cơ bản, đó là điều tương tự mà chúng tôi đã có ở đây khi tôi chỉnh sửa schema thủ công. Nhưng bạn có thể thấy rằng tôi có – đâu rồi nhỉ? – công cụ của tôi. Vì vậy, tôi có cái write the product, và nó đã lấy tất cả các tùy chọn đầu vào ở đây từ một đến năm. Tôi có review title với mô tả của tôi. Tôi đã thêm "tiêu đề cho đánh giá," nhưng cũng có review text và review photo. Và nó tự động tạo ra một số mô tả. Và để làm điều đó, nó đã lấy nhãn gần nhất trên HTML của tôi. Vì vậy, nếu tôi đi đến phần "thêm ảnh," bởi vì bạn có rất nhiều nhãn "thêm ảnh tùy chọn," và đó là những gì nó đặt ở đây theo mặc định.
Hãy xem liệu điều đó có thể hoạt động không. Tôi sẽ gọi công cụ write review tool. Tôi không có ảnh. Tôi đoán họ thích "đó là tốt cho..." Hãy xem liệu tôi có thể kiểm tra không, để tôi có thể nhìn thấy nó ở đây. Tôi đoán họ thích tiêu đề "Awesome review." Tôi đoán họ thích review text "Perfect product." Và tôi sẽ thực thi công cụ. Tiktik tiktik, nó có đang làm gì không? Bây giờ nó không phải là nó không có ý định làm gì. Dù sao đi nữa. Ồ, vâng, không, không, nó phải là tiktik tiktik. À há, nó đang xảy ra. Đó là tệp của tôi. Hãy tìm nó, đã lưu.
Được rồi, hãy thử lại. "Sản phẩm tuyệt vời, tôi thích nó." Và để thực thi nó. Ồ vâng, và bạn có thể thấy rằng nó đã điền vào biểu mẫu cho tôi. Vâng, "Sản phẩm tuyệt vời" ở đây, và "Tôi thích nó." Tôi không có hình ảnh, nhưng bạn có thể có. Nhưng bạn cũng có thể nói: "Được rồi, điều này tốt vì nó đã điền vào biểu mẫu, nhưng tôi cũng muốn xác thực biểu mẫu." Vì vậy, nếu tôi quay lại biểu mẫu của mình ở đây, tôi sẽ nói: "công cụ để tự động gửi." Và bằng cách làm đó, nó sẽ vừa điền vào biểu mẫu, giả sử ba, "hoàn hảo, cũng tất cả mọi thứ." Được rồi, đừng để ý đến những lỗi sai. Và sau đó nếu tôi nhấp vào "thực thi công cụ" ở đây, nó sẽ điền vào biểu mẫu nhưng cũng xác thực biểu mẫu. Vì vậy, nó thậm chí không yêu cầu bất kỳ tương tác nào của con người. Nó sẽ điền và xác thực.
Triển vọng Tương lai: Tác nhân AI và Phát triển Web
Điều này rất thử nghiệm một lần nữa, và thực sự API đã thay đổi khoảng 10 ngày trước một lần nữa, vì vậy hãy cẩn thận. Nhưng chỉ cần biết rằng nó giống như chúng ta từng nói rằng nó giống như, bạn biết đấy, responsive design (thiết kế đáp ứng). Vào một thời điểm nào đó, bạn phải thêm trang web của mình cho thiết bị di động. Nếu bạn không làm, thì đối thủ cạnh tranh đã làm, và sau đó mọi người sẽ không truy cập trang web của bạn trên thiết bị di động. Và vì vậy, điều này cũng tương tự. Hãy đảm bảo rằng trang web của bạn sẽ được chuẩn bị khi chúng ta có tất cả các agentic browser (trình duyệt tác nhân) xuất hiện trên thị trường. Và vì vậy, bạn có thể bắt đầu thử nghiệm lại. Tôi đã nói "thử nghiệm," nhưng hãy bắt đầu thử nghiệm để bạn sẵn sàng khi chúng ta có tất cả các trình duyệt này xuất hiện. Và bản demo đã hoạt động tốt.
Vâng, tôi mong đây là một cái nhìn thoáng qua về những gì chúng ta sẽ phải làm với tư cách là các nhà phát triển web trong tương lai gần. Bởi vì vâng, các tác nhân đang đến với web rất nhanh, và tôi mong rằng đặc tả này đã di chuyển rất nhanh. Nó đã hữu ích. Vâng, nếu bạn nhìn vào trạng thái của human back, nó đã không còn sử dụng được nữa, giống như bạn đã cho thấy. Và tôi đặc biệt thích tính năng tự động nâng cấp các biểu mẫu hiện có thành các công cụ MCP bởi vì nó làm cho cuộc sống của các nhà phát triển trở nên rất đơn giản, và thậm chí các tác nhân cũng có thể triển khai điều đó cho chúng ta.
Vâng, tóm lại, những gì chúng ta đã thấy trong buổi thảo luận này về cơ bản là với AI, nó làm cho cuộc sống của các nhà phát triển web như chúng ta dễ dàng hơn, cho dù đó là viết mã, triển khai quy trình làm việc tốt hơn, gỡ lỗi – tất nhiên, rất quan trọng trong quá trình thực hiện – nhưng chúng ta cũng phải giúp các công cụ AI có thể sử dụng trang web và ứng dụng web của chúng ta tốt hơn. Hơi sớm trong quá trình này, nhưng vâng, tôi có thể bắt đầu suy nghĩ về điều đó. lm.se.txt đã được sử dụng rộng rãi ngày nay. MCP đã trở thành tiêu chuẩn. Và Web MCP đang đến cho điều lớn tiếp theo, hy vọng vậy. Vì vậy, vâng, bạn phải chuẩn bị cho điều đó, và hy vọng nó sẽ chỉ tạo ra các ứng dụng web tốt hơn cuối cùng.
Và vâng, cảm ơn bạn đã tham gia buổi thảo luận này, và chúng tôi có một mã QR ở đó với về cơ bản tất cả các tài nguyên, mã cho bản demo, và các liên kết đến các tài nguyên khác nhau mà chúng tôi đã sử dụng và cho thấy trong buổi thảo luận này. Vì vậy, vâng, và chỉ cần nếu bạn có bất kỳ câu hỏi nào, có thể liên hệ với chúng tôi trên LinkedIn. Và trong thời gian chờ đợi, chúc bạn vui vẻ. Hẹn gặp lại. Tạm biệt.
TL;DR
- AI đang thay đổi toàn bộ vòng đời phát triển ứng dụng web, từ giai đoạn viết mã, gỡ lỗi, tối ưu hiệu suất đến cách các tác nhân AI tương tác với ứng dụng.
- Để tối ưu hóa hiệu quả của AI trong lập trình, nhà phát triển cần sử dụng "tác nhân AI" và các "skill" (plugin chuyên biệt) để thêm chuyên môn miền, tự động hóa quy trình làm việc và kiểm soát các công cụ phát triển.
- Các công cụ dành cho nhà phát triển trình duyệt hiện đã tích hợp trực tiếp AI, cung cấp khả năng chẩn đoán, giải thích lỗi (như CORS) và đề xuất cải thiện hiệu suất ngay lập tức mà không cần dùng công cụ bên ngoài.
Điểm chính
- Tận dụng AI Agents và Skills: Sử dụng các tác nhân AI và plugin nhẹ gọi là "skill" để mở rộng khả năng của tác nhân, cung cấp chuyên môn miền cụ thể (ví dụ:
GitHub CLI,Playwright CLI) và tự động hóa các tác vụ lặp lại trong quá trình phát triển. - Tạo Workflow Tùy chỉnh: Xây dựng các quy trình làm việc (workflow) với tác nhân AI bằng cách định nghĩa chúng trong tệp
agent.md. Điều này cho phép tự động hóa các chuỗi hành động như triển khai tính năng, quay video kiểm thử, tạo đường hầm cục bộ và gửi thông báo. - Gỡ lỗi Tự động với Chrome Dev Tools MCP: Triển khai
Chrome Dev Tools MCPđể cho phép tác nhân AI kiểm soát trình duyệt, thực hiện các hành động như điều hướng trang, điền biểu mẫu, chụp ảnh màn hình, và chạy các kiểm tra hiệu suất (Lighthouse, đoLCP,CLS). - Phân tích Hiệu suất với AI: Sử dụng tác nhân AI để chạy ứng dụng trong các điều kiện mạng khác nhau (2G, 3G, nhanh) và phân tích hiệu suất, từ đó đưa ra các gợi ý tối ưu hóa cụ thể (ví dụ: kích thước hình ảnh, tối ưu CSS/JavaScript).
- Tích hợp AI trong Trình duyệt Dev Tools: Kích hoạt tính năng "AI Innovation" trong cài đặt của trình duyệt Dev Tools để nhận giải thích lỗi tự động (như lỗi CORS, lỗi mạng 400) và các đề xuất sửa lỗi trực tiếp trong console hoặc tab Network.
- Thiết lập Thông báo và Phản hồi Tự động: Tích hợp các skill gửi thông báo (ví dụ: Telegram) vào quy trình làm việc để nhận URL kiểm thử hoặc video tính năng đã triển khai, cho phép kiểm tra nhanh chóng trên các thiết bị khác và xác nhận hoàn thành công việc.
Từ vựng
AI model— mô hình AIintegration— tích hợpdebug— gỡ lỗiAI agent/agent— tác nhân AI / tác nhânskill— kỹ năng (plugin chuyên biệt cho tác nhân AI)workflow— quy trình làm việcChrome Dev Tools MCP(Machine Control Protocol) — Giao thức Điều khiển Máy móc của Công cụ dành cho nhà phát triển ChromeLCP(Largest Contentful Paint) — Thời gian hiển thị nội dung lớn nhấtCLS(Cumulative Layout Shift) — Thay đổi bố cục tích lũyCORS(Cross-Origin Resource Sharing) — Chia sẻ tài nguyên giữa các nguồn gốcprompt— lời nhắccontext— ngữ cảnhlocal tunnel— đường hầm cục bộ
Nội dung chi tiết
Giới thiệu về AI trong phát triển Web
Chào các bạn, chào mừng đến với phiên này, nơi chúng ta sẽ thảo luận một chút về web và những thay đổi mà đổi mới AI gần đây đã mang lại cho chúng ta với tư cách là các nhà phát triển web. Vậy thì, hãy dành chút thời gian cho một bài thuyết trình nhanh.
Tên tôi là Yuan. Tôi làm việc với tư cách là người ủng hộ nhà phát triển tại Microsoft. Tôi cũng là GDU cho Angular, và hôm nay tôi có mặt cùng với Olivier. Vâng, tôi là Olivier. Tôi là người ủng hộ nhà phát triển tại AWS và cũng là GDB về web vào thời điểm này.
Không có gì ngạc nhiên ở đây. Tôi sẽ nói về AI, và cụ thể hơn là trong sáu tháng qua, chất lượng ngày càng tăng của các model đã thay đổi cuộc chơi cho các nhà phát triển web. Và không chỉ riêng các model, mà còn là các integration xung quanh chúng.
Vì vậy, AI hiện diện ở mọi giai đoạn của vòng đời các ứng dụng web của chúng ta, từ phát triển, tất nhiên, nhưng còn để debug (gỡ lỗi), cải thiện hiệu suất, được tích hợp nguyên bản vào các trình duyệt, và thậm chí hoàn thiện một chu trình khi các tác nhân ngày càng được nhìn thấy sử dụng các ứng dụng web của chúng ta cùng với con người, điều này cũng đòi hỏi chúng ta phải điều chỉnh các ứng dụng web của mình cho phù hợp.
Vì vậy, kế hoạch hôm nay là đề cập đến một số tiến bộ mới nhất trong tất cả các giai đoạn này: viết mã, tất nhiên, nhưng còn debug (gỡ lỗi) và tinh chỉnh các ứng dụng của chúng ta bằng cách sử dụng các API cục bộ mới đã bắt đầu xuất hiện trong các trình duyệt của chúng ta. Và cuối cùng, Olivier sẽ cho chúng ta thấy cách nâng cấp các ứng dụng web của bạn cho kỷ nguyên ứng dụng web dựa trên tác nhân (agentic web app) mới. Thật là một đoạn giới thiệu hấp dẫn.
Tác nhân AI viết mã và Skill
Vậy là năm 2026. Vấn đề không còn là liệu tôi có thể viết mã ứng dụng web của mình bằng AI hay không, mà là làm thế nào để đạt được kết quả tốt nhất từ các tác nhân AI viết mã. Tôi vẫn thỉnh thoảng nghe một số người tranh luận rằng họ không thể có được kết quả tốt với AI hoặc nó không bao giờ chính xác như họ muốn khi họ yêu cầu các tác nhân viết mã của mình. Sự thật là ngày nay, đó chủ yếu là vấn đề về các skill (kỹ năng), nhưng đừng hiểu lầm tôi. Đó là những skill mà bạn cài đặt và sử dụng với tác nhân mã hóa yêu thích của bạn.
Vì vậy, nếu bạn chưa bao giờ sử dụng chúng, các skill là những plugin nhẹ, được mô tả ở định dạng văn bản dựa trên một đặc tả mở được hỗ trợ bởi hầu hết các tác nhân viết mã ngày nay. Về cơ bản, chúng hữu ích để thêm chuyên môn miền cho một điều gì đó rất cụ thể vào trường hợp sử dụng của bạn, vào những gì bạn đang phát triển. Những capability (khả năng) mới không được tích hợp sẵn vào các tác nhân của bạn sẽ được tìm hiểu thêm một chút, đặc biệt nếu bạn cần tùy chỉnh chúng. Và một điều cũng rất quan trọng trong kỷ nguyên các tác nhân viết mã này là thực hiện các workflow (quy trình làm việc) có thể lặp lại. Vì vậy, chúng ta sẽ xem một bản demo nhanh về tầm quan trọng của nó đối với bạn.
Demo: Triển khai tính năng với Tác nhân AI
Vậy thì, chuyển sang VS Code của tôi.
Hãy bắt đầu với một điều gì đó rất đơn giản. Và thực ra trước khi chuyển đến mã, hãy để tôi chỉ cho bạn một ứng dụng mẫu mà chúng tôi đã xây dựng, sẽ được sử dụng cho hầu hết các bản demo của chúng ta hôm nay. Nó là tên một con sông của Pháp, chỉ là để có một trang web thương mại điện tử làm ví dụ. Ở đây chúng ta có một trang sản phẩm với mô tả, một số đánh giá, khả năng thêm đánh giá của bạn, giống như có một số ví dụ cho tất cả các bản demo của chúng ta. Và trong sản phẩm này, tôi muốn thêm một cái gì đó mới.
Vì vậy, hãy thử một lời nhắc rất đơn giản: tôi chỉ yêu cầu xem xét các issue đang mở trong repo và yêu cầu tác nhân viết mã của tôi triển khai issue đầu tiên. Vì vậy, nó sẽ mất khá nhiều thời gian. Trong khi chờ đợi, tôi sẽ phải cho bạn thấy điều gì sẽ xảy ra đằng sau hậu trường. Như bạn có thể thấy, tôi không yêu cầu cụ thể sử dụng gì. Tôi có thể thấy nó đã cố gắng chạy GitHub CLI. Hãy chuyển sang cho bạn xem GitHub.
Về cơ bản, đây là repo cho ứng dụng này. Tôi đã tạo một issue là thêm một trang liên hệ. Vì vậy, tôi chỉ đang mô tả những gì tôi muốn thấy trong trang liên hệ này cho trang web của mình. Và về cơ bản, khi tôi yêu cầu triển khai issue đang mở đầu tiên, nó sẽ sử dụng GitHub CLI để kéo thông tin đó và hiện đang cố gắng triển khai nó.
Giải thích về Skill
Tôi đã đề cập đến các skill. Vì vậy, nếu tôi xem trong repo của mình, bên trong thư mục .agent/skills, tôi có thể thấy mình có một vài skill. Và bạn đã thấy nó sử dụng GitHub CLI để truy cập issue. Đây là skill triển khai điều đó, một điều tôi đã biết là có sẵn. Nếu bạn xem tệp skill.md, bạn có thể thấy rằng mỗi skill có một tên. Về cơ bản, nó khớp với tên thư mục. Nó có một mô tả nằm ở phần quan trọng, nơi các skill về cơ bản không phải lúc nào cũng được tải vào các tác nhân viết mã của bạn. Nó về cơ bản được tập hợp tùy thuộc vào những gì cần thiết để triển khai tác vụ hiện tại. Vì vậy, mô tả ở đó để giải thích cho các tác nhân viết mã của bạn khi nào thì nó hữu ích và khi nào các tác nhân viết mã của bạn cần lấy thông tin từ skill này vào ngữ cảnh của chúng. Và sau đó bạn có thông tin cơ bản cho skill này, giải thích GitHub CLI làm gì với rất nhiều ví dụ lệnh và cho tác nhân của bạn biết cách sử dụng nó.
Skill tùy chỉnh và Workflow
Vì vậy, bạn có thể thấy rằng tôi có một vài skill trong repo của mình. Ví dụ, tôi có một skill cho phép thiết kế front-end tốt hơn, một điều quan trọng đối với chúng ta với tư cách là các nhà phát triển web. Tôi có một skill cho phép sử dụng Playwright CLI. Ví dụ, bạn có thể thấy rằng sau này nó sẽ quay một video về tính năng đó. Hy vọng là vậy. Tôi cũng đã xây dựng một vài skill tùy chỉnh bằng cách sử dụng các skill tạo skill.
Vâng, bạn có một skill có thể giúp bạn tùy chỉnh và xây dựng skill của riêng mình, và tôi thực sự đã xây dựng hai cái: một cái tên là public tunnel có thể giúp gửi cho tôi — điều tôi muốn là về cơ bản, khi một tính năng được tác nhân viết mã triển khai, tôi muốn có thể kiểm tra nó trên điện thoại thông minh của mình. Và để làm được điều đó, tôi cần một local tunnel (đường hầm cục bộ) giữa máy phát triển của tôi và điện thoại thông minh. Để mọi thứ dễ dàng hơn, tôi muốn có thể nhận URL trực tiếp trên điện thoại thông minh của mình. Vì vậy, tôi đã xây dựng skill gửi Telegram này và yêu cầu các tác nhân gửi cho tôi một tin nhắn kèm URL để tôi có thể kiểm tra ứng dụng trực tiếp trên điện thoại thông minh của mình.
Vì vậy, đây là workflow (quy trình làm việc) của tôi và tất cả đều hoạt động thông qua các skill, và về cơ bản, những gì tôi giải thích chỉ được mô tả ở đây trong tệp agent.md của tôi, đây là tệp tiêu chuẩn hiện được sử dụng bởi hầu hết các tác nhân viết mã. Và tôi chỉ ghi vào đó rằng mỗi khi tác nhân thực hiện một thay đổi mới cho trang web, tôi muốn nó ghi lại một đoạn video ngắn, vì vậy nó sẽ sử dụng Playwright CLI để làm điều đó, hiển thị dev server và tạo một local tunnel, sau đó gửi URL cho tôi qua Telegram, và về cơ bản, không đóng issue trên GitHub cho đến khi tôi xác nhận nó đã hoàn tất.
Nó vẫn đang chạy, tôi có thể thấy nó đã chạy Playwright CLI, chuyển sang tạo tunnel (đường hầm). Vì vậy, tôi sẽ hiển thị thông báo cho bạn khi nó hoạt động trở lại các trang trình bày ngay bây giờ. Tôi sẽ cho bạn xem khi cần thiết.
Gỡ lỗi với Tác nhân AI và Chrome Dev Tools MCP
Bây giờ chuyển sang Olivier, tôi nhường lời cho bạn để trình bày bước tiếp theo trong quá trình phát triển với các tác nhân. Vâng, hãy xem làm thế nào chúng ta có thể sử dụng các tác nhân để debug (gỡ lỗi) ứng dụng của mình. Hiện tại, hầu hết mọi người đều làm điều đó bằng cách viết các test để kiểm tra ứng dụng của bạn. Và tất cả những gì bạn có thể làm — điều mà nhiều người làm hơn — là bạn vào trang web, vào các dev tools (công cụ dành cho nhà phát triển), và bạn cố gắng làm cho nó hoạt động và mọi thứ.
Và Chrome - các Chrome dev tools (công cụ dành cho nhà phát triển Chrome) thật tuyệt vời; có rất nhiều thứ bạn có thể làm: bạn có thể kiểm soát các issue, animation, bố cục giao diện, bạn có thể xem hiệu suất, bạn có quyền truy cập vào tất cả các tool (công cụ) này. Chà, chúng ta sẽ tuyệt vời nếu một MCP tồn tại cho việc đó, giống như một tác nhân có thể gọi nó – đó chính xác là những gì Chrome MCP làm. Nếu bạn truy cập vào GitHub Chrome Dev Tool MCP ở đây, bạn sẽ có thông tin về cách cài đặt. Về cơ bản, máy chủ MCP là một server (máy chủ) chứa các tool (công cụ) có thể được gọi bởi tác nhân của bạn, và nó rất dễ cài đặt trên bất kỳ IDE, CLI nào, bất cứ thứ gì bạn sử dụng cho các tác nhân của mình.
Và đây là những gì bạn phải đặt để cài đặt Chrome Dev Tools MCP. Vì vậy, đây là những gì tôi đã làm ở đây: nếu tôi truy cập vào tệp mcp.json của mình, tôi có Chrome Dev Tool MCP của tôi.
Điều khiển trình duyệt và đo lường hiệu suất với Tác nhân AI
Bạn có thể thấy rằng trong IDE của tôi, tôi có quyền truy cập vào tất cả các công cụ này. Mọi thứ tôi có thể làm trong Chrome DevTools hoặc trình duyệt, tôi đều có thể thực hiện tại đây: nhấp, điền biểu mẫu, nhận thông báo console, các yêu cầu mạng, kiểm tra Lighthouse, điều hướng trang, chụp ảnh chụp màn hình, thay đổi kích thước trang, và mọi thứ khác. Vì vậy, tôi có thể làm mọi thứ từ đây.
Ví dụ, nếu tôi có tác nhân của mình ở đây, khi tôi mở cửa sổ tác nhân và hỏi: "Bạn có thể chạy ứng dụng và xem trang chính hoạt động như thế nào trong trình duyệt Chrome không?" Nếu tôi làm vậy, nó sẽ kiểm tra các tệp Markdown và mọi thứ khác. Sau đó, nó sẽ nói: "Để chạy ứng dụng, tôi cần khởi động nó." Vì vậy, nó sẽ xem xét tệp package.json của tôi. Đó chỉ là một tác nhân cơ bản đang thực hiện công việc của mình: mở một cửa sổ dòng lệnh, chạy ứng dụng. Và bây giờ để kiểm tra, nó sẽ cần mở Chrome, đó là lúc nó sẽ gọi công cụ MCP ở đây. Nó sẽ nói: "Được, tôi có thể điều hướng đến một trang, tôi có thể liệt kê một trang." Tôi biết nó đang mở Chrome, tôi không chạm vào bất cứ thứ gì. Bạn có thể thấy đó là Chrome đang được điều khiển bởi phần mềm kiểm thử tự động. Vậy bây giờ nó đã mở Chrome và sẽ kiểm thử nó. Tôi có thể chạy hoặc kiểm thử. Bây giờ tôi xem liệu nó có thể chụp một vài ảnh chụp màn hình không. Lời nhắc của tôi ở đây rất cơ bản; tôi chỉ yêu cầu nó kiểm thử trang chính. Và thế là nó đang thực hiện, có một ảnh chụp màn hình mới và liệt kê nó.
Sau đó, bạn có thể làm mọi thứ bạn muốn. Bạn có thể nói: "Được rồi, tôi muốn làm điều gì đó khác. Tôi muốn... hãy tắt nó đi. Tôi không cần bạn nữa." Tại đây, tôi có thể nói: "Hãy mở một cửa sổ mới và chạy ứng dụng trong mạng internet 2G, 3G và mạng nhanh, sau đó xem hiệu suất của ứng dụng và nó bị chậm ở đâu."
Phân tích hiệu suất ứng dụng với Tác nhân AI
Mục tiêu bây giờ là kiểm soát Công cụ dành cho nhà phát triển Chrome, bao gồm cả điểm mạng (network point) và hiệu suất. Hãy xem xét lại; điều này có lẽ rất cơ bản, vì vậy bạn có thể cụ thể hơn. Hãy dành một phút để xem nó sẽ thực hiện những gì. Đôi khi tôi không yêu cầu, nhưng nó đôi khi lại rất chung chung, như ảnh chụp màn hình hoặc tệp JSON của báo cáo.
Được rồi, nó đang khởi chạy ứng dụng, nó đang điều hướng đến đó. Và bạn có thể thấy rằng kiểm thử đầu tiên, nó sẽ sử dụng điều đó để biết hiệu suất thực sự của việc bắt đầu theo dõi (start trace) để kiểm thử trên mạng internet nhanh. Điều đó tốt, nó đã giữ nguyên baseline (đường cơ sở). Nó sẽ thực hiện phân tích. Bạn có thể thấy rằng mỗi khi bạn gọi công cụ, bạn có thể thấy các lệnh gọi công cụ với các chi tiết. Vậy bây giờ nó nói trên 3G nhanh. Hãy nhớ tôi đã kiểm thử 3 tốc độ kết nối khác nhau và hãy đợi thêm một phút nữa. Nó mô phỏng việc bắt đầu theo dõi hiệu suất. Được rồi, nó đã thực hiện phân tích và sau đó nó sẽ thực hiện cái cuối cùng, hy vọng là vậy.
Được rồi, tôi có thể xem liệu nó có tham gia kiểm thử như một báo cáo cuối cùng không. Đôi khi nó làm, đôi khi không, tùy thuộc vào việc tôi có yêu cầu hay không. Vì vậy, hãy xem nó đã đưa ra những gì. Được rồi, và tôi thấy cửa sổ của tôi ở đây. Nó không mở Công cụ dành cho nhà phát triển Chrome, nhưng nó đang sử dụng công cụ đó trong nền để phân tích hiệu suất. Được rồi, kích thước ảnh SP và stand size. Được rồi, hãy đợi vài giây để xem nó đang làm gì; nó đang kiểm tra hình ảnh. Vì vậy, nó chắc hẳn đã nhận thấy có điều gì đó chúng ta có thể tối ưu hóa với hình ảnh. Tôi đoán nó đang kiểm tra kích thước của nó; nó đang phân tích mã nguồn.
Thông thường nó không đi xa đến mức phân tích mã nguồn. Vì vậy, tôi sẽ cho nó khoảng 15 giây nếu nó tiếp tục. Được rồi, bây giờ thì xong rồi. Bạn có thể thấy nó cho phép mọi thứ và có thể cung cấp cho bạn tất cả các báo cáo này. Đối với mỗi tốc độ kết nối internet, tôi có LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), độ trễ đường dẫn quan trọng (critical path latency) và tiết kiệm chặn ngẫu nhiên (random blocking saving). Sau đó, nó đưa ra một số hướng dẫn: hình ảnh tai nghe quá lớn, vì vậy 3G không tốt. Nó đưa ra các cách để cải thiện điều đó, bạn có thể đặt mức độ ưu tiên cao (priority high), bạn có CSS tĩnh (silence CSS), một số vấn đề trong JavaScript. Bạn có thể đặt một số tải trước (pre-load) cho một số JSON. Vì vậy, bạn có tất cả những thứ này mà bạn có thể thử nghiệm để cải thiện ứng dụng của mình.
Tích hợp thông báo và quy trình làm việc
Bạn có tin tức gì về thông báo và bản demo của bạn không? Hãy cùng xem. Vâng, tôi không nhận được gì cả. Bạn có thể kiểm tra, đôi khi tác nhân bị kẹt. Nó đã thất bại vì không thể tìm thấy mã thông báo. Vâng, tôi có một tệp .env. Tôi không chắc tại sao đôi khi nó không tìm thấy được. Tôi có một tệp .env, hãy sử dụng nó và thử lại. Vâng, đôi khi các tác nhân hoạt động, đặc biệt trong các bản demo, bạn biết đấy, tệp .env là dành cho ứng dụng nhắn tin của bạn, đúng vậy. Vì vậy, nó biết kênh nào cần sử dụng để gửi tin nhắn Telegram cho tôi. Vâng, được rồi, chúng ta hãy tiếp tục và quay lại vấn đề đó sau.
Được rồi, ồ, và đó chỉ là cách nó thông báo. Để tôi cố gắng cho bạn xem. Vâng, tôi đã nhận được thông báo. Vâng, tôi đã nhận được thông báo trên điện thoại thông minh của mình, vì vậy tôi sẽ mở nó để bạn có thể xem. Vâng, bạn có thể thấy, cố gắng lấy nét vào đó. Vâng, bạn có thể thấy ở đây một bản xem trước của video hiển thị tính năng nó đã ghi lại. Tôi sẽ mở liên kết để chúng ta có thể xem giao diện của trang liên hệ mà nó đã tạo. Và vâng, đây trông giống như một trang liên hệ tuyệt vời. Vâng, tôi cũng có thể cho bạn xem vì tôi có nó đang chạy ở đó. Bạn có thể thấy bây giờ chúng ta có trang liên hệ này. Vâng, về cơ bản, nó đã hoàn thành công việc và tôi có thể kiểm thử nó và xem video. Đây là một tính năng rất đơn giản, nhưng bạn có thể thấy nó có thể hữu ích cho các tính năng phức tạp hơn và về cơ bản cho phép bạn xem xét mọi thứ trực tiếp từ điện thoại thông minh của mình, và thậm chí không cần chạy bất cứ thứ gì trong trường hợp xem video, chỉ để có thể kiểm thử nó. Nếu bạn muốn gửi nó, tôi đã gửi nó cho chính mình bằng Telegram, nhưng bạn có thể chọn gửi nó cho đồng nghiệp của mình hoặc bất cứ điều gì khác mà bạn có thể tưởng tượng trong quy trình làm việc của mình. Vâng, điều đó thực sự tuyệt vời.
Tận dụng AI trong Công cụ dành cho nhà phát triển trình duyệt
Chuyển sang điều thú vị tiếp theo. Chúng ta đã thấy với Olivier rằng Công cụ dành cho nhà phát triển của bạn có thể được kiểm soát trực tiếp bởi các tác nhân thông qua MCP. Nhưng bạn có biết rằng bạn cũng có thể sử dụng AI trực tiếp trong Công cụ dành cho nhà phát triển trình duyệt của mình không? Bạn có thể nhận được mọi loại thông tin chi tiết trực tiếp từ đó, từ trình duyệt của mình để giúp bạn chẩn đoán và khắc phục sự cố.
Thay vì chỉ mô tả tất cả những điều bạn có thể làm, hãy để tôi thực sự trình bày cho bạn xem. Vì vậy, quay lại trang web, chúng ta sẽ chuyển sang trang "Giới thiệu" chẳng hạn. Hãy mở Công cụ dành cho nhà phát triển để chúng ta có thể thấy có một lỗi. Điều đầu tiên, nếu bạn muốn có tất cả các tính năng AI mới hữu ích, bạn phải vào cài đặt của Công cụ dành cho nhà phát triển và đảm bảo rằng trong tab Đổi mới AI (AI Innovation), bạn đã bật bất kỳ tính năng nào. Nó không được bật theo mặc định, bạn phải tự làm điều đó nếu muốn nhận hỗ trợ AI này.
Một khi bạn đã làm điều đó, ví dụ ở đây bạn có thể thấy tôi có một lỗi phổ biến trong console nói rằng một số yêu cầu đã bị chặn bởi chính sách CORS. Và bạn có thể thấy biểu tượng nhỏ này ở đó; tôi có thể trực tiếp nhấp vào nó để nhận giải thích bằng AI về lỗi này, và thậm chí là một bản sửa lỗi được đề xuất: tại sao lỗi này xảy ra và phải làm gì để khắc phục nó. Vì vậy, trực tiếp trong console của bạn, bạn không cần phải sao chép-dán lỗi bằng cách đó và gọi GenSort hay ChatGPT tùy thuộc vào công cụ bạn đang sử dụng; nó trực tiếp ở đó, bên trong Công cụ dành cho nhà phát triển của bạn. Và bạn có thể thấy nó khá toàn diện và cung cấp cho bạn đủ loại gợi ý để cố gắng khắc phục sự cố.
Gỡ lỗi mạng và tối ưu hóa hiệu suất với AI
Vậy hãy thử xem nó có thể hữu ích ở những nơi nào khác. Ví dụ, trong tab Mạng (Network), hãy tải lại trang. Bạn có thể thấy một trong những yêu cầu bị lỗi có lỗi 400. Một lần nữa, chúng ta có biểu tượng Gỡ lỗi với AI (Debug with AI). Vì vậy, tôi sẽ nhấp vào nó và có thể thấy rằng yêu cầu bị lỗi của tôi đã được thêm vào giao diện trò chuyện này. Và tôi có thể hỏi, ví dụ, tại sao yêu cầu lại bị lỗi. Vì vậy, tôi có một loại trò chuyện tích hợp với AI có thể trực tiếp truy cập ngữ cảnh của ứng dụng đang chạy của tôi ngay từ Công cụ dành cho nhà phát triển.
Một lần nữa, nó đang phân tích tại sao yêu cầu này lại bị lỗi và đưa ra cho tôi một số gợi ý về những gì tôi có thể thử để khắc phục điều đó. Được rồi, nó nói với tôi rằng đó là yêu cầu không hợp lệ (bad request), rất có thể vì đó là một endpoint cũ không còn tồn tại nữa. Vâng, tôi nghĩ điều đó khá tuyệt khi bạn có thể làm trực tiếp từ Công cụ dành cho nhà phát triển bên trong trình duyệt của mình.
Bạn có thể làm đủ loại thứ thú vị khác, chẳng hạn như, để tôi chuyển sang GitHub chẳng hạn. Điều này sẽ có ý nghĩa hơn với điều đó. Tôi chuyển sang tab Hiệu suất (Performance). Lần này, tôi sẽ nhấp vào nút làm mới ở đó, vì vậy nó sẽ thu thập một số thông tin chi tiết về trang web, chẳng hạn như mất bao lâu để chạy các thứ khác nhau và một số số liệu về nó. Vì vậy, tôi có trace này, nó hơi giống với loại kiểm thử mà Olivier đã làm trước đó với máy chủ công cụ Dev MCP.
Ví dụ, tôi có thể mở phân tích LCP (LCP breakdown). Và một lần nữa, bạn có thể thấy tôi có các nút Hỏi AI (Ask AI) này. Vì vậy, tôi có thể hỏi nó, sử dụng trace mà tôi vừa ghi lại trên trang web GitHub, để giúp tôi tối ưu hóa điểm LCP của mình. Khi chạy nó, nó sẽ phân tích tất cả trace từ trang web và nói với tôi: "Được rồi, LCP (Largest Contentful Paint) cho trang này lần này là ổn." Và về cơ bản, điều gì đang gây ra hầu hết độ trễ, bởi vì đó là một số thứ và ồ, tôi không thể thấy điều tra xung quanh vấn đề chặn. Đôi khi nó chi tiết hơn, đôi khi không. Một lần nữa, đây là AI. Vì vậy, vâng, nó có thể cho tôi một vài gợi ý về những gì tôi cần tối ưu hóa. Mọi lúc nó đều nói với tôi rằng hầu hết là do CSS. Và vâng, bạn có thể nhận được một số gợi ý nếu bạn không chắc nên bắt đầu từ đâu, ví dụ để tối ưu hóa hiệu suất trên trang web của mình.
Sửa đổi mã nguồn trực tiếp với AI
Nhưng nó có thể làm được nhiều hơn thế. Hãy quay lại trang web của chúng ta. Lần này, tôi sẽ chọn ví dụ này về các phần tử (elements) "send", ý tôi là CSS. Bạn có thể thấy, vâng, đây là H1 này. Vì vậy, ở đây tôi đang điều hướng DOM, và bạn có thể thấy một lần nữa tôi có các nút Gỡ lỗi với AI (Debug with AI). Khi chọn nó, bạn có thể thấy rằng nó đã thêm phần tử H1 cụ thể này vào ngữ cảnh và tôi có thể hỏi điều gì đó. Ví dụ, hãy nói rằng tôi muốn thay đổi tiêu đề nhàm chán này và làm cho nó có gradient đẹp mắt. Vì vậy, tôi sẽ chỉ nói với nó rằng hãy làm cho CSS văn bản đó có gradient đẹp mắt và tôi muốn nó phù hợp với chủ đề màu sắc hiện có vì tôi đã sử dụng một số biến CSS (CSS variables). Vâng, vậy hãy tiếp tục. Tôi đồng ý rằng trang có thể được sửa đổi, và vâng, bạn có thể thấy tôi có các gradient rất đẹp, phù hợp với tất cả các màu khác mà tôi có trên trang web của mình.
Và bạn có thể thấy một điều thú vị hơn nữa, bởi vì từ đó tôi vừa sửa đổi CSS trực tiếp (live CSS) trên trang web, nhưng điều có thể hữu ích hơn là trực tiếp sửa đổi mã nguồn, bởi vì ở đây tôi chỉ đang thực hiện các thay đổi không vĩnh viễn. Vì vậy, bạn có thể thấy tôi có tab Thay đổi không an toàn (unsafe change) ở đó với CSS đã được thêm vào trang web của tôi. Tôi có thể thử áp dụng thay đổi đó trực tiếp vào mã nguồn của mình bằng cách sử dụng áp dụng vào không gian làm việc (apply to workspace). Về cơ bản, nó sẽ yêu cầu bạn thêm thư mục nguồn của mình vào Công cụ dành cho nhà phát triển và nó sẽ cho phép Công cụ dành cho nhà phát triển trực tiếp thực hiện sửa đổi CSS này trở lại tệp mã nguồn của bạn.
Vì vậy, nó không chỉ có thể thực hiện sửa đổi trực tiếp trên DOM CSS và JavaScript của bạn mà còn có thể áp dụng lại những thay đổi đó vào mã nguồn gốc của bạn. Tôi nghĩ điều này rất thú vị, đặc biệt là với tư cách là một nhà phát triển web, tôi thường phải vật lộn với CSS hầu hết thời gian, phải không Olivier? Vâng, và sau đó tôi đã nghĩ, bạn thực hiện rất nhiều thay đổi trên Công cụ dành cho nhà phát triển Chrome và sau đó bạn không nhớ dòng nào bạn phải sao chép-dán vào tệp CSS của mình, và sau đó bạn lại không tìm thấy nó nữa vì sau đó chúng ta làm mới. Dù sao thì, tất cả chúng ta đều đã trải qua điều đó. Vâng, tôi thấy điều đó rất thú vị. Nó cũng giảm thiểu sự qua lại mà bạn đôi khi phải có giữa trình duyệt của mình khi gỡ lỗi, điều chỉnh CSS và các tác nhân viết mã của bạn, bởi vì về cơ bản bạn có mọi thứ ở một nơi.
Tích hợp AI vào ứng dụng
Vậy bây giờ chúng ta đã thấy cách viết mã, cách gỡ lỗi với AI, hãy xem cách chúng ta có thể đưa AI vào ứng dụng của mình. Bạn có thể đã sử dụng một số Giao diện lập trình ứng dụng AI (AI API) từ nhà cung cấp AI hoặc nhà cung cấp đám mây, nhưng điều đó yêu cầu thực hiện một số cuộc gọi trên internet, thường là phải trả tiền cho nó, sử dụng một số mã thông báo và mọi thứ.
Các API AI trực tiếp trong trình duyệt
Điều tốt là có một Giao diện lập trình ứng dụng (API) mới, hiện đang ở dạng bản nháp, được gọi là AI API, sẽ tích hợp trực tiếp vào trình duyệt. Bạn có thể thấy chúng ta có nhiều API khác nhau: summarized API, rewrite API và prompt API. Hãy cùng xem cách chúng ta có thể sử dụng chúng trong trình duyệt. Mục tiêu là có một mô hình chạy trực tiếp trên máy của chúng ta, trong trình duyệt.
Ứng dụng tóm tắt đánh giá người dùng
Tôi có một ứng dụng mà bạn đã thấy. Tôi có một số đánh giá và có thể thêm các đánh giá. Bạn có thể đã thấy trên một số trang web hiện nay rằng họ cung cấp bản tóm tắt của tất cả các đánh giá, vì vậy hãy xem cách chúng ta có thể triển khai điều đó. Tôi sẽ chuyển đến phần mã của mình. Tôi có ba việc khác nhau mà chúng ta sẽ làm. Việc đầu tiên là tóm tắt. Tôi muốn khi tôi nhấp vào nút này, nó sẽ cung cấp cho tôi bản tóm tắt tất cả các đánh giá ở đây. Hiện tại, nó không làm gì ngoài việc gọi hàm này. Vì vậy, hãy bắt đầu bằng cách kiểm tra, bởi vì không phải tất cả các trình duyệt đều có API đó. Hãy xem trình duyệt của tôi có nó không.
Sau đó, tôi sẽ tạo một bộ tóm tắt (summarizer) như summarizer.create mà tôi sẽ cung cấp một số tùy chọn. Loại ở đây, key point (điểm chính), là loại mặc định. Nếu bạn xem tài liệu, bạn có thể thấy có nhiều loại khác nhau: TLDR, TZR, key points, headline. Đối với mỗi loại, bạn có thể chỉ định một độ dài khác nhau (kích thước câu hoặc từ), vì vậy bạn có thể quyết định loại nào bạn muốn sử dụng. Cung cấp ngôn ngữ đầu vào dự kiến của các đánh giá của tôi và ngôn ngữ đầu ra dự kiến (đây là một mảng, vì vậy bạn có thể có nhiều ngôn ngữ đầu ra).
Tôi sẽ cung cấp ngữ cảnh. Tôi nói: "Được rồi, đây là các đánh giá cho một bài viết. Bạn cung cấp dưới dạng JSON được chuỗi hóa (JavaScript Object Notation), hãy cho tôi một bản tóm tắt về những gì mọi người nghĩ." Sau đó, tôi sẽ cung cấp một màn hình giám sát (monitor). Hàm monitor này ở đây để giám sát việc tải xuống mô hình. Cách API này hoạt động là nó sẽ tải mô hình xuống máy tính của bạn. Nó sẽ chỉ tải xuống một lần, điều này tốt vì hiện tại nó chiếm bốn gigabyte. Nhưng khi hoàn tất cho mỗi trang web, nếu máy tính của bạn cần dung lượng lưu trữ (ví dụ: dung lượng lưu trữ của bạn đang cạn kiệt), Chrome sẽ xóa nó. Nhưng theo mặc định, nó sẽ giữ lại.
Vì vậy, tôi có màn hình giám sát này. Sau đó, những gì tôi sẽ làm là gọi nó. Tôi sẽ tóm tắt hoặc hoàn thành tóm tắt (done summarize) và cung cấp dữ liệu cho nó. Sau đó, hãy trả về bản tóm tắt, hoặc tôi sẽ chỉ trả về kết quả của những gì tôi sẽ làm ở đây. Được rồi, bây giờ hãy xem chúng ta có gì ở đây. Quay lại đây, tôi sẽ nhấp vào tóm tắt. Điều gì đang xảy ra là, được rồi, nó đang làm điều gì đó với mô hình, vì vậy nó đang chạy lại hàm, và nó sẽ cho tôi kết quả trong giây lát. Bạn có thể thấy rằng mô hình đã được tải xuống cho tôi, vì vậy nó chuyển từ 0% đến 100% trực tiếp vì tôi không phải tải xuống lại.
Và bạn có thể thấy ở đây, tôi có bản tóm tắt tất cả các đánh giá của mình: "Khách hàng thường khen ngợi tai nghe vì chất lượng âm thanh và thời lượng pin của chúng..." Để điều này hoạt động, bạn phải kích hoạt một số flag trên Chrome. Chỉ cần tìm kiếm "AI" thường xuyên, và bạn sẽ tìm thấy nó. Giống như Jamie Jamie 9 có prompt API, proofreader API, writer API, rewriter (bất cứ thứ gì). Chỉ cần kích hoạt chúng để bạn có thể sử dụng chúng trong ứng dụng của mình. Ở đây, bạn cũng có các on-device intervals này trên Chrome. Bạn có thể thấy một vài điều: bạn có thể tải một mô hình, hoặc tải mô hình âm thanh, và sau đó bạn có thể nói chuyện với nó. Bạn có thể thêm hình ảnh hoặc thử nghiệm với top-k temperature. Bạn có thể thấy tất cả các event logs (nhật ký sự kiện). Vì vậy, đây là các event logs của những gì tôi vừa làm với hàm tóm tắt. Bạn có thể thấy trạng thái mô hình của việc có bao nhiêu mã thông báo đã được sử dụng cho mỗi cuộc gọi API. Vâng, đây là một cách tốt để gỡ lỗi.
Sửa lỗi chính tả với Proofreader API
Bây giờ, hãy cùng xem một Giao diện lập trình ứng dụng (API) khác. Tôi sẽ xem xét bộ kiểm tra lỗi chính tả (proofreader). Quy trình tương tự: kiểm tra xem tôi có quyền truy cập vào API hay không. Tôi đang tạo một proofreader. Màn hình giám sát (monitor) cũng vậy; tôi chỉ giám sát xem nó có tải xuống mô hình hay không. Sau đó, tôi sẽ nói: "Được rồi, tôi sẽ cung cấp cho bạn danh sách ngôn ngữ ngữ cảnh dự kiến." Ở đây, tôi sẽ nói: "Được rồi, đây sẽ là tiếng Anh," bởi vì tôi muốn nó sửa lỗi. Và sau đó tôi đang lập trình proofreader và trả về proofreader. Vì vậy, điều này hữu ích để khắc phục các vấn đề chính tả.
Giả sử tôi có bài đánh giá của mình ở đây, và tôi viết: "This is is a very good article." Tôi sẽ nói, ví dụ, lower. Được rồi, ví dụ, tôi chạy cái này, và nếu tôi rời khỏi vùng tập trung, bạn có thể thấy ở đây tôi đang lập trình API sẽ thực hiện phân tích của bạn. Bạn có thể thấy rằng nó đã sửa đúng thành: "This is a very good article." Vì vậy, tất cả các lỗi tôi đã mắc phải, bạn có thể thấy rằng nó đã thay đổi chúng. Và thực ra, nếu tôi (giả sử chúng ta có thời gian, vâng, hãy để tôi in nó ra) nếu tôi in nó ra bảng điều khiển (console), được rồi, vâng, nó tệ, "This is good products," một lần nữa, tôi thực sự đang nghĩ về nó, và bạn có thể thấy rằng nó đã sửa lại. Và bạn có thể thấy rằng nó cũng cung cấp cho tôi kết quả đã sửa và tất cả các sửa đổi với "and starting next" và "in next" và "waiting." Vì vậy, bạn thậm chí có thể có các đề xuất sửa lỗi nếu bạn muốn trên đầu vào của mình.
Đây là hai ví dụ. Tôi sẽ để bạn làm cái hay ho, bản demo thú vị đó. Vâng, hãy thêm vào. Vậy, những gì Olivier đã cho bạn thấy về cơ bản là một API rất tập trung cho tóm tắt và sửa lỗi chính tả. Nhưng chúng ta cũng có quyền truy cập vào các API tổng quát hơn, chẳng hạn như API mà bạn có thể đã sử dụng, ví dụ, nếu bạn đang sử dụng OpenAI API hoặc bất kỳ nhà cung cấp AI nào bạn đang sử dụng, để về cơ bản chỉ cần gửi lời nhắc của bạn.
Prompt API đa phương thức và tạo đánh giá tự động
Vì vậy, chúng ta có API tạo mô hình ngôn ngữ này. Bạn có thể thiết lập loại đầu vào dự kiến mà bạn có vì bạn có thể đặt nó là văn bản. Trong trường hợp của chúng ta, tôi muốn có thể gửi hình ảnh. Bạn cũng có thể có âm thanh làm một kiểu (type), vì vậy nó là đa phương thức (multimodal). Bây giờ tôi đã có ở đây, bạn về cơ bản xây dựng lời nhắc tổng quát của mình. Điều tôi muốn làm là tự động viết một bài đánh giá chỉ dựa trên một hình ảnh mà tôi tải lên. Vì vậy, tôi nói: "Được rồi, đây là một hình ảnh của sản phẩm, và tôi muốn tạo một mô tả cho bài đánh giá để đề cập đến kết nối trong một câu và về cơ bản kể cảm nhận của bạn khi nhận sản phẩm." Và sau đó, "Tạo một tiêu đề." Tôi muốn kết quả là một đối tượng JSON với tiêu đề và nội dung đánh giá. Được rồi, đây là lời nhắc của tôi, giống như khi bạn đang cố gắng sử dụng một AI API thông thường.
Bước tiếp theo về cơ bản là chạy prompt API: session.prompt() ở đây để nhận phản hồi. Đầu vào về cơ bản là một danh sách tin nhắn. Ở đây, tôi đang sử dụng tin nhắn người dùng để gửi lời nhắc của chúng ta vào đó và hình ảnh đầu vào làm nội dung. Bạn có thể thấy bạn có thể kết hợp các loại nội dung khác nhau. Tôi muốn có một JSON làm đầu ra, vì vậy tôi cần thêm một số ràng buộc vào phản hồi. Tôi muốn nói: "Phản hồi của tôi cần tuân theo một schema cụ thể, đã chỉ định." Vì vậy, hãy định nghĩa schema ở đó. Schema chỉ là một JSON schema thuần túy. Tôi nghĩ tôi muốn một đối tượng có tiêu đề (là một chuỗi) và mô tả (cũng là một chuỗi). Và bây giờ tôi nên có mọi thứ ngoại trừ việc trả về kết quả và cũng in nó ra nhật ký.
Vì vậy, hãy kiểm tra những gì chúng ta vừa làm. Chuyển sang trình duyệt, hãy cho nó thêm một chút không gian. Vì vậy, tôi muốn thử prompt API này để về cơ bản viết bài đánh giá thay cho tôi. Vì vậy, tôi sẽ tải lên hình ảnh này. Đây là tai nghe tôi nhận được. Như bạn có thể thấy, nó ở trong tình trạng khá tốt. Vì vậy, hãy xem nó sẽ đưa ra bài đánh giá nào. Nếu tôi chọn phân tích (analyze), ồ, tôi chỉ muốn hiển thị bảng điều khiển (console) ở đó. Ồ, đó có thể là điều mới, tôi nghĩ là do tôi không chỉ định ngôn ngữ. Vâng, như bạn có thấy, Olivier luôn chỉ định ngôn ngữ mà yêu cầu được gửi. Vì vậy, đây là kết quả. Bạn có thể thấy JSON, và bạn có thể thấy rằng nó đã điền vào các trường cho tôi. "Thật tai hại, hình ảnh đã bị hỏng và đã được đặt ngay khi đến nơi, và tất nhiên, tôi đã thất vọng và bực bội khi nhận được loại sản phẩm này." Vì vậy, vâng, tôi về cơ bản có thể gửi bài đánh giá ở đó, và tôi có thể tiết kiệm thời gian bằng cách chỉ tải lên hình ảnh và để AI viết mọi thứ cho tôi.
Và một lần nữa, chỉ cần nhắc lại những gì Olivier đã nói, nhưng tất cả điều này đều sử dụng một mô hình cục bộ (local model) chạy trên máy khách (client machine), thực sự không bị động chạm trong trình duyệt. Vì vậy, không có gì và không sử dụng bất kỳ web API nào; tất cả đều nằm trong trình duyệt. Vì vậy, tôi nghĩ điều đó khá tuyệt, và đây chỉ là một ví dụ trường hợp sử dụng duy nhất về những điều bạn có thể làm. Bởi vì mô hình cục bộ này, như bạn có thể thấy, là đa phương thức: nó có thể hiểu hình ảnh, nó có thể hiểu âm thanh và văn bản, và bạn có thể làm đủ loại thứ mà không phải trả tiền cho một API bên ngoài.
Vâng, API này tôi đang thấy, ý tôi là, nếu bạn có thể chuyển sang màn hình của tôi, tôi vừa mở summarize API trên tài liệu MDN. Và bạn có thể thấy rằng nó vẫn còn rất thử nghiệm. Và bạn có thể thấy rằng thực tế, tôi chỉ cảm thấy như Opera đã ngăn chặn nó. Bạn có Chrome, Edge đang đến. Vì vậy, API vẫn đang thay đổi, và những gì chúng ta vừa thấy trên màn hình của bạn thực sự là mới. Chúng ta không có ngoại lệ ngôn ngữ này một tuần trước khi chúng ta thử nó. Vì vậy, hãy cẩn thận, các API này có thể thay đổi. Vì vậy, nếu bạn đến trang web của mình, bây giờ bạn đã biết. Vâng, rất thử nghiệm, nhưng tôi nghĩ điều đó rất thú vị cho những loại khả năng mà nó mở ra cho các nhà phát triển web. Ý tôi là, việc bạn có thể chụp một hình ảnh và đưa ra lời giải thích dựa trên hình ảnh. Chúng ta đã thấy một số bản demo picture-inary nơi bạn có một hình ảnh, và mọi người có thể vẽ trên màn hình, và sau đó bạn có thể xử lý hình ảnh và nó cung cấp cho bạn một bài trình bày. Nó có giống vậy không? Vì vậy, nó thực sự khá tuyệt mà không cần dựa vào bất kỳ đám mây nào, bất kỳ mô hình trực tuyến nào, bất kỳ mã thông báo nào bạn phải gửi, hoặc bất cứ điều gì. Khá tuyệt.
Tối ưu hóa trang web cho tác nhân AI
Quay lại slide, phần cuối cùng nhưng không kém phần quan trọng, vì điều này có nghĩa là: "Này, các tác nhân (agents) làm rất nhiều việc cho chúng ta mỗi ngày, nhưng chúng ta cũng phải làm một số việc cho chúng." Đây là lúc mà bạn, con người, thực sự cần nâng cấp các trang web của mình cho các tác nhân. Vâng, các tác nhân có khả năng duyệt web. Điều mới mẻ là bạn phải tối ưu hóa trang web không chỉ cho khả năng sử dụng của con người và SEO tốt để có thể được khám phá trong các công cụ tìm kiếm, mà bây giờ chúng ta cũng phải nghĩ về cách các tác nhân có thể tiêu thụ và sử dụng các ứng dụng web của bạn. Đó là một điều hoàn toàn mới.
Và trước tiên, chúng ta bắt đầu với một đề xuất rất đơn giản, giống như chúng ta đã có robots.txt đã được áp dụng cho các công cụ tìm kiếm đang thu thập dữ liệu web để đưa ra một số quy tắc về cách các bộ thu thập dữ liệu này điều hướng đến các trang web của bạn. Chúng ta cũng có sitemaps cho con người để cải thiện cách họ có thể điều hướng một trang web một cách dễ tiếp cận hơn. Chúng ta có đề xuất lm.txt mới này, về cơ bản là một sự kết hợp của cả hai. Nó được các tác nhân sử dụng để hoạt động như một bản đồ để khám phá nơi bạn có thể tìm thấy thông tin mà nó cần trên trang web của bạn, giống như sự kết hợp giữa robots.txt và sitemap về định dạng tệp văn bản.
Và hãy để tôi thực sự cho bạn một ví dụ. Tôi đã nói với bạn về Angular.dev, vì vậy tôi sẽ cho bạn xem lm.txt cho trang web Angular.dev. Đây là những gì bạn nhận được: bạn nhận được một tệp markdown với một loạt các liên kết. Vì vậy, về cơ bản, nếu một AI muốn tìm kiếm tài liệu, nó không cần phải duyệt qua từng trang web để cố gắng tìm thông tin mà nó cần. Ví dụ, nếu tôi muốn tìm hiểu về animation, nó về cơ bản sẽ trực tiếp hướng dẫn các tác nhân AI chuyển sang xem một trong các trang tài liệu này tùy thuộc vào những gì bạn đang cố gắng làm. Đây là lm.txt cơ bản được đề xuất, giúp các tác nhân của bạn dễ dàng hơn trong việc cố gắng tìm nội dung mà chúng cần. Nhưng nó có thể đi xa hơn một chút vì chúng ta có biến thể lm-full.txt này, nơi về cơ bản nó đưa tất cả nội dung của trang web của bạn vào một tệp duy nhất. Vì vậy, chúng ta cũng có một cái cho Angular. Cái này khá mở rộng như bạn có thể thấy thanh cuộn ở đó.
Tối ưu hóa Tác nhân AI với Dữ liệu Mới nhất
Và nếu bạn cuộn một chút bên trong đó, bạn có thể thấy rằng tôi thậm chí còn có một số ví dụ về tệp mã. Đó là toàn bộ nội dung của phiên bản Angular mới nhất được tập hợp trong một tệp văn bản duy nhất mà bạn có thể cung cấp cho các tác nhân của mình. Chẳng hạn, một trong những điều khó khăn khi đôi khi sử dụng các tác nhân lập trình là điểm kiểm tra cuối cùng của chúng được dựa trên việc sử dụng các phiên bản cũ hơn của các framework. Bởi vì, bạn không thể luôn luôn huấn luyện mô hình mới với nội dung mới, đôi khi nó có độ trễ hàng tháng hoặc hàng năm liên quan đến nội dung. Vì vậy, nó không biết cách sử dụng phiên bản mới nhất, hoàn toàn mới của framework của bạn, ví dụ như Angular.
Vì vậy, nếu bạn muốn đảm bảo rằng, ví dụ, tôi muốn lập trình một ứng dụng sử dụng tính năng mới nhất của Angular trên phiên bản mới nhất, tôi muốn đảm bảo rằng nó sử dụng tài liệu tham khảo cập nhật nhất. Tôi có thể cung cấp tệp lm-full.txt này cho tác nhân lập trình của mình để nó có tất cả thông tin cập nhật, đảm bảo rằng tôi không sử dụng các tính năng cũ từ dữ liệu huấn luyện, như các ví dụ AngularJS cũ từ 10 năm trước và những thứ tương tự. Vì vậy, điều này khá hay và hữu ích, ví dụ, để đảm bảo rằng các tác nhân có thể có thông tin mới nhất về — đây là cho một thư viện lập trình, nhưng nó có thể được áp dụng cho bất kỳ loại nội dung nào mà trang web của bạn cung cấp.
Giới thiệu Web MCP: Tương tác Trực tiếp với Tác nhân AI
Bây giờ, cuối cùng nhưng không kém phần quan trọng là Web MCP. Chúng ta sẽ chuyển sang các slide và tôi sẽ nhường lời cho Olivier về phần này, bản demo cuối cùng và thú vị mà chúng tôi có. Vâng, chúng tôi đã chuyển từ các API mang tính thử nghiệm sang các API mang tính thử nghiệm cao hơn rất nhiều. Vậy Web MCP, bạn có thể chia sẻ với người dùng được không? Vâng, Web MCP. Ý tôi là, nếu bạn muốn xem nó thử nghiệm đến mức nào, hãy truy cập trang web của Web MCP. Đây là trang web hiện tại, không có nhiều thứ.
Nhưng ý tưởng là: "Chúng ta có các tác nhân có thể duyệt web, như bạn đã đề cập, chúng truy cập và chúng lấy các LLM, những thứ mà chúng tìm thấy." Nhưng ngày càng nhiều, chúng ta đang thấy AI được nhúng vào trình duyệt của bạn, bạn có một thứ gọi là agent browser (trình duyệt tác nhân). Về cơ bản, nó sẽ duyệt web thay bạn. Và hiện tại chúng ta có một số công cụ có thể làm điều đó. Chúng sẽ mở một trình duyệt, chúng sẽ nhấp và duyệt. Nhưng cách chúng làm điều đó là chúng cố gắng bắt chước các tương tác của con người. Chúng sẽ xem trang bằng cách chụp ảnh màn hình hoặc bằng cách xem DOM dump và nói rằng: "Ồ, có một nút ở đây nói rằng tôi có thể nhấp vào nó." Lấy tọa độ, đi và nhấp vào nó. Tương tự cho một biểu mẫu. Nhưng về cơ bản, chúng đang cố gắng bắt chước hành vi của con người. Vì vậy, trang web đã được thiết kế cho con người, không phải tác nhân.
Và đây chính xác là điều mà đề xuất này đang cố gắng khắc phục. Mục tiêu của Web MCP là có một máy chủ MCP, giả sử, đang chạy trên các ứng dụng web của bạn. Bạn có quyền truy cập vào các công cụ, và chúng ta biết rằng các công cụ mà tác nhân hiểu, tác nhân có thể gọi các công cụ vì chúng có quyền truy cập vào tên và định nghĩa, và sau đó chúng muốn gọi chúng.
Demo: Tác nhân AI Tương tác với Trang Web qua Công cụ
Hãy để tôi cho bạn xem ví dụ. Tôi có ứng dụng ở đây. Một lần nữa, tôi có một nút "Thêm vào giỏ hàng" ở đây. Vì vậy, bạn có thể thấy rằng tôi có một cái gì đó như "Giỏ hàng" bây giờ. Nhưng nếu một AI mới phải làm điều tương tự, nó sẽ phải mở Chrome, cố gắng đoán rằng có một nút ở đây, lấy tọa độ và nhấp vào nút. Nhưng điều gì sẽ xảy ra nếu nó thực sự có thể truy cập vào một công cụ — một công cụ AI để gọi nó?
Vì vậy, ở đây tôi có Chrome. Chrome chưa phải là một Agentic IDE, nhưng tôi có một tiện ích mở rộng ở đây có thể hiển thị nếu tôi có bất kỳ công cụ nào trên trang của mình. Vì vậy, hãy xem làm thế nào tôi có thể đăng ký một công cụ trên trang của mình. Tôi có một tệp cart tool ở đây, chỉ đơn giản là nhập add cart — đó là hàm được gọi khi tôi nhấp vào "Thêm vào giỏ hàng" ở đây, nó chỉ thêm một cái gì đó vào giỏ hàng của tôi.
Và vì vậy, tôi sẽ tạo một công cụ. Nếu bạn nhớ, nếu bạn đang tạo một công cụ trước đây, bạn có tất cả các SDK này. Đây là cách chúng tôi đã làm. Chúng tôi sử dụng một JSON, bạn sẽ đặt tên cho nó, bạn sẽ đặt mô tả cho nó. Vì vậy, ở đây nó là một công cụ để thêm các mặt hàng vào giỏ hàng, và đặt cho nó một schema. Vì vậy, nó đang lấy một đối tượng với item (tên mặt hàng) và quantity (số lượng). Tôi không có cái đó, tôi đã dựa trên bất cứ điều gì. Chỉ là tên và số lượng. Và sau đó tôi có execute. Vì vậy, execution là một hàm sẽ chứa mã nghiệp vụ trong đó. Vì vậy, tôi sẽ lấy các đối số. Tôi đang truy xuất item và quantity. Tôi sẽ lặp lại quantity bởi vì add to cart của tôi chỉ lấy một. Nó không quản lý số lượng. Vì vậy, tôi đang di chuyển và thêm vào giỏ hàng những gì tôi có. Và tôi chỉ trả về bất cứ điều gì, chỉ nói rằng "Số lượng mặt hàng đã được thêm vào".
Và điều khác tôi sẽ làm là đăng ký công cụ của tôi. Vì vậy, tôi vào công cụ của mình và tôi đăng ký nó trên đối tượng navigator của trang của tôi. Bây giờ nếu tôi quay lại đây và làm mới, và thấy rằng tiện ích mở rộng dữ liệu của tôi ở đây, thấy rằng tôi có một item cart tool và tôi có thể gọi nó. Vì vậy, tôi có thể nói: "Được rồi, tôi muốn thêm, tôi không biết, chai nước, và tôi muốn có năm." Tôi sẽ thực thi công cụ ở đây. Về cơ bản, bạn có thể thấy rằng tôi đã làm năm chai nước, và về cơ bản, giống như một AI đã làm điều đó thay mặt tôi. Nó đang lập trình công cụ mà bạn đăng ký trên trang của tôi.
Và hãy để tôi xem, chúng ta có một chút thời gian. Tôi đang thử nghiệm nó. Tôi nghĩ nếu tôi có thể sửa trực tiếp từ IDE của mình. Vâng, tôi biết rất nhiều điều này. Hãy để tôi xem. Vâng, về cơ bản tôi thậm chí có thể làm điều đó từ đây. Vì vậy, vâng, tác nhân của tôi. Tôi có thể nói như: "Bạn biết đấy, thêm, tôi không thể đi vào xóa dev tool." Vì vậy, không có hai phương pháp. "Thêm ba, tôi không biết, ba máy tính xách tay vào giỏ hàng của tôi." Vì vậy, tôi sẽ làm điều đó. Và thông thường, nếu mọi thứ hoạt động tốt, nó sẽ gọi công cụ được đăng ký trên trang web của tôi trong Chrome của tôi. Vì vậy, hãy xem. Vì vậy, thay vì cái này, và tôi thêm vào giỏ hàng. Ồ, nó đang làm gì vậy? Nó là một công cụ tốt để tạo nội dung.
Được rồi, nó đang lập trình. Vâng, nó đang gọi công cụ add to cart với laptop quantity ba. Bạn có thể thấy ở đây nếu tôi quay lại trang web của mình bây giờ. Được rồi, xem nào, ba máy tính xách tay. Tôi chỉ có ba máy tính xách tay ở đây. Vì vậy, bây giờ tôi đã gọi nó từ một tiện ích mở rộng hoặc từ IDE của tôi. Nhưng mục tiêu sẽ là trình duyệt của bạn có thể làm điều đó cho bạn bởi vì đó là một agent type browser có thể để tôi lấy các tab và đọc cho bạn. Vì vậy, bạn có thể thấy rằng công cụ của tôi đang chạy trên trang web của tôi.
Và không có nhiều mã, nhưng thậm chí còn có một cách tốt hơn – tôi không biết liệu đó có phải là cách tốt hơn không – nhưng giả sử bạn không muốn thêm JavaScript mới vào ứng dụng của mình bởi vì bạn đang chuyển đổi và bạn chỉ muốn kiểm tra các công cụ MCP này trên ứng dụng của mình mà không thay đổi nhiều mã.
Chuyển đổi Biểu mẫu HTML thành Công cụ MCP
Vì vậy, giả sử tôi có biểu mẫu ở đây. Biểu mẫu này là để viết đánh giá. Những gì tôi có thể làm, bạn có thể nói: "Được rồi, tôi sẽ thêm một tên công cụ write review tool." Tôi sẽ đặt mô tả công cụ ở đây. Tôi sẽ nói như "thêm đánh giá vào sản phẩm." Và bằng cách làm đó, tôi đã biến biểu mẫu của mình thành một công cụ. Nó sẽ lấy tất cả các đầu vào khác nhau trong đó và sau đó biến chúng thành các đối số. Tôi thậm chí có thể làm một số mô tả tool prime – nó giống như "đánh giá sản phẩm." Vì vậy, tôi có thể thêm một số mô tả vào đó. Ví dụ, tôi có bất cứ điều gì tôi có là đầu vào ở đây, nó giống như "được rồi, mô tả tool prime," nó được gọi là "thêm tiêu đề" – ôi, "thêm tiêu đề cho đánh giá." Và tôi có thể thêm cái này, nhưng tôi không phải.
Nếu tôi quay lại đây, bạn có thể thấy rằng bây giờ tôi có "viết đánh giá" của mình, và đây là schema của nó đã được tạo. Về cơ bản, đó là điều tương tự mà chúng tôi đã có ở đây khi tôi chỉnh sửa schema thủ công. Nhưng bạn có thể thấy rằng tôi có – đâu rồi nhỉ? – công cụ của tôi. Vì vậy, tôi có cái write the product, và nó đã lấy tất cả các tùy chọn đầu vào ở đây từ một đến năm. Tôi có review title với mô tả của tôi. Tôi đã thêm "tiêu đề cho đánh giá," nhưng cũng có review text và review photo. Và nó tự động tạo ra một số mô tả. Và để làm điều đó, nó đã lấy nhãn gần nhất trên HTML của tôi. Vì vậy, nếu tôi đi đến phần "thêm ảnh," bởi vì bạn có rất nhiều nhãn "thêm ảnh tùy chọn," và đó là những gì nó đặt ở đây theo mặc định.
Hãy xem liệu điều đó có thể hoạt động không. Tôi sẽ gọi công cụ write review tool. Tôi không có ảnh. Tôi đoán họ thích "đó là tốt cho..." Hãy xem liệu tôi có thể kiểm tra không, để tôi có thể nhìn thấy nó ở đây. Tôi đoán họ thích tiêu đề "Awesome review." Tôi đoán họ thích review text "Perfect product." Và tôi sẽ thực thi công cụ. Tiktik tiktik, nó có đang làm gì không? Bây giờ nó không phải là nó không có ý định làm gì. Dù sao đi nữa. Ồ, vâng, không, không, nó phải là tiktik tiktik. À há, nó đang xảy ra. Đó là tệp của tôi. Hãy tìm nó, đã lưu.
Được rồi, hãy thử lại. "Sản phẩm tuyệt vời, tôi thích nó." Và để thực thi nó. Ồ vâng, và bạn có thể thấy rằng nó đã điền vào biểu mẫu cho tôi. Vâng, "Sản phẩm tuyệt vời" ở đây, và "Tôi thích nó." Tôi không có hình ảnh, nhưng bạn có thể có. Nhưng bạn cũng có thể nói: "Được rồi, điều này tốt vì nó đã điền vào biểu mẫu, nhưng tôi cũng muốn xác thực biểu mẫu." Vì vậy, nếu tôi quay lại biểu mẫu của mình ở đây, tôi sẽ nói: "công cụ để tự động gửi." Và bằng cách làm đó, nó sẽ vừa điền vào biểu mẫu, giả sử ba, "hoàn hảo, cũng tất cả mọi thứ." Được rồi, đừng để ý đến những lỗi sai. Và sau đó nếu tôi nhấp vào "thực thi công cụ" ở đây, nó sẽ điền vào biểu mẫu nhưng cũng xác thực biểu mẫu. Vì vậy, nó thậm chí không yêu cầu bất kỳ tương tác nào của con người. Nó sẽ điền và xác thực.
Triển vọng Tương lai: Tác nhân AI và Phát triển Web
Điều này rất thử nghiệm một lần nữa, và thực sự API đã thay đổi khoảng 10 ngày trước một lần nữa, vì vậy hãy cẩn thận. Nhưng chỉ cần biết rằng nó giống như chúng ta từng nói rằng nó giống như, bạn biết đấy, responsive design (thiết kế đáp ứng). Vào một thời điểm nào đó, bạn phải thêm trang web của mình cho thiết bị di động. Nếu bạn không làm, thì đối thủ cạnh tranh đã làm, và sau đó mọi người sẽ không truy cập trang web của bạn trên thiết bị di động. Và vì vậy, điều này cũng tương tự. Hãy đảm bảo rằng trang web của bạn sẽ được chuẩn bị khi chúng ta có tất cả các agentic browser (trình duyệt tác nhân) xuất hiện trên thị trường. Và vì vậy, bạn có thể bắt đầu thử nghiệm lại. Tôi đã nói "thử nghiệm," nhưng hãy bắt đầu thử nghiệm để bạn sẵn sàng khi chúng ta có tất cả các trình duyệt này xuất hiện. Và bản demo đã hoạt động tốt.
Vâng, tôi mong đây là một cái nhìn thoáng qua về những gì chúng ta sẽ phải làm với tư cách là các nhà phát triển web trong tương lai gần. Bởi vì vâng, các tác nhân đang đến với web rất nhanh, và tôi mong rằng đặc tả này đã di chuyển rất nhanh. Nó đã hữu ích. Vâng, nếu bạn nhìn vào trạng thái của human back, nó đã không còn sử dụng được nữa, giống như bạn đã cho thấy. Và tôi đặc biệt thích tính năng tự động nâng cấp các biểu mẫu hiện có thành các công cụ MCP bởi vì nó làm cho cuộc sống của các nhà phát triển trở nên rất đơn giản, và thậm chí các tác nhân cũng có thể triển khai điều đó cho chúng ta.
Vâng, tóm lại, những gì chúng ta đã thấy trong buổi thảo luận này về cơ bản là với AI, nó làm cho cuộc sống của các nhà phát triển web như chúng ta dễ dàng hơn, cho dù đó là viết mã, triển khai quy trình làm việc tốt hơn, gỡ lỗi – tất nhiên, rất quan trọng trong quá trình thực hiện – nhưng chúng ta cũng phải giúp các công cụ AI có thể sử dụng trang web và ứng dụng web của chúng ta tốt hơn. Hơi sớm trong quá trình này, nhưng vâng, tôi có thể bắt đầu suy nghĩ về điều đó. lm.se.txt đã được sử dụng rộng rãi ngày nay. MCP đã trở thành tiêu chuẩn. Và Web MCP đang đến cho điều lớn tiếp theo, hy vọng vậy. Vì vậy, vâng, bạn phải chuẩn bị cho điều đó, và hy vọng nó sẽ chỉ tạo ra các ứng dụng web tốt hơn cuối cùng.
Và vâng, cảm ơn bạn đã tham gia buổi thảo luận này, và chúng tôi có một mã QR ở đó với về cơ bản tất cả các tài nguyên, mã cho bản demo, và các liên kết đến các tài nguyên khác nhau mà chúng tôi đã sử dụng và cho thấy trong buổi thảo luận này. Vì vậy, vâng, và chỉ cần nếu bạn có bất kỳ câu hỏi nào, có thể liên hệ với chúng tôi trên LinkedIn. Và trong thời gian chờ đợi, chúc bạn vui vẻ. Hẹn gặp lại. Tạm biệt.