App Builder
Giới thiệu
Tab App Builder là môi trường phát triển AI-App (MCP App) trực tiếp trên V-Inspector. Bạn có thể gọi tools, xem kết quả dạng widget UI, giả lập các thiết bị khác nhau (desktop, tablet, mobile).
Giao diện
Thanh điều khiển thiết bị
| Thành phần | Mô tả |
|---|---|
| Device selector | Desktop, Tablet, Mobile, hoặc kích thước tuỳ chỉnh |
| Theme | Light / Dark mode cho widget |
| Protocol | MCP Apps hoặc OpenAI SDK |
| Display mode | Inline, Picture-in-Picture, Fullscreen |
| Safe area | Cấu hình safe area insets |
| Locale | Ngôn ngữ hiển thị |
| Timezone | Múi giờ |
Hướng dẫn sử dụng
Chuẩn bị
Kết nối MCP Server có hỗ trợ MCP Apps ở tab Servers
Gọi tool
- Chọn tool từ sidebar bên trái
- Điền tham số trong form
- Nhấn Run để thực thi
- Xem kết quả và widget UI ở panel bên phải
Giả lập thiết bị
- Chọn device từ thanh điều khiển: Desktop, Tablet, Mobile
- Hoặc nhập kích thước tuỳ chỉnh
- Widget sẽ render theo kích thước thiết bị được chọn
- Cấu hình safe area insets nếu cần test trên thiết bị có notch
Chuyển đổi Display Mode
- Inline: Widget hiển thị trong dòng chat
- Picture-in-Picture: Widget nổi ở góc màn hình
- Fullscreen: Widget chiếm toàn màn hình
Debug widget
- Gọi tool để widget hiển thị
- Mở các debugging panels:
- Data: Xem raw data từ tool
- State: Xem state hiện tại của widget
- Context: Xem model context
- CSP: Kiểm tra lỗi CSP
Chuyển đổi CSP Mode
- Permissive: Cho phép tất cả resources (phù hợp khi develop)
- Strict: Áp dụng CSP nghiêm ngặt - hiển thị các request bị block và gợi ý cách fix
Lưu ý
- App Builder phù hợp để test tool với tham số cố định, khác với Chat (test qua LLM).
- Khi dùng CSP strict mode, kiểm tra tab CSP Violations để tìm và fix các lỗi bảo mật trước khi deploy.
- Widget preview sẽ tự động cập nhật khi thay đổi device, theme hoặc display mode.