Cách tạo ứng dụng ChatGPT đầu tiên của bạn

• ChatGPT Apps do OpenAI công bố cho phép nhà phát triển nhúng trực tiếp ứng dụng của mình vào trong cuộc trò chuyện ChatGPT, đồng thời tận dụng hơn 800 triệu người dùng hoạt động hằng tuần như một kênh phân phối mới
• Vượt ra ngoài các phản hồi văn bản truyền thống, ChatGPT có thể kết xuất trực tiếp các thành phần UI, từ đó xử lý các tác vụ thực tế như đặt chỗ, mua sắm, tra cứu dữ liệu ngay trong luồng hội thoại
• Trọng tâm của kiến trúc này là Model Context Protocol (MCP), hoạt động theo cách LLM chọn lọc gọi các công cụ bên ngoài và tài nguyên UI
• Ứng dụng ChatGPT có kiến trúc tách biệt rõ ràng giữa backend (máy chủ MCP) và frontend (thành phần UI), chạy các mini app dựa trên React trong môi trường sandbox an toàn
• Mô hình MCP và ChatGPT Apps trong tương lai dự kiến sẽ mở rộng sang các agent khác như Claude, và đang trở thành một lớp giao diện mới kết nối AI hội thoại với SaaS truyền thống

---

Tổng quan về ChatGPT Apps

• ChatGPT Apps là tính năng cho phép nhà phát triển và đội ngũ sản phẩm chèn trực tiếp ứng dụng vào trong cuộc trò chuyện ChatGPT
• Người dùng có thể thực hiện ngay trong ChatGPT các tác vụ như đặt khách sạn, tìm bất động sản, mua sắm trực tuyến trong lúc trò chuyện
• Với nền tảng có hơn 800 triệu người dùng hoạt động hằng tuần, đây có tiềm năng trở thành kênh phân phối thế hệ tiếp theo

Cách ChatGPT Apps hoạt động

• Mọi LLM (ChatGPT, Claude, Gemini) chỉ có thể sử dụng một số công cụ giới hạn như tìm kiếm web, đọc tệp, chạy mã, tạo artifact
• ChatGPT Apps cho phép nhà phát triển dùng công cụ MCP để đưa các công cụ mới tới LLM, đồng thời giúp người dùng cài đặt và sử dụng dễ dàng
• Nếu không có app, khi cố đặt chỗ lưu trú ngắn hạn, hệ thống chỉ trả về ảnh và thông tin quy định chứ không thể đặt trực tiếp
• Khi app được cài đặt, có thể lấy danh sách chỗ ở Airbnb phù hợp với yêu cầu và đặt ngay lập tức

Ba thành phần của ứng dụng

• Máy chủ MCP (backend)

  • Là máy chủ mà ChatGPT giao tiếp tới, được viết bằng Python hoặc Node.js
  • Hoạt động như một API, định nghĩa các “công cụ” (hàm) mà ChatGPT có thể gọi
    • Ví dụ: search_restaurants, book_ticket

• Thành phần (frontend)

  • Là UI tương tác mà người dùng nhìn thấy
  • Thường được xây dựng bằng React và chạy trong sandbox bảo mật bên trong ChatGPT
  • Có thể xem như một mini web app sống bên trong cuộc trò chuyện ChatGPT

• ChatGPT (host)

  • Ứng dụng được hiển thị trong embedded view bên trong ChatGPT
  • ChatGPT quyết định khi nào sẽ gọi app dựa trên nội dung hội thoại của người dùng và các app đang được kích hoạt

Luồng hoạt động

• Khi người dùng yêu cầu hỗ trợ đặt chỗ lưu trú ngắn hạn, ChatGPT sẽ tự động thực hiện nhiều bước:
  1. Xác định liệu app có hữu ích hay không
  2. Liên hệ app để kiểm tra các công cụ khả dụng (ví dụ: Book Listing, Browse Listing)
  3. Gọi công cụ Browse Listing để trả về 5 chỗ ở hàng đầu
  4. Phản hồi cho người dùng với 5 chỗ ở hàng đầu
• Workflow này là nền tảng của MCP (Model Context Protocol)
• AI agent (ChatGPT) được cấp quyền truy cập vào các công cụ giúp hoàn thành mục tiêu, và sẽ chọn lọc sử dụng các công cụ này khi người dùng yêu cầu
• Công cụ có thể đơn giản như máy tính cộng hai số hoặc phức tạp như quy trình backend tạo ảnh

Chế độ hiển thị

• ChatGPT Apps hỗ trợ ba chế độ hiển thị UI

• Chế độ inline

  • Phù hợp với: danh sách, thẻ, trực quan hóa nhỏ
  • Đây là chế độ mặc định của mọi app và có thể chuyển sang chế độ khác khi cần
  • Ví dụ: carousel sản phẩm, danh sách nhà hàng

• Chế độ toàn màn hình

  • Phù hợp với: bản đồ, biểu mẫu phức tạp, dashboard nhiều dữ liệu
  • Thành phần chiếm toàn bộ cửa sổ ChatGPT
  • Dùng khi cần nhiều không gian hơn hoặc phải tập trung vào tác vụ phức tạp
  • Ví dụ: bản đồ bất động sản tương tác, trình chỉnh sửa bảng tính

• Chế độ PiP (Picture-in-Picture)

  • Phù hợp với: công cụ thường trực, game, cập nhật thời gian thực
  • Thành phần nổi ở đầu màn hình dưới dạng một cửa sổ nhỏ
  • Phù hợp với những thứ cần luôn hiển thị trong khi người dùng tiếp tục trò chuyện
  • Ví dụ: bộ đếm thời gian, trình phát nhạc, trò chơi cờ caro
  • Nếu định chuyển đổi giữa các chế độ hiển thị thì cần cân nhắc kỹ hơn về các mẫu UX

Các ràng buộc

• Một thành phần cho mỗi lượt

  • Khi ChatGPT gọi một công cụ trả về thành phần, lượt đó sẽ kết thúc
  • Không thể tự động nối chuỗi nhiều công cụ trả về UI
  • Ví dụ: với yêu cầu “đặt nhà hàng và gọi Uber giúp tôi”, trước tiên sẽ hiển thị thành phần nhà hàng, sau khi đặt xong mới hiển thị thành phần Uber bằng một trigger tiếp theo

• Phạm vi trạng thái thành phần bị giới hạn

  • Mỗi instance của thành phần có trạng thái riêng chỉ tồn tại trong chính thông điệp đó
  • Khi ChatGPT tạo một thông điệp mới cùng thành phần, mặc định đó là một instance mới với trạng thái trống
  • Cần quản lý trạng thái thông qua cơ chế lưu trữ và truy xuất ở backend

• Không thể truy cập DOM trực tiếp

  • Thành phần chạy trong sandbox bảo mật (iframe) nên không thể truy cập trang ChatGPT cha hoặc chạy script tùy ý
  • Mọi giao tiếp đều được thực hiện qua API window.openai

• Hiệu năng rất quan trọng

  • Trạng thái thành phần được gửi tới mô hình AI ở mỗi yêu cầu
  • Payload lớn sẽ làm chậm tốc độ phản hồi, vì vậy chỉ gửi những gì cần thiết

Các trường hợp sử dụng thực tế

• Thương mại điện tử & mua sắm

  • Xây dựng catalog sản phẩm tương tác cho phép lọc theo giá, thêm vào giỏ và thanh toán (thường được đẩy sang app chính)

• Công cụ doanh nghiệp

  • Tạo bảng Kanban nơi người dùng có thể kéo task giữa các cột, đặt hạn chót và cập nhật trạng thái
  • Đặc biệt mạnh cho các công cụ nội bộ khi ChatGPT vừa trả lời câu hỏi về dự án vừa cho phép người dùng hành động ngay lập tức

• Đặt chỗ & đặt lịch

  • Xây dựng thành phần đặt bàn nhà hàng hiển thị tình trạng chỗ, thực đơn và đánh giá
  • Người dùng có thể hỏi ChatGPT để được gợi ý rồi đặt trực tiếp qua giao diện

• Dashboard dữ liệu

  • Hiển thị phân tích doanh số bằng biểu đồ tương tác
  • Khi hỏi “Doanh thu Q4 thế nào?”, hệ thống có thể cung cấp dashboard cho phép drill-down theo khu vực hoặc sản phẩm cụ thể

• Bản đồ & vị trí

  • Hiển thị bản đồ tương tác với marker cho quán cà phê, bất động sản hoặc tìm kiếm theo vị trí
  • Đặc biệt hiệu quả ở chế độ toàn màn hình

Hướng dẫn xây dựng app đầu tiên (ví dụ app tìm nhà hàng)

• Bước 1: Xây dựng thành phần (frontend)

  • Tạo thành phần React tương tác với API window.openai.* để giao tiếp giữa thành phần iframe và ChatGPT
  • OpenAI cung cấp global để hỗ trợ tương tác API

• Bước 2: Định nghĩa công cụ (backend)

  • Máy chủ MCP định nghĩa “hợp đồng” với ChatGPT
  • Nó cho mô hình biết có thể làm gì và cần hiển thị thành phần nào khi việc gọi công cụ hoàn tất

• Bước 3: Đăng ký tài nguyên (backend)

  • Bundle thành HTML thành phần React và host nó như một tài nguyên trên máy chủ MCP
  • ChatGPT lấy URI outputTemplate từ bước trước và yêu cầu mã sẽ được nhúng bằng iframe

• Bước 4: Kiểm thử luồng

  • Sau khi triển khai máy chủ:
    • Mở ChatGPT và bật Developer Mode
    • Vào Settings → Connected Apps (hoặc “My Apps”)
    • Nhấp “Connect new app”
    • Nhập URL máy chủ (ví dụ: https://my-mcp-server.com)
    • Kết nối mà không cần OAuth
  • Khi ChatGPT phát hiện công cụ search_restaurants, hãy thử nhập “Find me Italian food in Brooklyn”
  • ChatGPT sẽ gọi công cụ, lấy dữ liệu và kết xuất danh sách React tương tác thay vì chỉ trả văn bản

Triển vọng tương lai

• Dù ChatGPT là bên khởi đầu, nhưng sắp tới chuẩn MCP sẽ hỗ trợ cùng một mô hình thông qua các MCP app
• Claude và các agent khác cũng sẽ có thể chèn mini app vào trải nghiệm hội thoại
• Việc hiểu kiến trúc hệ thống này và cách xây dựng trải nghiệm có ý nghĩa cho người dùng đang mở ra một phương thức giao tiếp mới giữa sản phẩm AI và các ứng dụng SaaS thông thường