# AI use cases for AI Chat Demo (margelo/ai-chat-demo) Repo: [margelo/ai-chat-demo](https://github.com/margelo/ai-chat-demo) | Use cases: 4 | Page: https://dedupedai.com/use-cases/margelo-ai-chat-demo/ A React Native ChatGPT-style mobile chat app that streams OpenAI replies over a WebSocket and answers Margelo questions by searching a Pinecone knowledge base. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Run the Margelo chat app on a simulator with your keys: https://dedupedai.com/use-cases/margelo-ai-chat-demo/run-margelo-chat-app-with-own-keys/ - Point the knowledge base tool at your own Pinecone index: https://dedupedai.com/use-cases/margelo-ai-chat-demo/point-knowledge-base-tool-at-own-index/ - Study WebSocket streaming for LLM replies in React Native: https://dedupedai.com/use-cases/margelo-ai-chat-demo/study-websocket-llm-streaming-in-react-native/ - Plan a relay server that keeps the API keys off the device: https://dedupedai.com/use-cases/margelo-ai-chat-demo/plan-relay-server-before-shipping/ ## How to run the Margelo chat app on a simulator with your keys with AI Chat Demo Repo: [margelo/ai-chat-demo](https://github.com/margelo/ai-chat-demo) | Difficulty: Intermediate | Time: 2 hours | Basis: From the README Install the React Native chat app, add your OpenAI and Pinecone keys, and send a first streamed message. **Who it is for:** A mobile developer who wants a working ChatGPT-style chat app on their own machine before changing anything, usually after finding the repo. **The problem:** Getting a streaming LLM chat with a retrieval tool running in React Native involves native builds, API keys, and a vector index, and it is hard to know where to start. **The outcome:** The app runs on an iOS simulator or Android emulator, answers general questions, and answers Margelo questions from the Pinecone knowledge base. ### Steps 1. Run `cd app` and then `npm install`. 2. Run `cp src/config.example.ts src/config.ts` and fill in your OpenAI key, Pinecone key, and index host in that file. 3. Run `cd ios && pod install && cd ..` to install the iOS pods. 4. Run `npm start` in one terminal to start Metro. 5. Run `npm run ios` or `npm run android` to build and launch the app, then ask a general question and a question about Margelo. ### Prompt to paste into your agent ```text Clone margelo/ai-chat-demo, go into the app folder, and set up the project following the README setup and run steps for . Confirm the app launches and that a Margelo question triggers the search_margelo_kb tool and returns an answer based on retrieved context. ``` ### Caveat The README calls this a demo, and it requires both an OpenAI key and a populated Pinecone index before the knowledge base tool returns useful results. Risk, credentials: The README says API keys live in the app bundle, so keep the config.ts file local and never ship it in a build meant for other people. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/margelo-ai-chat-demo/run-margelo-chat-app-with-own-keys/ ## How to point the knowledge base tool at your own Pinecone index with AI Chat Demo Repo: [margelo/ai-chat-demo](https://github.com/margelo/ai-chat-demo) | Difficulty: Advanced | Time: 2 hours | Basis: From the README Reuse the chat app and retrieval tool with your own Pinecone index and text content. **Who it is for:** A developer or product team with their own documentation who wants a mobile assistant that answers only from that content. **The problem:** Building a retrieval-backed chat that answers only from a specific body of text means wiring a streamed model, a search tool, and a mobile UI together. **The outcome:** The assistant answers questions from your index, and the answers draw on the retrieved text instead of the model's memory. ### Steps 1. Create a Pinecone index with integrated embedding and load your text into it, since the README says raw text goes up and Pinecone embeds it server-side. 2. Open `src/config.ts` and set the Pinecone key and your new index host. 3. Read `app/src/rag/searchKnowledgeBase.ts` and update the system behavior that tells the model to answer Margelo questions only from retrieved context, changing the topic to your own. 4. Run `npm run typecheck` to confirm the changes compile. 5. Run `npm run ios` or `npm run android` and test questions that you know the index can answer. ### Prompt to paste into your agent ```text In the margelo/ai-chat-demo repo, change the knowledge base search to use the Pinecone index host and adjust the retrieval instructions for . Run npm run typecheck and report the result, then ask one question you know the index answers and confirm the reply uses retrieved text. ``` ### Caveat The README does not describe how to populate the index, so the content loading step depends on your own Pinecone process. Risk, credentials: Your Pinecone and OpenAI keys go into the app bundle under this demo setup, so limit their scope and rotate them after testing. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/margelo-ai-chat-demo/point-knowledge-base-tool-at-own-index/ ## How to study WebSocket streaming for LLM replies in React Native with AI Chat Demo Repo: [margelo/ai-chat-demo](https://github.com/margelo/ai-chat-demo) | Difficulty: Intermediate | Time: 1 hour | Basis: From the README Read the protocol, connection, and store code to see how tokens and tool calls stream into the UI. **Who it is for:** A React Native engineer building their own streaming AI feature who needs a reference for socket lifecycle and tool-call loops. **The problem:** Streaming model output over a socket in a mobile app, with reconnects and tool calls, is easy to get wrong without a working example. **The outcome:** The engineer understands how the app prewarms the socket, streams reply text and reasoning summaries, and chains turns with previous_response_id. ### 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 to paste into your agent ```text 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. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/margelo-ai-chat-demo/study-websocket-llm-streaming-in-react-native/ ## How to plan a relay server that keeps the API keys off the device with AI Chat Demo Repo: [margelo/ai-chat-demo](https://github.com/margelo/ai-chat-demo) | Difficulty: Advanced | Time: 3 hours | Basis: From the README Map each key-using call in the app to a server endpoint before any production release. **Who it is for:** A team lead or developer preparing to ship a version of this chat app to real users who must keep OpenAI and Pinecone keys private. **The problem:** The README warns that keys in the app bundle can be extracted by anyone, so a shipped build would expose the accounts. **The outcome:** A written list of which app calls move behind a server, so the keys stay server-side. ### Steps 1. Read the README note that says to put a relay server in front and keep the keys server-side. 2. List every place in `app/src/openai/` and `app/src/rag/` that uses a key from `src/config.ts`. 3. Design a relay server with one endpoint for the model connection and one for the knowledge base search, and note which request fields the app would send to each. (inferred, check the README) 4. Update the app config so it points to the relay URL instead of holding keys, then test with `npm run ios` or `npm run android`. (inferred, check the README) ### Prompt to paste into your agent ```text For the margelo/ai-chat-demo repo, list each file that reads an API key from src/config.ts and propose a relay server design that holds those keys server-side. Output the endpoint list and one verification step that confirms no key remains in the app bundle. ``` ### Caveat The repo does not include a relay server, so the server side is new work the team must build and secure. Risk, credentials: Until a relay exists, any build of this app exposes the OpenAI and Pinecone keys to anyone who extracts them from the bundle. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/margelo-ai-chat-demo/plan-relay-server-before-shipping/