✨ Super-MCP-App ✨
Your Intelligent, Native Mobile AI Assistant
A fast, sleek, and highly capable mobile AI chat application built with React Native (Expo) and Next.js, powered by Meta LLaMA 3.1 and Supabase.
______________________________________________________________________
🌟 主要特点
- 💬 实时对话式人工智能 –通过NVIDIA NIM与LLaMA 3.1 8B型号的智能代理对话。
- 📱 原生移动体验 –基于React Native&Expo构建，实现流畅、原生的iOS和Android性能。
- 🎨 现代材料3设计 –设计精美的界面
@react-native-paper利用定制的颜色标记。 - 📝 Markdown支持 –AI响应的全文富文本渲染，包括语法突出显示的代码块(
react-native-markdown-display). - 🔄 滑动以删除 –聊天列表中流畅的、基于手势的对话管理（Powered by
react-native-gesture-handler). - 🔐 安全无服务器后端 –Next.js充当API网关，安全路由AI请求，由Subabase支持，用于身份验证和持久聊天存储。
______________________________________________________________________
🛠️ 技术栈
应用程序（前端）
- 框架：React Native&Expo
- 导航：反应导航（底部选项卡和堆栈导航器）
- UI/造型：React Native Paper
- 手势：React原生手势处理程序
- 标记语言：React原生Markdown显示
API和数据库（后端）
- API框架：Next.js 16（应用路由器）
- 数据库和身份验证：Supabase（具有行级安全性的PostgreSQL）
- AI引擎：NVIDIA API（运行与OpenAI兼容的终结点
meta/llama-3.1-8b-instruct)
______________________________________________________________________
🏗️ 系统架构
该项目遵循现代、解耦的架构，由 模型上下文协议（MCP），将外部工具提供商安全地连接到AI模型，而不会将凭据暴露给移动客户端。
graph TD
%% Frontend Layer
subgraph Mobile_Client ["📱 Mobile App (React Native/Expo)"]
UI["React Native UI"]
State["State & API Layers"]
end
%% Backend Layer (Next.js API)
subgraph API_Gateway ["⚙️ Next.js Serverless Backend"]
AuthAPI["/api/auth"]
ChatAPI["/api/conversations"]
subgraph MCP_Architecture ["🔌 Model Context Protocol (MCP) Integration"]
MessageAPI["/api/messages"]
MCPClient["MCP Client Engine"]
Tools["Tool & Resource Registry"]
end
end
%% External Infrastructure
subgraph External_Services ["🌐 Core Infrastructure & AI"]
SupaDB[("Supabase (PostgreSQL)")]
SupaAuth{"Supabase Auth"}
Nvidia(("NVIDIA NIM (LLaMA 3.1)"))
end
%% MCP Providers Layer
subgraph MCP_Providers ["🛠️ MCP Servers (Providers)"]
FigmaMCP["Figma MCP Server"]
CanvaMCP["Canva MCP Server"]
CustomMCP["Custom External Data MCPs"]
end
%% Mobile to API Routing
State |"REST"| AuthAPI
State |"REST"| ChatAPI
State |"REST"| MessageAPI
%% Backend to Infra Routing
AuthAPI |"Authentication"| SupaAuth
ChatAPI |"Storage & Retrieval"| SupaDB
MessageAPI |"RLS Authenticated Reads"| SupaDB
%% The MCP Flow Model
MessageAPI --> MCPClient
MCP_Providers |"Standardized Tool/Resource Context (MCP)"| MCPClient
MCPClient --> Tools
Tools |"Injected Tools & Function Calls"| Nvidia______________________________________________________________________
🚀 入门指南
按照以下步骤操作，使应用程序在您的计算机和模拟器上本地运行。
先决条件
在开始之前，请确保已安装并配置以下内容：
1.设置后端
后端使用Next.js应用程序路由器作为安全的API网关。
# Navigate to the backend directory
cd backend
# Install dependencies
npm install创建一个 .env 文件在 backend/ 与您的配置详细信息匹配的目录：
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
# NVIDIA AI Configuration
NVIDIA_API_KEY=your_nvidia_nim_api_key
NVIDIA_BASE_URL=https://integrate.api.nvidia.com/v1
# Local Network App Configuration
NEXT_PUBLIC_API_URL=http://127.0.0.1:3000启动API开发服务器：
npm run dev2.设置移动应用程序
在根项目目录中，安装Expo软件包：
# Return to the root folder
cd ..
# Install app dependencies
npm install
# Start the Expo bundler
npx expo start从世博会航站楼，按 i 打开iOS模拟器或使用扫描二维码 世博Go 您的物理设备上的应用程序。
______________________________________________________________________
📦 项目结构
Super-MCP-App/
├── src/ # Front-end React Native App
│ ├── navigation/ # Tab and Stack Navigators
│ ├── screens/ # React Native Screens (Home, Chat, Profile, etc.)
│ ├── services/ # API Fetch Handlers & Supabase configs
│ └── theme/ # UI themer (Colors, Typography)
├── backend/ # Next.js Backend API
│ ├── app/api/ # Serverless Routes (Messages, Conversations, Auth)
│ └── lib/ # NVIDIA SDK handlers and Supabase Admin
└── README.md ______________________________________________________________________
🤝 贡献
我们欢迎社区的贡献！无论是添加新功能、修复错误还是改进文档，您的帮助都能让Super MCP App更好地为每个人服务。
请阅读我们的 贡献指南 开始设置您的开发环境并提交Pull Requests。
______________________________________________________________________
🐛 问题和Bug报告
发现错误或对新功能有好主意？我们很想听听！ 请使用我们的 问题追踪器 报告错误或请求功能。我们准备了模板来帮助您提供所有必要的信息。
______________________________________________________________________
Designed for fluidity, powered by modern AI.
Made with ❤️ by the Super-MCP-App Open Source Organization.