OpenAI重磅開源！一句話就能直接操控Web應用界面，這波交互革命真的來了

作者：惡人筆記
日期：2026年4月28日 下午11:12
來源：WeChat 原文

✦整理版優先睇

速讀 5 個重點 高亮

OpenAI開源咗一個語音控制Web界面嘅React組件，一句話就操控UI，安全可控仲可以快速集成。

整理版摘要

呢篇文章介紹OpenAI最新開源嘅realtime-voice-component，一個React/瀏覽器端嘅語音控制層參考方案，配合Realtime API（gpt-realtime-1.5模型）使用。作者想解決嘅問題係點樣用自然語音直接控制UI狀態，而唔係傳統語音轉文字再執行。整體結論係：呢個方案將語音提升為應用頂層控制，比之前Computer Use黑箱操作更安全、更可控，但需要開發者自定義工具先用到。

項目嘅核心理念係「app-owned narrow tools」，即係應用自己定義窄工具，UI自己負責狀態變更，而且係白箱可控。佢提供React友好嘅Controller加啟動小部件，開發者幾分鐘就可以畀現有Web應用加上語音控制。文章詳細講解咗集成流程，包括Clone倉庫、後端Session代理、用Zod定義工具、建立Controller同React組件整合。

最後，作者分析咗優勢同侷限：安全可控、適合生產落地，但工具需要手動定義係最大天花板；目前成本同中文支援仍需評估。建議開發者從細場景開始，工具設計要窄、明確、原子化，並注重用戶體驗同安全性。總括來講，呢個項目將語音控制UI從科幻推向可落地階段。

  • OpenAI開源語音控制UI組件，將語音提升為應用頂層控制，唔再係簡單嘅語音轉文字。
  • 核心係app-owned narrow tools + Zod定義工具，白箱安全，模型只能執行你預先定義嘅動作。
  • 相比Computer Use嘅黑箱操作，呢個方案更可控、可預測，適合生產落地。
  • 目前最大限制係需要手動定義工具，模型能力再強都只能調用你寫好嘅工具。
  • 開發者可以從小型demo開始，工具設計要窄同原子化，並確保狀態查詢工具同結構化結果。
值得記低
連結 github.com

realtime-voice-component GitHub

官方開源倉庫，包含完整源碼、Demo同使用說明。

開啟
結構示例

內容結構

內容結構 text 
const tools = useMemo(() => [defineVoiceTool({name: "set_prompt",description: "替換當前提示詞",parameters: z.object({ prompt: z.string().min(1) }),execute: ({ prompt }) => {setPrompt(prompt);return { ok: true };    }  }),// 可加入 get_screen_state 等狀態查詢工具], []);
整理重點

呢個係咩？一句話操控UI嘅開源方案

前兩日OpenAI扔出咗一個開源倉庫realtime-voice-component，可能好多人冇留意到。呢個項目直接將科幻電影裏嘅語音操控帶到開發者面前，你可以對住屏幕講一句「切換深色模式」，界面即刻變黑；講「姓名張三，生日1995年10月1日」，表單自動填充；下棋時講「騎士走到F3」，棋子立刻移動。

呢個已經唔係簡單嘅「語音轉文字再執行」，而係語音直接成為應用嘅頂層控制

模型好似「睇得到」當前UI狀態，同鼠標鍵盤幾乎等價，你真係喺度操控模型。呢個項目係一個React/瀏覽器端嘅語音控制層參考方案，專門配合OpenAI嘅Realtime API打造。

整理重點

點樣用？五步集成指南

前提條件：OpenAI API Key（需支援Realtime API）、React項目、後端需要一個簡單嘅/session代理接口

  1. 1 Clone倉庫到本地，然後npm install，再import相關CSS。
  2. 2 後端添加Session代理：瀏覽器唔可以直接調用OpenAI，要自己後端轉發SDP同session配置，官方有Node示例。
  3. 3 創建Voice Adapter：用useMemo包裝應用狀態嘅讀取同操作方法，保持引用穩定。
  4. 4 用Zod定義工具：呢步最關鍵。每個工具要有name、description、parameters（用Zod object）同execute函數。可以加入get_screen_state等狀態查詢工具。
  5. 5 創建Controller並透過useVoiceControl hook整合到React組件，可選GhostCursorOverlay同VoiceControlWidget做視覺反饋。

官方/demo目錄有好多完整示例，例如深色模式切換、多步表單、共享狀態國際象棋，建議先跑一次demo感受魔力。

整理重點

優勢同侷限：安全可控 vs 工具手動定義

優勢：安全可控、可預測，適合生產落地

極大降低雙手操作場景嘅門檻，例如設計軟件、醫療系統、車載、工廠儀表盤、無障礙訪問等。語音真正成為「操作系統級接口」嘅重要一步。

當前最大天花板：工具需要手動預定義

模型能力再強，都只能調用你寫好嘅工具。如果未來模型能原生支援動態schema就好啲。另外，呢個項目唔係生產級，官方明確標註僅供參考；React Strict Mode下組件銷燬邏輯要特別注意。

成本方面：Realtime API按使用計費，長時間語音交互要評估

目前主要英語優化，中文支援雖然有進步，但實際效果需要測試。

整理重點

開發者實戰建議：由細開始，工具設計要窄

  • 從小而美嘅場景開始：先做主題切換或表單填充demo，驗證流程再擴展。
  • 工具設計原則：窄、明確、原子化；一定要提供狀態查詢工具；返回結果要結構化。
  • 狀態管理：用ref或穩定selector，避免工具數組頻繁變動造成控制器重複配置。
  • 用戶體驗：Widget保持簡潔，可自定義更豐富嘅語音UI；加入視覺/聲音反饋提升信任感。
  • 安全第一：敏感操作建議二次確認；後端代理要做好鑑權同限流。
  • 未來擴展：結合多模態輸入（圖片+語音）、多設備同步、離線能力等方向值得探索。

OpenAI今次唔單止開放咗能力，仲將部分輪子造好咗

realtime-voice-component真正令語音從「輸入方式」升級成「控制範式」。對普通用戶嚟講，未來對住屏幕講說話就完成操作嘅日子越嚟越近；對開發者嚟講，而家正係上手實驗、搶佔先機嘅時候。去跑一次demo試試，你可能會立刻感受到「講一句話，世界就變了」嘅魔力。

之前兩日OpenAI掉咗個開源倉庫出嚟，可能好多人冇留意到，呢個項目直接將科幻電影入面嘅語音操控帶到開發者面前：realtime-voice-component。佢可以做到以下效果：

你對住個mon講一句：「切換深色模式」，個界面即刻變黑；
講低「姓名張三，生日1995年10月1日」，表單自動填好；
捉棋嗰陣講「騎士行到F3」，棋子即刻移動……

呢個已經唔係簡單嘅「語音轉文字再執行」咗，而係語音直接變成應用程式嘅頂層控制。模型好似「睇到」當前UI狀態，同滑鼠鍵盤幾乎一樣咁，你真係喺度操控緊個模型。

呢個項目係啲乜？

呢個係一個React/瀏覽器端嘅語音控制層參考方案，專門配合OpenAI嘅Realtime API（目前主要基於gpt-realtime-1.5模型）打造。

佢嘅核心概念係：

  • • 應用程式自己定義窄工具（app-owned narrow tools）
  • • UI自己負責狀態變更（而且係白箱可控）
  • • 提供React友好嘅Controller+啟動小部件

呢個唔係簡單嘅生產級UI組件庫，而係教育、演示同本地集成嘅實際案例。佢已經夠完整，開發者幾分鐘就可以幫現有嘅Web應用加返語音控制。同上一次OpenAI嘅「Computer Use」（畀AI控制滑鼠鍵盤嘅黑箱操作）比較，呢個方案安全同可控程度可能會高出一個數量級。

點解咁正？核心亮點

  1. 1. 真正自然嘅多模態交互
    用戶用自然語音講嘢，模型通過工具調用直接改變應用程式狀態，而唔係輸出文字再解析。
  2. 2. 白箱安全
    模型只可以調用你預先用Zod定義好嘅工具，唔可以亂咁撳屏幕、隨便執行任意JS，極大咁降低咗風險。
  3. 3. React集成超級簡單
    提供 useVoiceControl Hook、VoiceControlWidget 啟動器、GhostCursor 視覺確認等開箱即用嘅組件。
  4. 4. 支援狀態感知
    建議喺工具入面加入 get_screen_state，可以令模型隨時「睇」到當前界面狀態，決策更加準確。
  5. 5. 低延遲 + 可中斷
    繼承Realtime API嘅原生語音能力，體驗接近ChatGPT嘅Advanced Voice Mode。

詳細使用方法（一步步教你點上手）

前提條件：

  • • OpenAI API Key（要支援Realtime API）
  • • React項目
  • • 後端需要一個簡單嘅 /session 代理接口（負責將請求轉發去OpenAI）

完整集成流程（建議順序）：

  1. 1. Clone倉庫並本地安裝（目前好似仲未發佈上npm）
    # 把倉庫下載到本地
    npm install /path/to/realtime-voice-component zod
    import 'realtime-voice-component/styles.css';
  2. 2. 後端加返Session代理（必須）
    瀏覽器唔可以直接調用OpenAI，要你自己嘅後端轉發SDP同session配置。官方出咗個Node範例，啲code好短。
  3. 3. 建立Voice Adapter（應用狀態橋接層）
    用 useMemo 包裝你啲狀態讀取同操作方法（例如setPrompt、startRun、sendToast等），可以保持引用穩定。
  4. 4. 用Zod定義工具（最關鍵嗰步）
    const tools = useMemo(() => [
    defineVoiceTool({
    name: "set_prompt",
    description: "替換當前提示詞",
    parameters: z.object({ prompt: z.string().min(1) }),
    execute: ({ prompt }) => {
    setPrompt(prompt);
    return { ok: true };
        }
      }),
    // 可加入 get_screen_state 等狀態查詢工具
    ], []);
  5. 5. 建立並配置Controller
    const controller = createVoiceControlController({
    activationMode: "vad",        // 語音活動檢測
    auth: { sessionEndpoint: "/session" },
    instructions: "使用提供的工具控制當前屏幕，優先調用工具而非自由回覆",
    outputMode: "tool-only",      // 重點！只執行工具，不輸出多餘語音
      tools,
    });
  6. 6. 喺React組件入面使用
    const { /* 各種狀態 */ } = useVoiceControl(controller);

    return (
    <>
    <GhostCursorOverlay />     {/* 可選視覺反饋 */}
    <VoiceControlWidgetcontroller={controller}snapToCorners />
    </>
    );
  7. 7. 狀態同步
    UI改變之後，及時將最新狀態發返去session，令模型一直「知道」當前界面。

官方 /demo 目錄入面有好多完整範例：深色模式切換、多步表單、共享狀態國際象棋，建議先透過emo感受下個項目嘅魔力。

分析：機會同限制

優勢：

  • • 安全可控、可預測，適合生產落地。
  • • 極大咁降低雙手操作場景嘅門檻（設計軟件、醫療系統、車載、工廠儀表盤、無障礙訪問等）。
  • • 語音真正成為「操作系統級接口」嘅重要一步。

目前限制：

  • • 工具需要手動預先定義：呢個係目前最大限制。模型能力再強，都只可以調用你寫好嘅工具。如果未來模型可以原生支援動態schema嘅話會更加好。
  • • 非生產級項目：官方明確標註，僅供參考。React Strict Mode下組件銷毀邏輯要特別注意。
  • • 成本同依賴：Realtime API按用量收費，長時間語音交互成本要評估。
  • • 目前主要為英語優化，中文支援雖然有進步，但仲要測試嚇實際效果。

總括嚟講，佢將「語音控制UI」由科幻推向可行嘅階段，但最終效果高度取決於開發者對工具定義嘅質量。

畀開發者嘅實用建議

  1. 1. 由細而美嘅場景開始：先做一個主題切換或表單填充demo，驗證流程再擴展。
  2. 2. 工具設計原則：窄、明確、原子化；一定要提供狀態查詢工具；返回結果要結構化。
  3. 3. 狀態管理：用ref或穩定selector選擇器，避免工具陣列成日變動造成控制器重複配置。
  4. 4. 用戶體驗：Widget保持簡潔，可以自定義更豐富嘅語音UI；加入視覺/聲音反饋提升信任感。
  5. 5. 安全第一：敏感操作建議二次確認；後端代理要做好鑑權同限流。
  6. 6. 未來擴展：結合多模態輸入（圖片+語音）、多設備同步、離線能力等方向值得探索。

最後

OpenAI今次唔止開放咗能力，仲幫手整好咗部分輪子。realtime-voice-component 真正令語音由「輸入方式」升級做「控制範式」。對普通用戶嚟講，未來對住個mon講嘢就可以完成操作嘅日子越來越近；對開發者嚟講，而家就係上手實驗、搶佔先機嘅時候。去行一次demo試嚇啦，你可能會立刻感受到嗰種「講一句嘢，世界就變咗」嘅魔力。

GitHub地址： https://github.com/openai/realtime-voice-component/

（本文係根據官方倉庫最新資訊整理，所有代碼示例以官方README為準，實際使用請以最新版本為準。）

圖片

前兩天OpenAI扔出了一個開源倉庫，可能很多人沒有關注到，這個項目直接把科幻電影裏的語音操控帶到了開發者面前：realtime-voice-component。它能實現下面的效果：

你對着屏幕說一句：“切換深色模式”，界面瞬間變黑；
報一下“姓名張三，生日1995年10月1日”，表單自動填充；
下棋時說“騎士走到 F3”，棋子立刻移動……

這已經不是簡單的“語音轉文字再執行”了，而是語音直接成為應用的頂層控制。模型彷彿“看得到”當前UI狀態，和鼠標鍵盤幾乎等價了，你真的在操控模型。

這個項目是什麼？

這是一個React/瀏覽器端的語音控制層參考方案，專門配合OpenAI的Realtime API（當前主要基於gpt-realtime-1.5模型）打造。

它的核心理念是：

  • • 應用自己定義窄工具（app-owned narrow tools）
  • • UI自己負責狀態變更（而且白箱可控）
  • • 提供React友好的Controller+啓動小部件

這並不是簡單的生產級UI組件庫，而是教育、演示和本地集成的實際案例。它已經足夠完整，開發者幾分鐘就能給現有Web應用加上語音控制。和之前OpenAI的“Computer Use”（讓AI控制鼠標鍵盤的黑箱操作）相比，這個方案安全性和可控性可能會高出一個數量級。

為什麼這麼香？核心亮點

  1. 1. 真正自然的多模態交互
    用戶用自然語音說話，模型通過工具調用直接改變應用狀態，而不是輸出文字再解析。
  2. 2. 白箱安全
    模型只能調用你提前用Zod定義好的工具，不能亂點屏幕、隨意執行任意JS，極大的降低了風險。
  3. 3. React集成極簡
    提供 useVoiceControl Hook、VoiceControlWidget 啓動器、GhostCursor 視覺確認等開箱即用的組件。
  4. 4. 支持狀態感知
    推薦工具里加入 get_screen_state，可以讓模型隨時“看”當前界面狀態，決策更精準。
  5. 5. 低延遲 + 可中斷
    繼承Realtime API的原生語音能力，體驗接近ChatGPT的Advanced Voice Mode。

詳細使用方法（一步步教你上手）

前提條件：

  • • OpenAI API Key（需支持Realtime API）
  • • React項目
  • • 後端需要一個簡單的 /session 代理接口（負責把請求轉發給OpenAI）

完整集成流程（推薦順序）：

  1. 1. Clone倉庫並本地安裝（目前好像還沒發佈到npm）
    # 把倉庫下載到本地
    npm install /path/to/realtime-voice-component zod
    import 'realtime-voice-component/styles.css';
  2. 2. 後端添加Session代理（必須）
    瀏覽器不能直接調用OpenAI，需要你自己的後端轉發SDP和session配置。官方給出了Node示例，代碼很短。
  3. 3. 創建Voice Adapter（應用狀態橋接層）
    用 useMemo 包裝你的狀態讀取和操作方法（如setPrompt、startRun、sendToast等），可以保持引用穩定。
  4. 4. 用Zod定義工具（最關鍵的一步）
    const tools = useMemo(() => [
    defineVoiceTool({
    name: "set_prompt",
    description: "替換當前提示詞",
    parameters: z.object({ prompt: z.string().min(1) }),
    execute: ({ prompt }) => {
    setPrompt(prompt);
    return { ok: true };
        }
      }),
    // 可加入 get_screen_state 等狀態查詢工具
    ], []);
  5. 5. 創建並配置Controller
    const controller = createVoiceControlController({
    activationMode: "vad",        // 語音活動檢測
    auth: { sessionEndpoint: "/session" },
    instructions: "使用提供的工具控制當前屏幕，優先調用工具而非自由回覆",
    outputMode: "tool-only",      // 重點！只執行工具，不輸出多餘語音
      tools,
    });
  6. 6. 在React組件中使用
    const { /* 各種狀態 */ } = useVoiceControl(controller);

    return (
    <>
    <GhostCursorOverlay />     {/* 可選視覺反饋 */}
    <VoiceControlWidgetcontroller={controller}snapToCorners />
    </>
    );
  7. 7. 狀態同步
    UI變化後，及時把最新狀態發回session，讓模型始終“知道”當前界面。

官方 /demo 目錄裏有很多完整示例：深色模式切換、多步表單、共享狀態國際象棋，推薦先通過emo感受一下項目的魔力。

分析：機會與侷限

優勢：

  • • 安全可控、可預測，適合生產落地。
  • • 極大降低雙手操作場景的門檻（設計軟件、醫療系統、車載、工廠儀表盤、無障礙訪問等）。
  • • 語音真正成為“操作系統級接口”的重要一步。

當前侷限：

  • • 工具需要手動預定義：這是當前最大天花板。模型能力再強，也只能調用你寫好的工具。如果未來模型能原生支持動態schema的話會更好。
  • • 非生產級項目：官方明確標註，僅供參考。React Strict Mode下組件銷燬邏輯需特別注意。
  • • 成本與依賴：Realtime API按使用計費，長時間語音交互成本需評估。
  • • 目前主要英語優化，中文支持雖有進步，但仍需測試看看實際效果。

總體來說，它把“語音控制UI”從科幻推向了可落地階段，但最終效果高度依賴開發者對工具定義的質量。

給開發者的實用建議

  1. 1. 從小而美的場景開始：先做一個主題切換或表單填充demo，驗證流程再擴展。
  2. 2. 工具設計原則：窄、明確、原子化；一定要提供狀態查詢工具；返回結果要結構化。
  3. 3. 狀態管理：用ref或穩定selector選擇器，避免工具數組頻繁變動造成控制器重複配置。
  4. 4. 用戶體驗：Widget保持簡潔，可自定義更豐富的語音UI；加入視覺/聲音反饋提升信任感。
  5. 5. 安全第一：敏感操作建議二次確認；後端代理要做好鑑權和限流。
  6. 6. 未來擴展：結合多模態輸入（圖片+語音）、多設備同步、離線能力等方向值得探索。

最後

OpenAI這次不光開放了能力，還把部分輪子造好了。realtime-voice-component 真正讓語音從“輸入方式”升級成了“控制範式”。對普通用戶來說，未來對着屏幕說話就能完成操作的日子越來越近了；對開發者來說，現在正是上手實驗、搶佔先機的時候。去跑一遍demo試試吧，你也許會立刻感受到那種“說一句話，世界就變了”的魔力。

GitHub地址： https://github.com/openai/realtime-voice-component/

（本文基於官方倉庫最新信息整理，所有代碼示例以官方README為準，實際使用請以最新版本為準。）

圖片