kkcyber2/Forgeguard-ai

# ForgeGuard AI **AI 红队 & 安全 AI/ML 代理机构** 这是一个为 ForgeGuard AI —— 由 Konain Sultan Khan 创立的 AI 安全机构 —— 打造的生产就绪型全栈 Web 应用程序。  ## 功能 - **沉浸式 3D 英雄区块** - 基于 React Three Fiber 的交互式神经网络可视化 - **AI 聊天助手** - 由 Vercel AI SDK + Groq (Llama 3.3 70B) 提供支持 - **受保护的客户门户** - 集成 Supabase Auth 的完整仪表板 - **实时功能** - 实时项目更新与消息传递 - **红队演练演示** - 交互式提示注入测试器 - **PWA 就绪** - 可作为原生应用安装 - **完全响应式** - 适配所有设备 ## 技术栈 - **前端**: Next.js 16 (App Router) + TypeScript + Tailwind CSS - **3D 图形**: React Three Fiber + Three.js + @react-three/drei - **动画**: Framer Motion + GSAP - **后端**: Supabase (Auth, Postgres, Realtime, Storage) - **AI**: Vercel AI SDK + Groq API - **状态管理**: Zustand - **UI 组件**: shadcn/ui + Radix UI ## 快速开始 ### 前置条件 - Node.js 20+ - npm 或 yarn - Supabase 账户 - Groq API 密钥 ### 1. 克隆并安装 ``` git clone cd forgeguard-ai npm install ``` ### 2. 环境设置 将 `.env.example` 复制到 `.env.local` 并填写您的凭据： ``` cp .env.example .env.local ``` 必需的环境变量： ``` # Supabase NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key SUPABASE_SERVICE_ROLE_KEY=your-service-role-key # Groq GROQ_API_KEY=your-groq-api-key # App NEXT_PUBLIC_APP_URL=http://localhost:3000 ``` ### 3. 数据库设置 1. 进入您的 Supabase 项目仪表板 2. 打开 SQL 编辑器 3. 复制 `sql/schema.sql` 的内容 4. 运行 SQL 以创建所有表、策略和种子数据 ### 4. 运行开发服务器 ``` npm run dev ``` 打开 [http://localhost:3000](http://localhost:3000) ## 部署 ### 部署到 Vercel 1. 将代码推送到 GitHub 2. 将您的仓库连接到 Vercel 3. 在 Vercel 仪表板中添加所有环境变量 4. 部署！ ``` # 使用 Vercel CLI vercel --prod ``` ### Supabase 生产环境设置 1. 为生产环境创建一个新的 Supabase 项目 2. 在生产项目中运行 schema.sql 3. 使用生产环境凭据更新环境变量 4. 在身份验证设置中配置 OAuth 提供商 ### Groq API 设置 1. 在 [console.groq.com](https://console.groq.com) 注册 2. 创建 API 密钥 3. 添加到环境变量 ## 项目结构 ``` forgeguard-ai/ ├── src/ │ ├── app/ # Next.js App Router │ │ ├── auth/ # Authentication pages │ │ ├── dashboard/ # Client portal │ │ ├── api/ # API routes │ │ ├── page.tsx # Landing page │ │ └── layout.tsx # Root layout │ ├── components/ │ │ ├── chat/ # AI chat assistant │ │ ├── portal/ # Dashboard components │ │ └── ui/ # UI components │ ├── hooks/ # Custom React hooks │ ├── lib/ # Utilities & stores │ ├── sections/ # Page sections │ └── types/ # TypeScript types ├── sql/ │ └── schema.sql # Database schema ├── public/ # Static assets └── docs/ # Documentation ``` ## 数据库架构 ### 数据表 - **profiles** - 扩展 Supabase Auth 的用户资料 - **projects** - 客户项目 - **project_files** - 附加到项目的文件 - **messages** - 客户与管理员聊天 - **bookings** - 服务预订请求 - **services** - 可用服务 - **skills** - 技术技能 - **showcase_projects** - 作品集项目 - **contact_submissions** - 联系表单提交 - **activity_logs** - 审计日志 ### 行级安全性 (RLS) 所有数据表均已启用 RLS 并配置了相应的策略： - 用户只能访问自己的数据 - 管理员拥有完全访问权限 - 公共数据表（services、skills、showcase_projects）所有人可读 ## 添加真实项目 ### 1. 通过 Supabase 仪表板 1. 进入表编辑器 2. 选择 `showcase_projects` 3. 点击“Insert Row” 4. 填写项目详情 ### 2. 通过 SQL ``` INSERT INTO public.showcase_projects ( title, slug, description, short_description, technologies, github_url, demo_url, category, is_featured, is_active ) VALUES ( 'Your Project Name', 'your-project-slug', 'Full description...', 'Short description...', '["Tech1", "Tech2"]', 'https://github.com/...', 'https://demo...', 'Category', true, true ); ``` ## 自定义 ### 颜色 编辑 `src/app/globals.css`： ``` --color-cyan: #00f0ff; /* Primary accent */ --color-red: #ff0033; /* Threat/Danger */ --color-background: #0a0a0a; /* Dark background */ ``` ### 内容 - **服务**: 在 Supabase 的 `services` 表中编辑 - **技能**: 在 Supabase 的 `skills` 表中编辑 - **项目**: 在 Supabase 的 `showcase_projects` 表中编辑 - **关于/简介**: 编辑 `src/sections/About.tsx` ### 字体 当前使用 Inter（正文）和 Space Grotesk（标题）。可在 `src/app/layout.tsx` 中更改。 ## API 路由 ### 聊天 API `POST /api/chat` 请求体： ``` { "messages": [ { "role": "user", "content": "Hello!" } ] } ``` ## 性能优化 - 3D 场景使用 `dpr={[1, 2]}` 进行自适应分辨率调整 - 组件通过 dynamic imports 实现懒加载 - 使用 Next.js Image 组件优化图像 - PWA 缓存提供离线支持 ## 安全注意事项 - 所有 API 密钥存储在环境变量中 - RLS 策略防止未经授权的数据访问 - 所有表单均进行输入清理 - API 路由上的速率限制（按需实现） - 生产环境中强制使用 HTTPS ## 浏览器支持 - Chrome/Edge 90+ - Firefox 88+ - Safari 14+ - 移动浏览器 (iOS Safari, Chrome Mobile) ## 许可证 MIT License - 查看 LICENSE 文件 ## 联系方式 Konain Sultan Khan - 邮箱: konain@forgeguard.ai - GitHub: [@konainsultan](https://github.com/konainsultan) - LinkedIn: [Konain Sultan Khan](https://linkedin.com/in/konainsultan) 在巴基斯坦卡拉奇倾情构建

标签：3D可视化, AI代理, AI安全, Chat Copilot, CISA项目, Framer Motion, GSAP, Llama 3.3, Postgres数据库, PWA应用, Radix UI, React Three Fiber, shadcn/ui, Supabase, Sysdig, Tailwind CSS, Three.js, TypeScript, Vercel AI SDK, Zustand, 交互式UI, 全栈Web应用, 后端服务, 大模型安全, 安全插件, 实时通信, 提示词注入测试, 文档安全, 渐进式Web应用, 网络安全, 脚本检测, 自动化攻击, 隐私保护