30分钟内构建能看、能听、会说的AI应用

本文介绍了如何使用Orga AI平台，通过统一的SDK和API，在30分钟内快速构建集成了视觉、语音和对话功能的实时AI应用，并提供了Next.js、React、React Native等多种框架的详细集成代码示例。

构建AI应用，让它能看、能听、会说话 — 在30分钟内

所以，你想构建一个能观看视频流、倾听用户并以自然语音回应的AI。听起来很酷，对吧？现在尝试构建它。

你需要一个语音转文本API。一个视觉模型。一个语言模型。一个文本转语音服务。用于实时流的WebRTC。用于低延迟通信的WebSocket。然后你把它们全部拼接在一起，祈祷延迟保持在两秒以下，并在音频和视频不同步时调试异步的混乱。

我们经历过。这正是我们构建Orga AI的原因。

统一的SDK。无缝的API流。视觉、语音和对话 — 在700毫秒内协同处理。开箱即用支持40多种语言。是的，你可以在30分钟内让它运行起来。

什么是Orga AI？

Orga AI是一个实时对话式AI平台。用户打开摄像头，自然说话，并向AI展示正在发生的事情。AI观看、倾听并用其语音回应 — 使用他们的语言。

它是这样的： 用户（将手机摄像头对准设备）：“我的智能集线器无法连接。指示灯一直闪烁橙色。” Orga AI（观察闪烁模式）：“我看到橙色闪烁了 — 你的集线器丢失了网络设置。把后面给我看看，我会指导你进行重置。”

无需打字。无需截图。没有“请详细描述你的问题”。AI看到问题，并像同事一样用语音讲解解决方案。这就是你可以用Orga交付的体验。

开始使用Orga SDK

Orga提供了一套从客户端到服务器端的SDK，协同工作以将你的应用程序连接到我们的API。Orga客户端SDK可以与任何基于React的框架集成。选择你的技术栈并跟着操作。

Next.js（最快设置）

我们的Next.js启动器已经搭建好一个完整的应用程序，视频、音频和AI对话功能已预先配置好。

1
2
3
4

npx @orga-ai/create-orga-next-app my-app
cd my-app
npm install
npm run dev

打开localhost:3000。你会看到一个可运行的演示：摄像头预览、语音输入、AI回应。自定义个性，插入你的逻辑，然后交付。

后端代理（Node）

为了保护你的API密钥安全，你首先需要创建一个小的后端服务。此后端充当你的应用和Orga之间的代理。其工作是从Orga API获取ICE服务器和一个临时令牌。你的客户端SDK（React或React Native）将在建立自身连接之前调用此端点。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

import 'dotenv/config';
import express from 'express';
import cors from 'cors';
import { OrgaAI } from '@orga-ai/node';
const app = express();
app.use(cors()); 
const orga = new OrgaAI({
    apiKey: process.env.ORGA_API_KEY!
});
app.get('/api/orga-client-secrets', async (_req, res) => {
    try {
        const { ephemeralToken, iceServers } = await orga.getSessionConfig();
        res.json({ ephemeralToken, iceServers });
    } catch (error) {
        console.error('Failed to get session config:', error);
        res.status(500).json({ error: 'Internal server error' });
    }
});
app.listen(5000, () => console.log('Proxy running on http://localhost:5000'));

一旦此后端端点运行，你的前端SDK就可以调用它以获取会话配置。无需在客户端暴露你的API密钥。

后端部分到此结束。接下来，我们将看到如何从前端调用此端点并建立连接。

React（Vite, CRA 或你自己的设置）

已经有React项目了吗？直接引入SDK。

1

npm install @orga-ai/react

在设置Provider时，此处是你告诉客户端SDK要调用哪个后端端点的地方。该端点返回临时令牌和ICE服务器，然后SDK使用这些信息建立与Orga的安全连接，而永远不会暴露你的API密钥。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

'use client'
import { OrgaAI, OrgaAIProvider } from '@orga-ai/react';

OrgaAI.init({
    logLevel: 'debug',
    model: 'orga-1-beta',
    voice: 'alloy',
    fetchSessionConfig: async () => {
        const res = await fetch('http://localhost:5000/api/orga-client-secrets');
        if (!res.ok) throw new Error('Failed to fetch session config');
        const { ephemeralToken, iceServers } = await res.json();
        return { ephemeralToken, iceServers };
    },
});

export function OrgaClientProvider({ children }: { children: React.ReactNode }) {
    return <OrgaAIProvider>{children}</OrgaAIProvider>;
}

然后用Provider包裹你的应用：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import type { ReactNode } from 'react';
import { OrgaClientProvider } from './providers/OrgaClientProvider';
export default function RootLayout({ children }: { children: ReactNode }) {
    return (
        <html lang="en">
            <body>
                <OrgaClientProvider>{children}</OrgaClientProvider>
            </body>
        </html>
    );
}

现在你已准备好创建你的主文件并导入 useOrgaAI hook。它暴露了你需要的一切：startSession()、endSession()，以及像 connectionState 这样的实时状态。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

'use client'
import {
  useOrgaAI,
  OrgaVideo,
  OrgaAudio,
} from '@orga-ai/react';
 
export default function Home() {
  const {
    startSession,
    endSession,
    connectionState,
    toggleCamera,
    toggleMic,
    isCameraOn,
    isMicOn,
    userVideoStream,
    aiAudioStream,
  } = useOrgaAI();
 
  const isConnected = connectionState === 'connected';
  const isIdle = connectionState === 'disconnected';
 
  return (
    <main className="mx-auto flex max-w-2xl flex-col gap-6 p-8">
      <header>
        <h1 className="text-3xl font-bold">Orga React SDK 快速开始</h1>
        <p className="text-gray-600">状态: {connectionState}</p>
      </header>
 
      <section className="grid grid-cols-2 gap-4">
        <button
          className="rounded bg-blue-600 px-4 py-2 text-white disabled:opacity-50"
          disabled={!isIdle}
          onClick={() => startSession()}
        >
          开始会话
        </button>
        <button
          className="rounded bg-red-600 px-4 py-2 text-white disabled:opacity-50"
          disabled={!isConnected}
          onClick={() => endSession()}
        >
          结束会话
        </button>
        <button
          className="rounded border px-4 py-2 disabled:opacity-50"
          disabled={!isConnected}
          onClick={toggleCamera}
        >
          {isCameraOn ? '摄像头开' : '摄像头关'}
        </button>
        <button
          className="rounded border px-4 py-2 disabled:opacity-50"
          disabled={!isConnected}
          onClick={toggleMic}
        >
          {isMicOn ? '麦克风开' : '麦克风关'}
        </button>
      </section>
 
      <OrgaVideo stream={userVideoStream} className="h-64 w-full rounded bg-black" />
      <OrgaAudio stream={aiAudioStream} />
    </main>
  );
}

React Native（Expo）

为移动端构建吗？相同的API，原生性能。设置与React示例几乎相同，只是在如何导入和初始化SDK方面略有不同。

安装所需的依赖项：

1

npm install @orga-ai/react-native react-native-webrtc react-native-incall-manager

对于Expo，确保更新app.json以请求摄像头/麦克风访问权限：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

{
  "expo": {
    "ios": {
      "infoPlist": {
        "NSCameraUsageDescription": "允许 $(PRODUCT_NAME) 访问您的摄像头",
        "NSMicrophoneUsageDescription": "允许 $(PRODUCT_NAME) 访问您的麦克风"
      }
    },
    "android": {
      "permissions": [
        "android.permission.CAMERA",
        "android.permission.RECORD_AUDIO"
      ]
    }
  }
}

在设置Provider时，此处是你告诉客户端SDK要调用哪个后端端点的地方。该端点返回临时令牌和ICE服务器，然后SDK使用这些信息建立与Orga的安全连接，而永远不会暴露你的API密钥。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

import { Stack } from 'expo-router';
import { OrgaAI, OrgaAIProvider } from '@orga-ai/react-native';
 
OrgaAI.init({
  logLevel: 'debug',
  model: 'orga-1-beta',
  voice: 'alloy',
  fetchSessionConfig: async () => {
    const response = await fetch('http://localhost:5000/api/orga-client-secrets');
    if (!response.ok) throw new Error('Failed to fetch session config');
    const { ephemeralToken, iceServers } = await response.json();
    return { ephemeralToken, iceServers };
  },
});
 
export default function RootLayout() {
  return (
    <OrgaAIProvider>
      <Stack />
    </OrgaAIProvider>
  );
}

现在你已准备好创建你的主文件并导入 useOrgaAI hook。它暴露了你需要的一切：startSession()、endSession()，以及像 connectionState 这样的实时状态。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

import { StyleSheet, View } from 'react-native';
import {
  OrgaAICameraView,
  OrgaAIControls,
  useOrgaAI,
} from '@orga-ai/react-native';
 
export default function HomeScreen() {
  const {
    connectionState,
    isCameraOn,
    isMicOn,
    userVideoStream,
    startSession,
    endSession,
    toggleCamera,
    toggleMic,
    flipCamera,
  } = useOrgaAI();
 
  return (
    <View style={styles.container}>
      <OrgaAICameraView
        streamURL={userVideoStream?.toURL()}
        containerStyle={styles.cameraContainer}
        style={{ width: '100%', height: '100%' }}
      >
        <OrgaAIControls
          connectionState={connectionState}
          isCameraOn={isCameraOn}
          isMicOn={isMicOn}
          onStartSession={startSession}
          onEndSession={endSession}
          onToggleCamera={toggleCamera}
          onToggleMic={toggleMic}
          onFlipCamera={flipCamera}
        />
      </OrgaAICameraView>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#0f172a' },
  cameraContainer: { width: '100%', height: '100%' },
});

与Web端的React不同，使用React Native和Expo构建引入了一些移动端特有的细节。WebRTC和音频需要原生访问设备的摄像头和麦克风，因此你需要在app.json中配置权限。

注意：由于Orga依赖于原生模块，SDK无法在Expo Go内运行。你需要使用开发客户端。

在本地开发时，请记住你的后端端点必须可以从你的移动设备访问。测试时请使用你的本地网络IP（例如 http://192.168.x.x:5000）或像ngrok这样的隧道工具。

有关React、React Native和Node的更详细设置指南、故障排除步骤和深入示例，请查看我们的完整文档。你将找到从设置到生产就绪所需的一切。

你可以构建什么？

Orga听起来不像机器人。语音自然。时机感像人类。用户忘记他们正在与AI对话 — 因此他们可以自由交谈并信任答案。以下是其应用场景：

  1. 客户支持。用户展示他们的路由器。AI发现端口3的红灯并说：“那个端口有硬件故障。试试另一条线缆。”不再需要“描述你的问题。”AI直接看到它。
  2. 无障碍辅助。视障用户在咖啡馆举起手机。“菜单上有什么？”AI大声读出告示板。稍后：“我的咖啡好了吗？”它发现柜台上写有他们名字的杯子。
  3. 现场服务。技术人员将手机对准一个不熟悉的操作面板。“重置开关在哪里？”AI在左侧一个小盖子后面找到它，并指导他们完成步骤 — 无需动手。

如果你的用户需要展示某些东西并谈论它，Orga就是为此而构建的。

通过系统提示使其个性化

每个Orga代理都从一个系统提示开始。它只是一段告诉AI如何行事的文本。想要一个友好的技术支持代表？一个严格的安全检查员？一个耐心的导师？只需写出来。

你是HomeHelp的技术员。 平静地说话。当用户展示损坏的设备时，首先识别型号，然后指导他们进行修复。 如果你看到裸露的电线或水渍， 告诉他们联系专业人员。

立即开始构建

在 platform.orga-ai.com 创建一个免费帐户来构建和测试完整原型。

在 platform.orga-ai.com 注册

从仪表板获取你的API密钥 为你的框架运行启动命令 在 docs.orga-ai.com 探索文档

你已经花了足够多的时间连接各种服务。现在，去构建产品吧。

你会创造什么？

comments powered by Disqus
© 2020 - 2026 qife
使用 Hugo 构建
主题 Stack 由 Jimmy 设计
本站总访问量次 本站访客数人次