Template Nextjs Ag Ui Supabase

Next.js支持文件AI平台

Next.js 15模板，带有AG-UI协议、Supabase后端和AI驱动的文件分析。包括拖放上传、知识库创建和MCP集成。

AI驱动的文件分析平台，具有拖放上传、知识库创建和MCP集成功能，可实现无缝平台连接。

概述

一个全面的Next.js应用程序，允许用户上传文件，使用AI代理（Google Gemini）对其进行分析，使用向量嵌入构建可搜索的知识库，并通过MCP（模型上下文协议）与外部平台（Google Workspace、Notion、Jira）集成。

主要特点

• 拖放文件上传：直观的文件上传和实时进度跟踪
• AI驱动的分析：使用专门代理的Google Gemini API进行自动文件分析
• 知识库：基于向量的知识库与RAG（检索增强生成）
• 聊天界面：使用自然语言查询您上传的文件
• MCP集成：连接到外部平台（谷歌、Notion、Jira）以扩展功能
• 实时更新：使用Supabase实时跟踪实时进度
• 安全存储：文件安全地存储在Supabase存储中
• 现代用户界面：使用shadcn/ui和Tailwind CSS构建

技术栈

核心

• Next.js 15 -带有App Router的React框架
• 反应19 -UI库
• TypeScript -类型安全
• 顺风 CSS -造型
• shadcn/ui -UI组件

后端和数据库

• Supabase -身份验证、数据库、存储
• PostgreSQL -具有pgvector扩展的数据库
• Supabase实时 -实时订阅

人工智能与机器学习

• Vercel AI SDK -人工智能集成框架
• Google Gemini API -大型语言模型
• pg向量 -向量相似性搜索
• 嵌入 -知识库的文本矢量化

整合

• MCP-SDK -平台集成的模型上下文协议
• 自定义MCP服务器 -谷歌、Notion、Jira连接器

状态管理

• 状态 -全球状态管理
• React查询 -服务器状态管理

项目结构

next-supa-file-ai/
├── app/                    # Next.js App Router
├── src/                    # Source code
│   ├── components/        # React components
│   ├── lib/              # Core libraries
│   ├── services/         # Business logic layer
│   ├── repositories/     # Data access layer
│   ├── hooks/            # Custom React hooks
│   └── types/            # TypeScript definitions
├── mcp-servers/          # Custom MCP servers
├── supabase/             # Database migrations & functions
└── docs/                 # Documentation

快速开始

# Clone the repository
git clone 
cd next-supa-file-ai

# Install dependencies
pnpm install

# Setup environment variables
cp .env.example .env.local
# Edit .env.local with your credentials

# Run Supabase locally (optional)
pnpm exec supabase start

# Run migrations
pnpm exec supabase db push

# Start development server
pnpm run dev

访问http://localhost:3000

文档

• 架构概述
• 设置和安装
• 数据库模式
• MCP集成指南
• 开发指南
• api参考

环境变量

所需的环境变量（请参见 .env.example 完整列表）：

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_anon_key
SUPABASE_SERVICE_ROLE_KEY=your_service_role_key

# Google AI
GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_api_key

# MCP Integration
MCP_GOOGLE_CLIENT_ID=your_google_client_id
MCP_GOOGLE_CLIENT_SECRET=your_google_client_secret
MCP_NOTION_API_KEY=your_notion_api_key
MCP_JIRA_API_TOKEN=your_jira_api_token

关键设计模式

• 存储库模式 -数据访问抽象
• 服务层 -业务逻辑分离
• 工厂模式 -AI代理创建
• 策略模式 -文件分析策略
• 观察者模式 -实时更新
• 适配器模式 -MCP平台适配器

开发工作流程

1. 文件上传 → 上层存储
2. 分析触发器 → AI代理工厂
3. Gemini处理 → 分析结果
4. 嵌入生成 → 向量存储
5. 知识库 → RAG驱动的聊天
6. MCP工具 → 平台集成

部署

Vercel（推荐）

# Install Vercel CLI
npm i -g vercel

# Deploy
vercel

环境设置

1. 在Vercel仪表板中添加所有环境变量
2. 连接Supabase项目
3. 启用Vercel AI SDK
4. 部署

贡献

1. 分叉存储库
2. 创建要素分支(git checkout -b feature/amazing-feature)
3. 提交您的更改(git commit -m 'Add amazing feature')
4. 推到分支(git push origin feature/amazing-feature)
5. 打开拉取请求

许可证

MIT许可证-有关详细信息，请参阅许可证文件

支持

• 文档： ./docs
• 问题：
• 讨论：

路线图

• \[x\] 建筑设计
• \[\]第一阶段：基础和身份验证
• \[\]第2阶段：文件上传和管理
• \[\]第3阶段：人工智能分析管道
• \[\]第4阶段：知识库和RAG
• \[\]第5阶段：MCP集成
• \[\]第6阶段：生产部署

______________________________________________________________________

使用Next.js、Supabase、Google Gemini和MCP构建