DEDUPED Hot AI repos, turned into use cases Get the Monday 5

How to study WebSocket streaming for LLM replies in React Native with AI Chat Demo

Read the protocol, connection, and store code to see how tokens and tool calls stream into the UI.

Short answer: Read app/src/openai/connectionManager.ts to see the module-level WebSocket lifecycle and reconnect with backoff; then read app/src/openai/protocol.ts to see how Responses API requests are built and server events are parsed; read app/src/state/chatStore.ts to follow the streaming state and the tool-call loop. All steps.

Who it is forA React Native engineer building their own streaming AI feature who needs a reference for socket lifecycle and tool-call loops.

The problemStreaming model output over a socket in a mobile app, with reconnects and tool calls, is easy to get wrong without a working example.

The outcomeThe engineer understands how the app prewarms the socket, streams reply text and reasoning summaries, and chains turns with previous_response_id.

What you need first

  • Xcode and CocoaPods for iOS, or the Android setup from the React Native environment guide
  • Node 22.11 or newer
  • An OpenAI API key
  • A Pinecone API key, a populated Pinecone index, and its index host

Steps

  1. Read app/src/openai/connectionManager.ts to see the module-level WebSocket lifecycle and reconnect with backoff.
  2. Read app/src/openai/protocol.ts to see how Responses API requests are built and server events are parsed.
  3. Read app/src/state/chatStore.ts to follow the streaming state and the tool-call loop.
  4. Run npm test to see the existing Jest tests.
  5. Run npm run lint to check the code style the repo uses.

Prompt for your agent

Review margelo/ai-chat-demo and explain how app/src/openai/connectionManager.ts and app/src/openai/protocol.ts stream Responses API events over react-native-nitro-websockets. Output a short written summary of the event flow and confirm with npm test that the existing tests pass.

Caveat. The reference is a demo that keeps keys in the app bundle, so copy the streaming patterns and not the key handling.

Use this in your AI agent

Ask your agent

Using the Deduped MCP, get the setup steps for margelo/ai-chat-demo and "Study WebSocket streaming for LLM replies in React Native"

Add Deduped to Claude Code once

claude mcp add --transport http deduped https://dedupedai.com/mcp

Cursor, ChatGPT, others

Share: X LinkedIn Hacker News Email Copy link

Third-party repos we don't own. AI-written use cases can be wrong. Disclaimer