diff --git a/content/en-US/recipes/integrate-qca-realtime-en/index.md b/content/en-US/recipes/integrate-qca-realtime-en/index.md new file mode 100644 index 0000000..343614e --- /dev/null +++ b/content/en-US/recipes/integrate-qca-realtime-en/index.md @@ -0,0 +1,298 @@ +--- +schema_version: 1 +slug: integrate-qca-realtime-en +title: Integrate QCA Realtime into a Web Application +summary: Add QCA Realtime to a Web application, covering conversation creation, WebSocket connections, audio input and output, task updates, and reconnection. +type: recipe +category: build-deploy +tags: + - forward + - multimodal + - event-stream + - background-task +author: + name: 如昼 +locale: en-US +translation_of: integrate-qca-realtime +source_url: https://mp.weixin.qq.com/s/xqGxH3dbtGfcgOSx51z8dw +--- + +> This language version was automatically translated by AI. + +## Goal and use case + +This recipe adds real-time voice to a Web application with an existing Forward Template: + +- The voice Agent handles conversation and explains results. +- The task Agent executes tasks using the Template's tools and runtime. + +| Concept | Purpose | +| --- | --- | +| Identity | The application user's identity in Forward, associated when creating a Conversation | +| Template | The task Agent's model, instructions, tools, and runtime configuration | +| Conversation | A voice conversation that can be reconnected to; the application should save its ID | +| Work | A delegated background task, with progress and results reported through `work.*` events | + +The browser uses the application server to create conversations and exchange real-time events. The server authenticates upstream connections: + +```mermaid +sequenceDiagram + participant B as Browser + participant S as Application server + participant R as QCA Realtime + participant A as Task Agent + B->>S: Start conversation + S->>R: Create Conversation + R-->>S: Return conversation_id + S-->>B: Return conversation_id + B->>S: Open application WebSocket + S->>R: Connect upstream with Bearer Token + R-->>S: voice.ready + S-->>B: voice.ready + B->>S: Text or audio + S->>R: Forward input + R->>A: Delegate task as needed + A-->>R: Progress and results + R-->>S: Transcripts, audio, and Work events + S-->>B: Forward events +``` + +Before you start: + +- Credentials and resources: a PAT or SAT, Identity, and Template in the same environment. Exchange a Service Account Key for an SAT first. +- Runtime: a Template with tool permissions and a runtime that can complete the target task. +- Application: a server with WebSocket support, a browser with microphone and Web Audio support, and HTTPS for the deployed page. +- Example tools: curl and Node.js. The application server can use any language. + +Realtime is in Beta. Model, sandbox, and tool usage is billed under the applicable pricing rules. + +## Steps + +The [official Quickstart](https://github.com/QoderAI/forward-quickstart) provides a complete integration example. + +### Step 1: Create a Conversation + +Create the Conversation from the application server. The following curl example shows the request format; replace the placeholders with your credentials and resource IDs: + +```bash +export QODER_ACCESS_TOKEN="" +export IDENTITY_ID="" +export TEMPLATE_ID="