{"id":35207356,"url":"https://github.com/rapidaai/rapida-react","last_synced_at":"2026-06-03T16:00:34.581Z","repository":{"id":317134870,"uuid":"931929158","full_name":"rapidaai/rapida-react","owner":"rapidaai","description":"Open-source React SDK for real-time Voice AI, voice agents, streaming audio, and observability using Rapida.","archived":false,"fork":false,"pushed_at":"2026-05-23T00:22:49.000Z","size":21836,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-23T02:29:09.630Z","etag":null,"topics":["ai-orchestration","llm","observability","open-source","react","real-time","sdk","sdk-react","stt","tts","voice-ai","voice-ai-agents","web-audio"],"latest_commit_sha":null,"homepage":"https://rapida.ai","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rapidaai.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-13T04:46:14.000Z","updated_at":"2026-05-23T00:21:37.000Z","dependencies_parsed_at":"2025-11-03T06:06:46.424Z","dependency_job_id":"451f6601-0689-4317-89e6-7d0b7478ba4c","html_url":"https://github.com/rapidaai/rapida-react","commit_stats":null,"previous_names":["rapidaai/rapida-react"],"tags_count":46,"template":false,"template_full_name":null,"purl":"pkg:github/rapidaai/rapida-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rapidaai%2Frapida-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rapidaai%2Frapida-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rapidaai%2Frapida-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rapidaai%2Frapida-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rapidaai","download_url":"https://codeload.github.com/rapidaai/rapida-react/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rapidaai%2Frapida-react/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33872298,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-03T02:00:06.370Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["ai-orchestration","llm","observability","open-source","react","real-time","sdk","sdk-react","stt","tts","voice-ai","voice-ai-agents","web-audio"],"created_at":"2025-12-29T15:23:50.237Z","updated_at":"2026-06-03T16:00:34.556Z","avatar_url":"https://github.com/rapidaai.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @rapidaai/react\n\nThe official React/TypeScript SDK for the [Rapida](https://rapida.ai) platform. Build real-time voice agents, make phone calls, manage assistants, knowledge bases, endpoints, conversations, and more — all from your React application via gRPC.\n\n\n\n[![Build and Publish](https://github.com/rapidaai/rapida-react/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/rapidaai/rapida-react/actions/workflows/npm-publish.yml)\n[![Test](https://github.com/rapidaai/rapida-react/actions/workflows/test.yml/badge.svg)](https://github.com/rapidaai/rapida-react/actions/workflows/test.yml)\n[![Twitter Follow](https://img.shields.io/twitter/follow/rapidaai)](https://twitter.com/rapidaai)\n[![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/rapidaai/rapida-react)](https://github.com/rapidaai/voice-ai/releases/latest)\n\n---\n\n## Installation\n\n```sh\nnpm install @rapidaai/react@latest\n```\n\nor using Yarn:\n\n```sh\nyarn add @rapidaai/react@latest\n```\n\n### Peer Dependencies\n\n```json\n{\n  \"react\": \"\u003e=16.8.0\",\n  \"react-dom\": \"\u003e=16.8.0\"\n}\n```\n\n---\n\n## Table of Contents\n\n- [Connection Setup](#connection-setup)\n- [Authentication](#authentication)\n- [Assistants](#assistants)\n- [Phone Calls](#phone-calls)\n- [Voice Agent (Web)](#voice-agent-web)\n- [Conversations](#conversations)\n- [Knowledge Bases](#knowledge-bases)\n- [Endpoints](#endpoints)\n- [Projects \u0026 Organizations](#projects--organizations)\n- [Vault (Provider Credentials)](#vault-provider-credentials)\n- [Connectors](#connectors)\n- [Activity Logs](#activity-logs)\n- [Telemetry](#telemetry)\n- [Notifications](#notifications)\n- [Voice Agent Hooks Reference](#voice-agent-hooks-reference)\n- [Voice Agent Components](#voice-agent-components)\n- [Types \u0026 Configurations](#types--configurations)\n- [Connection Modes](#connection-modes)\n- [License](#license)\n\n---\n\n## Connection Setup\n\nAll SDK functions require a `ConnectionConfig` instance. Create one using an auth mode that fits your use case:\n\n```ts\nimport { ConnectionConfig } from \"@rapidaai/react\";\n\n// Public / SDK access (API key)\nconst config = ConnectionConfig.DefaultConnectionConfig(\n  ConnectionConfig.WithSDK({\n    ApiKey: \"{YOUR_API_KEY}\",\n    UserId: \"user-123\",\n  })\n);\n\n// Authenticated user access\nconst config = ConnectionConfig.DefaultConnectionConfig(\n  ConnectionConfig.WithPersonalToken({\n    Authorization: \"{JWT_TOKEN}\",\n    AuthId: \"{USER_ID}\",\n    ProjectId: \"{PROJECT_ID}\",\n  })\n);\n\n// Debugger / internal testing\nconst config = ConnectionConfig.DefaultConnectionConfig(\n  ConnectionConfig.WithDebugger({\n    authorization: \"{JWT_TOKEN}\",\n    userId: \"{USER_ID}\",\n    projectId: \"{PROJECT_ID}\",\n  })\n);\n```\n\n### Custom Endpoint (Self-Hosted)\n\n```ts\nconst config = ConnectionConfig.DefaultConnectionConfig(\n  ConnectionConfig.WithSDK({ ApiKey: \"...\", UserId: \"...\" })\n).withCustomEndpoint({\n  assistant: \"https://your-assistant-api.example.com\",\n  web: \"https://your-web-api.example.com\",\n  endpoint: \"https://your-endpoint-api.example.com\",\n});\n```\n\n---\n\n## Authentication\n\nAuthenticate users, manage passwords, and integrate social login.\n\n```ts\nimport {\n  AuthenticateUser,\n  AuthorizeUser,\n  RegisterUser,\n  VerifyToken,\n  ForgotPassword,\n  CreatePassword,\n  ChangePassword,\n  GetUser,\n  UpdateUser,\n  GetAllUser,\n  Google,\n  Linkedin,\n  Github,\n} from \"@rapidaai/react\";\n```\n\n### Authenticate a User\n\n```ts\nAuthenticateUser(config, \"user@example.com\", \"password123\", (err, response) =\u003e {\n  if (err) return console.error(err);\n  console.log(\"Token:\", response.getToken());\n});\n```\n\n### Register a New User\n\n```ts\nRegisterUser(config, request, (err, response) =\u003e {\n  if (err) return console.error(err);\n  console.log(\"Registered:\", response.getToken());\n});\n```\n\n### Social Authentication\n\n```ts\n// Google OAuth\nGoogle(config, token, authHeader, (err, response) =\u003e {\n  console.log(\"Google auth:\", response);\n});\n\n// LinkedIn OAuth\nLinkedin(config, token, authHeader, (err, response) =\u003e {\n  console.log(\"LinkedIn auth:\", response);\n});\n\n// GitHub OAuth\nGithub(config, token, authHeader, (err, response) =\u003e {\n  console.log(\"GitHub auth:\", response);\n});\n```\n\n### Password Management\n\n```ts\n// Forgot password\nForgotPassword(config, email, (err, response) =\u003e { /* ... */ });\n\n// Create new password (from reset link)\nCreatePassword(config, request, (err, response) =\u003e { /* ... */ });\n\n// Change password (authenticated)\nChangePassword(config, request, authHeader, (err, response) =\u003e { /* ... */ });\n```\n\n### User Management\n\n```ts\n// Get user details\nGetUser(config, userId, authHeader, (err, response) =\u003e { /* ... */ });\n\n// Update user\nUpdateUser(config, request, authHeader, (err, response) =\u003e { /* ... */ });\n\n// List all users\nGetAllUser(config, page, pageSize, criteria, (err, response) =\u003e { /* ... */ }, authHeader);\n```\n\n---\n\n## Assistants\n\nFull CRUD for voice assistants, including deployments, webhooks, tools, knowledge associations, analysis, and providers.\n\n```ts\nimport {\n  GetAllAssistant,\n  GetAssistant,\n  CreateAssistant,\n  DeleteAssistant,\n  UpdateAssistantVersion,\n  UpdateAssistantDetail,\n  CreateAssistantTag,\n  GetAssistantMessages,\n  GetMessages,\n  GetAllAssistantConversationMessage,\n  GetAssistantConversation,\n} from \"@rapidaai/react\";\n```\n\n### List Assistants\n\n```ts\nGetAllAssistant(config, page, pageSize, criteria, (err, response) =\u003e {\n  if (err) return console.error(err);\n  const assistants = response.getAssistantsList();\n  assistants.forEach((a) =\u003e console.log(a.getName(), a.getId()));\n}, authHeader);\n```\n\n### Get a Single Assistant\n\n```ts\nconst response = await GetAssistant(config, request, authHeader);\nconsole.log(response.getAssistant()?.getName());\n```\n\n### Create an Assistant\n\n```ts\nconst response = await CreateAssistant(config, request, authHeader);\nconsole.log(\"Created assistant:\", response.getAssistant()?.getId());\n```\n\n### Update an Assistant\n\n```ts\n// Update version (full configuration update)\nconst response = await UpdateAssistantVersion(config, request, authHeader);\n\n// Update details (name, description, tags)\nconst response = await UpdateAssistantDetail(config, request, authHeader);\n```\n\n### Delete an Assistant\n\n```ts\nconst response = await DeleteAssistant(config, request, authHeader);\n```\n\n### Assistant Deployments\n\nCreate and manage deployments for different channels:\n\n```ts\nimport {\n  CreateAssistantDebuggerDeployment,\n  GetAssistantDebuggerDeployment,\n  CreateAssistantApiDeployment,\n  GetAssistantApiDeployment,\n  CreateAssistantWebpluginDeployment,\n  GetAssistantWebpluginDeployment,\n  CreateAssistantPhoneDeployment,\n  GetAssistantPhoneDeployment,\n  CreateAssistantWhatsappDeployment,\n  GetAssistantWhatsappDeployment,\n} from \"@rapidaai/react\";\n\n// Create a phone deployment\nconst response = await CreateAssistantPhoneDeployment(config, request, authHeader);\n\n// Get debugger deployment\nconst response = await GetAssistantDebuggerDeployment(config, request, authHeader);\n```\n\n### Webhooks\n\n```ts\nimport {\n  GetAllAssistantWebhook,\n  CreateWebhook,\n  UpdateWebhook,\n  GetAssistantWebhook,\n  DeleteAssistantWebhook,\n  GetAllWebhookLog,\n  GetWebhookLog,\n} from \"@rapidaai/react\";\n\n// Create a webhook\nconst response = await CreateWebhook(config, request, authHeader);\n\n// List webhook logs\nGetAllWebhookLog(config, page, pageSize, criteria, (err, response) =\u003e {\n  console.log(\"Logs:\", response.getLogsList());\n}, authHeader);\n```\n\n### Tools\n\n```ts\nimport {\n  GetAllAssistantTool,\n  CreateAssistantTool,\n  UpdateAssistantTool,\n  GetAssistantTool,\n  DeleteAssistantTool,\n  GetAssistantToolLog,\n  GetAllAssistantToolLog,\n} from \"@rapidaai/react\";\n\n// Create a tool\nconst response = await CreateAssistantTool(config, request, authHeader);\n\n// List tool logs\nGetAllAssistantToolLog(config, page, pageSize, criteria, (err, response) =\u003e {\n  console.log(\"Tool logs:\", response.getLogsList());\n}, authHeader);\n```\n\n### Assistant Knowledge Associations\n\n```ts\nimport {\n  GetAllAssistantKnowledge,\n  CreateAssistantKnowledge,\n  UpdateAssistantKnowledge,\n  GetAssistantKnowledge,\n  DeleteAssistantKnowledge,\n} from \"@rapidaai/react\";\n\n// Link a knowledge base to an assistant\nconst response = await CreateAssistantKnowledge(config, request, authHeader);\n```\n\n### Analysis\n\n```ts\nimport {\n  GetAllAssistantAnalysis,\n  CreateAnalysis,\n  UpdateAnalysis,\n  GetAssistantAnalysis,\n  DeleteAssistantAnalysis,\n} from \"@rapidaai/react\";\n\nconst response = await CreateAnalysis(config, request, authHeader);\n```\n\n### Providers\n\n```ts\nimport {\n  CreateAssistantProvider,\n  GetAllAssistantProvider,\n} from \"@rapidaai/react\";\n\nconst response = await CreateAssistantProvider(config, request, authHeader);\n```\n\n---\n\n## Phone Calls\n\nInitiate outbound phone calls and bulk calls via SIP/telephony.\n\n```ts\nimport {\n  CreatePhoneCall,\n  CreateBulkPhoneCall,\n  CreatePhoneCallRequest,\n  CreateBulkPhoneCallRequest,\n} from \"@rapidaai/react\";\n```\n\n### Make a Phone Call\n\n```ts\nconst request = new CreatePhoneCallRequest();\nrequest.setAssistantid(\"{ASSISTANT_ID}\");\nrequest.setPhonenumber(\"+1234567890\");\n\nconst response = await CreatePhoneCall(config, request, authHeader);\nconsole.log(\"Call initiated:\", response.getConversationid());\n```\n\n### Make Bulk Phone Calls\n\n```ts\nconst request = new CreateBulkPhoneCallRequest();\nrequest.setAssistantid(\"{ASSISTANT_ID}\");\nrequest.setPhonenumbersList([\"+1234567890\", \"+0987654321\"]);\n\nconst response = await CreateBulkPhoneCall(config, request, authHeader);\nconsole.log(\"Bulk calls initiated:\", response.getConversationidsList());\n```\n\n---\n\n## Voice Agent (Web)\n\nBuild real-time voice and text conversation agents with WebRTC + gRPC streaming, audio visualization, device management, and feedback hooks.\n\n### Quick Start\n\n```tsx\nimport {\n  VoiceAgent,\n  ConnectionConfig,\n  AgentConfig,\n  Channel,\n  InputOptions,\n  StringToAny,\n} from \"@rapidaai/react\";\n\nconst agent = new VoiceAgent(\n  ConnectionConfig.DefaultConnectionConfig(\n    ConnectionConfig.WithSDK({\n      ApiKey: \"{YOUR_API_KEY}\",\n      UserId: \"user-123\",\n    })\n  ).withConnectionCallback({\n    onConnect: () =\u003e console.log(\"Connected\"),\n    onDisconnect: () =\u003e console.log(\"Disconnected\"),\n    onError: () =\u003e console.log(\"Connection error\"),\n  }),\n\n  new AgentConfig(\n    \"{ASSISTANT_ID}\",\n    new InputOptions([Channel.Audio, Channel.Text], Channel.Text)\n  )\n    .addKeywords([\"Rapida\"])\n    .addArgument(\"name\", \"John\")\n    .addMetadata(\"utm_source\", StringToAny(\"landing_page\")),\n\n  {\n    onAssistantMessage: (msg) =\u003e console.log(\"Assistant:\", msg?.messageText),\n    onUserMessage: (msg) =\u003e console.log(\"User:\", msg?.messageText),\n    onConfiguration: (cfg) =\u003e console.log(\"Config:\", cfg),\n    onInterrupt: () =\u003e console.log(\"Interrupted\"),\n    onInitialization: (init) =\u003e console.log(\"Session started:\", init),\n    onToolCall: (toolCall) =\u003e {\n      console.log(\"Tool call:\", toolCall);\n      // Return a result to send back to server, or void to skip\n      return { status: \"completed\" };\n    },\n  }\n);\n```\n\n### Full Voice Agent UI Example\n\nA production-ready example showing connection, messaging, audio visualization, input mode toggling, mute controls, device selection, and message rendering.\n\n#### 1. Create the Voice Agent Component\n\n```tsx\nimport React, { FC, useMemo, useState } from \"react\";\nimport {\n  VoiceAgent as VoiceAgentCore,\n  ConnectionConfig,\n  AgentConfig,\n  AgentCallback,\n  useConnectAgent,\n  useAgentMessages,\n  useInputModeToggleAgent,\n  useMuteAgent,\n  useMultibandMicrophoneTrackVolume,\n  useSelectInputDeviceAgent,\n  useMessageFeedback,\n  MultibandAudioVisualizerComponent,\n  Channel,\n  MessageRole,\n  MessageStatus,\n  Feedback,\n} from \"@rapidaai/react\";\n\ninterface VoiceAgentProps {\n  connectConfig: ConnectionConfig;\n  agentConfig: AgentConfig;\n  agentCallback?: AgentCallback;\n}\n\nexport const VoiceAgent: FC\u003cVoiceAgentProps\u003e = ({\n  connectConfig,\n  agentConfig,\n  agentCallback,\n}) =\u003e {\n  const agent = useMemo(\n    () =\u003e new VoiceAgentCore(connectConfig, agentConfig, agentCallback),\n    [connectConfig, agentConfig, agentCallback]\n  );\n\n  return (\n    \u003cdiv className=\"flex flex-col h-screen\"\u003e\n      \u003cConversationMessages agent={agent} /\u003e\n      \u003cMessagingControls agent={agent} /\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n#### 2. Display Conversation Messages\n\n```tsx\nconst ConversationMessages: FC\u003c{ agent: VoiceAgentCore }\u003e = ({ agent }) =\u003e {\n  const { messages } = useAgentMessages(agent);\n  const { handleHelpfulnessFeedback } = useMessageFeedback(agent);\n\n  return (\n    \u003cdiv className=\"flex-1 overflow-y-auto p-4 space-y-4\"\u003e\n      {messages.map((msg) =\u003e (\n        \u003cdiv\n          key={msg.id}\n          className={`flex ${\n            msg.role === MessageRole.User ? \"justify-end\" : \"justify-start\"\n          }`}\n        \u003e\n          \u003cdiv\n            className={`max-w-md px-4 py-2 rounded-lg ${\n              msg.role === MessageRole.User\n                ? \"bg-blue-600 text-white\"\n                : \"bg-gray-100 text-gray-900\"\n            }`}\n          \u003e\n            {msg.messages.map((text, i) =\u003e (\n              \u003cp key={i}\u003e{text}\u003c/p\u003e\n            ))}\n            {msg.status === MessageStatus.Pending \u0026\u0026 (\n              \u003cspan className=\"text-xs opacity-50\"\u003etyping...\u003c/span\u003e\n            )}\n          \u003c/div\u003e\n\n          {msg.role === MessageRole.System \u0026\u0026 (\n            \u003cdiv className=\"flex gap-1 ml-2\"\u003e\n              \u003cbutton\n                onClick={() =\u003e\n                  handleHelpfulnessFeedback(msg.id, Feedback.Helpful)\n                }\n              \u003e\n                👍\n              \u003c/button\u003e\n              \u003cbutton\n                onClick={() =\u003e\n                  handleHelpfulnessFeedback(msg.id, Feedback.NotHelpful)\n                }\n              \u003e\n                👎\n              \u003c/button\u003e\n            \u003c/div\u003e\n          )}\n        \u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  );\n};\n```\n\n#### 3. Build Messaging Controls (Text + Voice)\n\n```tsx\nconst MessagingControls: FC\u003c{ agent: VoiceAgentCore }\u003e = ({ agent }) =\u003e {\n  const [text, setText] = useState(\"\");\n  const { handleConnectAgent, handleDisconnectAgent, isConnected, isConnecting } =\n    useConnectAgent(agent);\n  const { channel, handleTextToggle, handleVoiceToggle } =\n    useInputModeToggleAgent(agent);\n  const { isMuted, handleToggleMute } = useMuteAgent(agent);\n\n  const micVolume = useMultibandMicrophoneTrackVolume(agent, 5, 0.05, 0.85);\n\n  const { devices, activeDeviceId, setActiveMediaDevice } =\n    useSelectInputDeviceAgent({ voiceAgent: agent, requestPermissions: true });\n\n  const handleSendText = () =\u003e {\n    if (!text.trim()) return;\n    agent.onSendText(text);\n    setText(\"\");\n  };\n\n  return (\n    \u003cdiv className=\"border-t p-4\"\u003e\n      \u003cdiv className=\"flex gap-2 mb-3\"\u003e\n        \u003cbutton\n          onClick={handleTextToggle}\n          className={channel === Channel.Text ? \"font-bold\" : \"\"}\n        \u003e\n          Text\n        \u003c/button\u003e\n        \u003cbutton\n          onClick={async () =\u003e {\n            await handleVoiceToggle();\n            if (!isConnected) await handleConnectAgent();\n          }}\n          className={channel === Channel.Audio ? \"font-bold\" : \"\"}\n        \u003e\n          Voice\n        \u003c/button\u003e\n      \u003c/div\u003e\n\n      {channel === Channel.Text \u0026\u0026 (\n        \u003cdiv className=\"flex gap-2\"\u003e\n          \u003cinput\n            value={text}\n            onChange={(e) =\u003e setText(e.target.value)}\n            onKeyDown={(e) =\u003e e.key === \"Enter\" \u0026\u0026 handleSendText()}\n            placeholder=\"Type a message...\"\n            className=\"flex-1 border rounded px-3 py-2\"\n          /\u003e\n          \u003cbutton onClick={handleSendText}\u003eSend\u003c/button\u003e\n          {!isConnected \u0026\u0026 (\n            \u003cbutton onClick={handleConnectAgent} disabled={isConnecting}\u003e\n              {isConnecting ? \"Connecting...\" : \"Connect\"}\n            \u003c/button\u003e\n          )}\n        \u003c/div\u003e\n      )}\n\n      {channel === Channel.Audio \u0026\u0026 isConnected \u0026\u0026 (\n        \u003cdiv className=\"flex items-center gap-4\"\u003e\n          \u003cMultibandAudioVisualizerComponent\n            state={isMuted ? \"disconnected\" : \"listening\"}\n            barWidth={4}\n            minBarHeight={2}\n            maxBarHeight={40}\n            frequencies={micVolume}\n          /\u003e\n          \u003cbutton onClick={handleToggleMute}\u003e\n            {isMuted ? \"Unmute\" : \"Mute\"}\n          \u003c/button\u003e\n          \u003cselect\n            value={activeDeviceId}\n            onChange={(e) =\u003e setActiveMediaDevice(e.target.value)}\n          \u003e\n            {devices.map((d) =\u003e (\n              \u003coption key={d.deviceId} value={d.deviceId}\u003e\n                {d.label || \"Unknown Device\"}\n              \u003c/option\u003e\n            ))}\n          \u003c/select\u003e\n          \u003cbutton onClick={handleDisconnectAgent}\u003eStop\u003c/button\u003e\n        \u003c/div\u003e\n      )}\n    \u003c/div\u003e\n  );\n};\n```\n\n#### 4. Wire It Up\n\n```tsx\nimport { ConnectionConfig, AgentConfig, Channel, InputOptions, StringToAny } from \"@rapidaai/react\";\nimport { VoiceAgent } from \"./voice-agent\";\n\nfunction App() {\n  const connectConfig = ConnectionConfig.DefaultConnectionConfig(\n    ConnectionConfig.WithSDK({\n      ApiKey: \"{YOUR_API_KEY}\",\n      UserId: \"user-123\",\n    })\n  );\n\n  const agentConfig = new AgentConfig(\n    \"{ASSISTANT_ID}\",\n    new InputOptions([Channel.Audio, Channel.Text], Channel.Text)\n  )\n    .setUserIdentifier(\"user-123\", \"John Doe\")\n    .addKeywords([\"Rapida\"])\n    .addMetadata(\"source\", StringToAny(\"web\"));\n\n  return \u003cVoiceAgent connectConfig={connectConfig} agentConfig={agentConfig} /\u003e;\n}\n```\n\n#### AgentConfig Methods\n\n| Method | Description |\n| --- | --- |\n| `.addKeywords(string[])` | Add pronunciation keywords the model should speak clearly. |\n| `.addArgument(key, value)` | Add a prompt variable argument (used in prompt templates). |\n| `.addMetadata(key, Any)` | Attach metadata (e.g., tracking IDs, UTM params). |\n| `.addCustomOption(key, Any)` | Add custom options (e.g., `listen.language`, `speak.language`). |\n| `.setUserIdentifier(id, name?)` | Set the end-user's identity for conversation context. |\n\n---\n\n## Conversations\n\nManage assistant conversations, message/conversation metrics, and bidirectional talk streams.\n\n```ts\nimport {\n  AssistantTalk,\n  GetAllAssistantConversation,\n  CreateMessageMetric,\n  CreateConversationMetric,\n  GetAssistantConversation,\n  GetAllAssistantConversationMessage,\n} from \"@rapidaai/react\";\n```\n\n### List Conversations\n\n```ts\nGetAllAssistantConversation(config, page, pageSize, criteria, (err, response) =\u003e {\n  if (err) return console.error(err);\n  const conversations = response.getConversationsList();\n  conversations.forEach((c) =\u003e console.log(c.getId(), c.getStatus()));\n}, authHeader);\n```\n\n### Get Conversation Details\n\n```ts\nconst response = await GetAssistantConversation(config, request, authHeader);\nconsole.log(\"Conversation:\", response.getConversation());\n```\n\n### Get Conversation Messages\n\n```ts\nGetAllAssistantConversationMessage(config, page, pageSize, criteria, (err, response) =\u003e {\n  const messages = response.getMessagesList();\n  messages.forEach((m) =\u003e console.log(m.getRole(), m.getText()));\n}, authHeader);\n```\n\n### Submit Message Feedback\n\n```ts\nconst response = await CreateMessageMetric(config, request, authHeader);\n```\n\n### Submit Conversation Feedback\n\n```ts\nconst response = await CreateConversationMetric(config, request, authHeader);\n```\n\n### Bidirectional Talk Stream\n\n```ts\nconst stream = AssistantTalk(config, authHeader);\n// stream is a bidirectional gRPC stream for real-time conversation\n```\n\n---\n\n## Knowledge Bases\n\nCreate, manage, and index knowledge bases and their documents.\n\n```ts\nimport {\n  CreateKnowledge,\n  GetKnowledgeBase,\n  GetAllKnowledgeBases,\n  UpdateKnowledgeDetail,\n  CreateKnowledgeTag,\n  CreateKnowledgeDocument,\n  GetAllKnowledgeDocument,\n  GetAllKnowledgeDocumentSegment,\n  DeleteKnowledgeDocumentSegment,\n  UpdateKnowledgeDocumentSegment,\n  GetKnowledgeLog,\n  GetAllKnowledgeLog,\n  IndexKnowledgeDocument,\n} from \"@rapidaai/react\";\n```\n\n### Create a Knowledge Base\n\n```ts\nCreateKnowledge(config, providerModelId, providerId, name, description, tags, authHeader, (err, response) =\u003e {\n  if (err) return console.error(err);\n  console.log(\"Knowledge created:\", response.getKnowledge()?.getId());\n});\n```\n\n### Upload and Index Documents\n\n```ts\n// Create a document in the knowledge base\nCreateKnowledgeDocument(config, knowledgeId, documents, authHeader, (err, response) =\u003e {\n  console.log(\"Document uploaded:\", response.getKnowledgedocumentsList());\n});\n\n// Index the document for search\nIndexKnowledgeDocument(config, knowledgeId, documentIds, indexType, authHeader, (err, response) =\u003e {\n  console.log(\"Indexing started\");\n});\n```\n\n### List Documents\n\n```ts\nGetAllKnowledgeDocument(config, knowledgeId, page, pageSize, criteria, authHeader, (err, response) =\u003e {\n  const docs = response.getKnowledgedocumentsList();\n  docs.forEach((d) =\u003e console.log(d.getName(), d.getStatus()));\n});\n```\n\n### Document Segments\n\n```ts\n// List segments\nGetAllKnowledgeDocumentSegment(config, documentId, page, pageSize, criteria, authHeader, (err, response) =\u003e {\n  console.log(\"Segments:\", response.getKnowledgedocumentsegmentsList());\n});\n\n// Update a segment\nUpdateKnowledgeDocumentSegment(config, request, authHeader, (err, response) =\u003e { /* ... */ });\n\n// Delete a segment\nDeleteKnowledgeDocumentSegment(config, request, authHeader, (err, response) =\u003e { /* ... */ });\n```\n\n### Knowledge Logs\n\n```ts\nGetAllKnowledgeLog(config, page, pageSize, criteria, (err, response) =\u003e {\n  console.log(\"Knowledge logs:\", response.getLogsList());\n}, authHeader);\n```\n\n---\n\n## Endpoints\n\nCreate and manage LLM endpoints with provider models, retry/cache configurations, and invocation.\n\n```ts\nimport {\n  GetAllEndpoint,\n  GetEndpoint,\n  CreateEndpoint,\n  UpdateEndpointVersion,\n  UpdateEndpointDetail,\n  CreateEndpointTag,\n  GetAllEndpointProviderModel,\n  CreateEndpointProviderModel,\n  CreateEndpointRetryConfiguration,\n  CreateEndpointCacheConfiguration,\n  GetAllEndpointLog,\n  GetEndpointLog,\n  Invoke,\n} from \"@rapidaai/react\";\n```\n\n### List Endpoints\n\n```ts\nGetAllEndpoint(config, page, pageSize, criteria, (err, response) =\u003e {\n  const endpoints = response.getEndpointsList();\n  endpoints.forEach((e) =\u003e console.log(e.getName(), e.getId()));\n}, authHeader);\n```\n\n### Create an Endpoint\n\n```ts\nconst response = await CreateEndpoint(config, request, authHeader);\nconsole.log(\"Endpoint created:\", response.getEndpoint()?.getId());\n```\n\n### Configure Retry and Cache\n\n```ts\n// Set retry configuration\nconst retryResponse = await CreateEndpointRetryConfiguration(config, request, authHeader);\n\n// Set cache configuration\nconst cacheResponse = await CreateEndpointCacheConfiguration(config, request, authHeader);\n```\n\n### Invoke an Endpoint\n\n```ts\nimport { InvokeRequest } from \"@rapidaai/react\";\n\nconst request = new InvokeRequest();\n// ... set endpoint ID, parameters, etc.\n\nconst response = await Invoke(config, request, authHeader);\nconsole.log(\"Result:\", response.getResult());\n```\n\n### Endpoint Logs\n\n```ts\nGetAllEndpointLog(config, page, pageSize, criteria, (err, response) =\u003e {\n  console.log(\"Endpoint logs:\", response.getLogsList());\n}, authHeader);\n```\n\n---\n\n## Projects \u0026 Organizations\n\n### Organizations\n\n```ts\nimport {\n  CreateOrganization,\n  UpdateOrganization,\n  GetOrganization,\n} from \"@rapidaai/react\";\n\n// Create organization\nCreateOrganization(config, \"Acme Corp\", \"50-200\", \"Technology\", authHeader, (err, response) =\u003e {\n  console.log(\"Org created:\", response.getOrganization()?.getId());\n});\n\n// Update organization\nUpdateOrganization(config, orgId, authHeader, (err, response) =\u003e { /* ... */ },\n  \"New Name\", \"Finance\", \"contact@acme.com\"\n);\n\n// Get organization\nGetOrganization(config, orgId, authHeader, (err, response) =\u003e {\n  console.log(\"Org:\", response.getOrganization()?.getOrganizationname());\n});\n```\n\n### Projects\n\n```ts\nimport {\n  CreateProject,\n  UpdateProject,\n  GetProject,\n  GetAllProject,\n  DeleteProject,\n  AddUsersToProject,\n  GetAllProjectCredential,\n  CreateProjectCredential,\n} from \"@rapidaai/react\";\n\n// Create project\nconst response = await CreateProject(config, request, authHeader);\n\n// List projects\nGetAllProject(config, page, pageSize, criteria, (err, response) =\u003e {\n  response.getProjectsList().forEach((p) =\u003e console.log(p.getName()));\n}, authHeader);\n\n// Add users to project\nAddUsersToProject(config, \"user@example.com\", \"admin\", [\"project-id-1\"], (err, response) =\u003e {\n  console.log(\"User added\");\n}, authHeader);\n\n// Manage project credentials (API keys)\nGetAllProjectCredential(config, projectId, page, pageSize, authHeader, (err, response) =\u003e {\n  console.log(\"Credentials:\", response.getCredentialsList());\n});\n\nconst credential = await CreateProjectCredential(config, request, authHeader);\n```\n\n---\n\n## Vault (Provider Credentials)\n\nSecurely manage API keys for external providers (OpenAI, Anthropic, etc.).\n\n```ts\nimport {\n  CreateProviderKey,\n  DeleteProviderKey,\n  GetAllOrganizationCredential,\n} from \"@rapidaai/react\";\n\n// Store a provider API key\nconst response = await CreateProviderKey(config, request, authHeader);\n\n// List all credentials\nGetAllOrganizationCredential(config, page, pageSize, criteria, (err, response) =\u003e {\n  console.log(\"Credentials:\", response.getCredentialsList());\n}, authHeader);\n\n// Delete a credential\nDeleteProviderKey(config, providerKeyId, (err, response) =\u003e {\n  console.log(\"Deleted\");\n}, authHeader);\n```\n\n---\n\n## Connectors\n\nConnect to external platforms (Google, GitHub, Slack, etc.) via OAuth.\n\n```ts\nimport { GeneralConnect, GetConnectorFiles } from \"@rapidaai/react\";\n\n// Establish an OAuth connection\nGeneralConnect(config, \"google\", code, state, scope, authHeader, (err, response) =\u003e {\n  console.log(\"Connected:\", response);\n});\n\n// Retrieve files from a connector\nGetConnectorFiles(config, \"google\", criterias, authHeader, (err, response) =\u003e {\n  console.log(\"Files:\", response.getFilesList());\n});\n```\n\n---\n\n## Activity Logs\n\nAccess audit logs for tracking platform operations.\n\n```ts\nimport { GetActivities, GetActivity } from \"@rapidaai/react\";\n\n// List audit logs with pagination and filtering\nGetActivities(config, projectId, page, pageSize, criteria, (err, response) =\u003e {\n  console.log(\"Activities:\", response.getAuditlogsList());\n}, authHeader);\n\n// Get a single audit log entry\nGetActivity(config, logId, (err, response) =\u003e {\n  console.log(\"Activity:\", response.getAuditlog());\n}, authHeader);\n```\n\n---\n\n## Telemetry\n\nRetrieve assistant telemetry data (latency, usage, performance metrics).\n\n```ts\nimport { GetAllAssistantTelemetry } from \"@rapidaai/react\";\n\nconst response = await GetAllAssistantTelemetry(config, request, authHeader);\nconsole.log(\"Telemetry:\", response.getTelemetryList());\n```\n\n---\n\n## Notifications\n\nManage notification preferences.\n\n```ts\nimport {\n  GetNotificationSetting,\n  UpdateNotificationSetting,\n} from \"@rapidaai/react\";\n\n// Get current settings\nconst settings = await GetNotificationSetting(config, request, authHeader);\n\n// Update settings\nconst updated = await UpdateNotificationSetting(config, request, authHeader);\n```\n\n---\n\n## Voice Agent Hooks Reference\n\n| Hook | Returns |\n| --- | --- |\n| `useConnectAgent(agent)` | `{ handleConnectAgent, handleDisconnectAgent, isConnected, isConnecting }` |\n| `useAgentMessages(agent)` | `{ messages }` — reactive list of `Message` objects. |\n| `useInputModeToggleAgent(agent)` | `{ handleTextToggle, handleVoiceToggle, channel }` — switch between text and audio. |\n| `useMuteAgent(agent)` | `{ handleMute, handleUnmute, handleToggleMute, isMuted }` |\n| `useSelectInputDeviceAgent(opts)` | `{ devices, activeDeviceId, setActiveMediaDevice }` — microphone selection. |\n| `useMessageFeedback(agent)` | `{ handleMessageFeedback, handleHelpfulnessFeedback }` — per-message feedback. |\n| `useConversationFeedback(agent)` | `{ handleConversationFeedback, handleHelpfulnessFeedback }` — conversation-level feedback. |\n| `useMultibandMicrophoneTrackVolume(agent, bands, lo, hi)` | `Float32Array[]` — mic frequency data for visualization. |\n| `useMultiband3DSpeakerTrackVolume(agent, bands, lo, hi)` | `Float32Array[]` — speaker frequency data. |\n\n---\n\n## Voice Agent Components\n\n| Component | Description |\n| --- | --- |\n| `MultibandAudioVisualizerComponent` | Animated multiband frequency bar visualizer for mic or speaker audio. |\n| `DeviceSelectorComponent` | Dropdown UI for selecting the active microphone device. |\n\n---\n\n## Types \u0026 Configurations\n\n| Type | Description |\n| --- | --- |\n| `ConnectionConfig` | Connection settings. Use `DefaultConnectionConfig()` with `WithSDK()`, `WithDebugger()`, `WithPersonalToken()`, or `WithWebpluginClient()`. |\n| `AgentConfig` | Agent configuration: assistant ID, input/output options, keywords, arguments, metadata, user identifier. |\n| `InputOptions` | Input channel config: `channels`, `channel`, `device`, `iceServers`. |\n| `OutputOptions` | Output channel config: `channels`, `channel`, `device`. |\n| `UserIdentifier` | User identity: `id` and optional `name`. |\n| `AgentCallback` | Callback interface: `onAssistantMessage`, `onUserMessage`, `onConfiguration`, `onInterrupt`, `onToolCall`, `onToolCallResult`, `onInitialization`, `onConnectionStateChange`, `onConnected`, `onDisconnected`, `onError`. |\n| `Channel` | Enum: `Channel.Audio`, `Channel.Text` |\n| `ConnectionState` | Enum: `ConnectionState.Disconnected`, `ConnectionState.Connecting`, `ConnectionState.Connected` |\n| `Message` | Message object: `id`, `role`, `messages[]`, `feedback?`, `time`, `status` |\n| `MessageRole` | Enum: `MessageRole.System`, `MessageRole.User` |\n| `MessageStatus` | Enum: `MessageStatus.Pending`, `MessageStatus.Complete` |\n| `Feedback` | Enum: `Feedback.Helpful`, `Feedback.NotHelpful`, `Feedback.Other` |\n| `MediaDeviceFailure` | Media device error type. |\n\n### Utilities\n\n| Export | Description |\n| --- | --- |\n| `StringToAny(value)` | Wraps a string into a protobuf `Any` for use with `addMetadata()` / `addArgument()`. |\n| `StringArrayToAny(values)` | Wraps a string array into a protobuf `Any`. |\n| `WithPlatform()` | Sets platform metadata on requests. |\n| `WithAuthContext(auth)` | Creates gRPC metadata from auth info. Automatically used by all client functions. |\n| `WithClientContext(auth)` | Creates client context metadata. |\n| `getClientInfo()` | Returns client information (browser, OS, etc.). |\n| `DEBUGGER_SOURCE`, `SDK_SOURCE`, `WEB_PLUGIN_SOURCE` | Source identifiers for connection context. |\n| `HEADER_*` constants | Header keys for environment, source, region, API key, auth, etc. |\n| `agentEventSelector(event)` | Selector for filtering agent events from the event stream. |\n| `AgentEvent` | Enum of all agent event types. |\n\n---\n\n## Connection Modes\n\n| Mode | Factory Method | Use Case |\n| --- | --- | --- |\n| **SDK** | `ConnectionConfig.WithSDK({ ApiKey, UserId })` | Public-facing apps, embedded agents |\n| **Debugger** | `ConnectionConfig.WithDebugger({ authorization, userId, projectId })` | Internal testing with user auth |\n| **Personal Token** | `ConnectionConfig.WithPersonalToken({ Authorization, AuthId, ProjectId })` | Server-side or admin operations |\n| **Web Plugin** | `ConnectionConfig.WithWebpluginClient({ ApiKey, UserId })` | Embedded web plugin deployments |\n\n---\n\n## License\n\nThis project is licensed under the [MIT License](./LICENSE).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frapidaai%2Frapida-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frapidaai%2Frapida-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frapidaai%2Frapida-react/lists"}