元浏览器商务
Meta AI Glasses上的免提产品搜索和购买
原生iOS Swift应用程序和Meta AI资助应用程序的支持材料。
概述
Meta Browser Commerce允许用户在Meta AI Glasses上通过语音搜索、比较和购买产品。配套应用程序捕获语音请求，通过网络发现（Omnia MCP+浏览器使用）在零售商之间进行搜索，并通过眼镜说出结果和价格。用户可以在不使用手机的情况下将商品添加到购物车并完成购买。
IOS应用程序（swift/swiftui）
| 组件 | 描述 |
|---|---|
| 配对 | 通过Meta可穿戴设备DAT SDK连接Meta AI眼镜 |
| 家 | 语音提示示例、连接状态、最近的活动 |
| 搜索 | 多零售商产品结果（耐克、亚马逊、Target） |
| 比较 | 并排产品比较，添加到购物车 |
| 购物车 | 通过语音添加的项目，结账流程 |
构建与运行
- 打开
MetaBrowserCommerce.xcodeproj在Xcode中。 - 选择iPhone模拟器（例如iPhone 17）并运行（⌘R）。
- 添加Meta DAT： File → 添加包依赖关系 →
https://github.com/facebook/meta-wearables-dat-ios
测试全流量
- 配对CTA –如果你跳过配对，“配对Meta AI眼镜”横幅会出现在主页上。点击配对。
- 搜索 –键入查询（例如“跑鞋”），然后点击搜索按钮，或点击任何语音示例。
- 浏览器视图 –在WebView中加载Nike.com搜索；结果如下。
- 加入购物车 –点击结果上的“添加到购物车”→ 导航到购物车选项卡。
- 结账 –点击“结账”进行确认。
从命令行触发搜索
在模拟器中运行应用程序时：
xcrun simctl openurl booted "metabrowsercommerce://search?q=running+shoes"特性
| 特性 | 描述 |
|---|---|
| 动画占位符 | 通过示例提示（浅灰色、渐变）循环测试流场 |
| 设置 | 右上齿轮图标→ 管理第三方平台登录（亚马逊、耐克、塔吉特、沃尔玛、百思买） |
| 发射眼镜相机 | 搜索选项卡→ AI眼镜上启动相机/语音的突出按钮 |
| 确认流量 | 结果→ 水龙头产品→ “确认并添加到购物车？”→ Cart → 结账（审核→ 支付→ 确认） |
亚马逊登录（已知限制）
亚马逊经常屏蔽应用内WebView登录。如果连接失败：
- 使用 “改为在Safari中打开” 在登录屏幕中
- 通过Safari登录（会话在Safari中，而不是在应用程序中）
- 对于登录时的应用内浏览：使用 登录亚马逊 （需要亚马逊开发者注册）
眼镜相机工作流程（受VisionLaw启发）
看 参观_WORKFLOW.md 对于整个架构。简言之：
- Meta DAT SDK 从眼镜流式传输视频（~1fps）+麦克风
- 语音意图→ MCP
run_browser_task→ 零售商搜索 - 结果→ TTS → 通过眼镜与用户对话
- 图案与 愿景法律，适用于商业
拨款申请材料
| 类型 | 来源 | 描述 |
|---|---|---|
| 移动应用屏幕 | iOS应用程序 | 配对、主页、搜索结果、比较、购物车 |
| 语音流程图 | flow-diagram.html | 赠款图像的技术流程 |
工艺流程
User (glasses)
→ Mobile app (voice from Meta DAT)
→ Intent parsing → MCP client
→ run_browser_task / execute_website_action
→ browser-use on retailer URLs
→ structured result
→ TTS → Meta DAT → glasses (audio)API和集成
- Omnia MCP （运行browser_task，执行website_action）
- Meta DAT SDK （配对、语音捕获、TTS输出）
- 零售商网站 通过浏览器使用（无需登录）
项目结构
Meta-Browser-Commerce/
├── MetaBrowserCommerce.xcodeproj/
├── MetaBrowserCommerce/
│ ├── MetaBrowserCommerceApp.swift
│ ├── AppState.swift
│ ├── RootView.swift
│ ├── Views/ # PairingView, HomeView, SearchResultsView, CompareView, CartView
│ ├── Models/ # ProductResult, CartItem
│ ├── Services/ # MetaDATService (placeholder for Meta DAT)
│ └── Assets.xcassets/
├── flow-diagram.html # Voice flow diagram for grant
├── index.html # HTML mockup (optional demo)
└── README.md