Margelo AI Chat Demo：React Native 流式对话 + RAG 知识库

Margelo 开源了 ai-chat-demo（应用名 MargeloChat）：一个 ChatGPT 风格的 React Native 聊天 Demo，支持流式回复、思考过程展示，以及基于 RAG 的公司知识库问答。仓库目前约 155 stars，主语言 TypeScript。

MargeloChat 演示

项目简介

这不是一个「能聊两句」的玩具壳。它把流式对话、推理摘要、Markdown 渲染、键盘列表、附件图片，以及一个真正的检索工具串在一条链路上：普通问题直接答；问到 Margelo 相关内容时，模型会调用 search_margelo_kb，从 Pinecone 向量库取证据，再基于检索结果回答，而不是靠模型瞎编公司信息。

官方也写了配套文章：Building a ChatGPT-Style AI Chat App in React Native。

核心特性

WebSocket 流式对话：走 OpenAI Responses API，用 react-native-nitro-websockets 原生预热连接，首条消息前 socket 往往已经打开；token 级流式输出，并用 previous_response_id 串会话
RAG 知识库：search_margelo_kb 工具查 Pinecone（integrated embedding，文本直接 upsert，服务端做 embedding）
流式 Markdown + 思考过程：react-native-enriched-markdown 渲染回复；可折叠的 thought process 放在 True Sheet 底部弹层里
ChatGPT 式列表交互：@legendapp/list + 键盘感知，流式回复时滚动和锚点行为更接近桌面端产品
视觉细节：iOS 26+ Liquid Glass（@callstack/liquid-glass），Skia 做的 Thinking shimmer，SF Symbols / Material Icons 双端回退
图片附件：相册选图 → base64 发给模型，气泡里显示缩略图

技术栈

层	选型
框架	React Native 0.86、React 19、TypeScript
状态	Zustand
模型	OpenAI Responses API（WebSocket，`wss://api.openai.com/v1/responses`）
向量库	Pinecone
原生性能	Nitro 系（websockets / fetch / image / modules）
UI	Reanimated、Legend List、Enriched Markdown、True Sheet、Skia、Liquid Glass

Node 要求 >= 22.11，需 New Architecture。Liquid Glass 只在 iOS 26+ 生效，旧系统和平板 Android 会降级成普通圆角样式。

安装与运行

bash

git clone https://github.com/margelo/ai-chat-demo.git
cd ai-chat-demo/app
npm install
cp src/config.example.ts src/config.ts   # 填入密钥
cd ios && pod install && cd ..

npm start          # Metro
npm run ios        # iOS
npm run android    # Android

config.example.ts 里需要填：

OPENAI_API_KEY
OPENAI_WS_URL（默认 wss://api.openai.com/v1/responses）
OPENAI_MODEL（示例里是 gpt-5.5，按你账号可用模型改）
PINECONE_API_KEY / PINECONE_INDEX_HOST / PINECONE_NAMESPACE

仓库自带知识库 ingest 脚本思路（README 提到 scripts/ingest-kb.mjs），索引侧用 integrated embedding，字段 chunk_text。

结构怎么读

如果你只想抄思路，可以按这个顺序看：

openai/connectionManager.ts — WebSocket 生命周期、重连退避
openai/protocol.ts — 拼 Responses 请求、解析流式事件
state/chatStore.ts — 聊天状态、流式、工具调用循环
rag/searchKnowledgeBase.ts — Pinecone 检索实现
components/MessageBubble.tsx / ReasoningSheet.tsx — 气泡和思考过程 UI
screens/ChatScreen.tsx — 列表 + Composer 接线

Recents 历史页目前是 UI 向 mock，真正会话状态集中在 zustand store。

使用时注意

这是 Demo：密钥写在客户端 config.ts 里，README 写得很直白——本地玩玩可以，上线必须加中继，密钥放服务端。任何人都能从包里抠出 key。

另外你需要自己准备：

可用的 OpenAI 密钥与 WebSocket Responses 权限
填好数据的 Pinecone 索引，否则 Margelo 相关问答没有检索结果

小结

如果你在做 RN 端 AI 聊天，这份仓库比较适合当「可跑的参考实现」：流式协议、RAG 工具调用、思考过程 UI、键盘列表和原生预热连接都齐了，不是只有一个 TextInput + fetch 的骨架。

GitHub：https://github.com/margelo/ai-chat-demo
官方博客：https://blog.margelo.com/building-native-llm-chat-app-with-rag