360 Secure SkillHub
360 安全技能中心

流式AI检索问答技能

核心功能是将传统AI搜索升级为「输入→实时思考可视化→带来源的流式回答」，通过四步流程提升答案可信度。适用于AI搜索框重构、医疗/法律等垂直领域知识库问答、透明AI过程项目等场景，适配React H5、企业知识库等多类型项目，输入用户关键词，输出带步骤可视化、来源引用的流式回答。

zmy1006-sudo
zmy1006-sudo
热度 32.59
最近更新 2026-05-11 17:46:16
分类：开发依赖：第三方 API应用场景：代码生成 / API 集成 / 数据处理 / 模板 ...

安装技能

复制下面的话术发给你的 Agent，它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill： npx secure-skills-cli add stream-ai-answer
Metadata
name
stream-ai-answer
description
通用流式AI检索问答技能 — 为任意行业应用提供四步流式分析交互界面。 触发场景：用户输入关键词 → AI自动执行：理解意图 → 检索知识库 → 流式生成 → 来源标记 → 完整回答。 当需要实现以下任意场景时激活： (1) AI搜索框 / 智能咨询组件重构 (2) 知识库问答（医疗/法律/金融/教育等垂直领域） (3) 流式回答 + 分步思考过程可视化 (4) 带来源引用的AI回答（PubMed/DOI/文档/数据库） (5) DeepSeek风格四步分析卡片 (6) 任何需要"边想边说"透明AI过程的项目 适用行业：医疗、法律、金融、教育、能源、政务、制造等 适配项目类型：React H5/WebApp、企业知识库、客服系统、问诊平台、科普中心、CRM/ERP AI助手

stream-ai-answer — 通用流式AI检索问答技能

本skill为开发者提供一套可复用的AI检索问答交互范式，适用于任意行业的知识库产品。

核心价值

将AI搜索框从「输入→等待→结果」升级为「输入→实时思考可视化→带来源的完整回答」

用户清晰看到AI在思考什么，答案有来源可查、可点击、可信度提升。

四步流程（通用版）

步骤 状态 图标 适用场景说明
① 理解问题意图 🔍 理解意图 所有场景，识别用户真正想查什么
② 检索知识库/数据库 🗄️ 检索内容 有结构化知识库时启用；无知识库可跳过
③ 深度分析 & 生成 🧠 深度分析 所有场景，模型推理+内容生成
④ 来源标记 & 完成 📚 来源标记 有外部引用时启用；无来源则标注"综合知识回答"

组件视觉结构

┌─────────────────────────────────────────┐
│ 🤖 AI 智能回答              🔥 实时生成   │
├─────────────────────────────────────────┤
│ 🔍 理解问题意图...          ✅          │
│ 🗄️ 检索知识库内容...        ⏳          │  ← 根据步骤数动态显示
│ 🧠 深度分析与生成...        ○          │
│ 📚 来源标记...              ○          │
├─────────────────────────────────────────┤
│ ⭐ [模型名称] · 结合N条知识库内容       │  ← 底部来源统计
└─────────────────────────────────────────┘
                  ↓ 流式展开
┌─────────────────────────────────────────┐
│ [流式生成的回答正文，带关键词高亮]       │
├─────────────────────────────────────────┤
│ 📚 参考来源：                        │
│ ① [标题] · [来源平台] · [可点击链接]  │
│ ② [标题] · [来源平台]                │
└─────────────────────────────────────────┘

状态视觉规则

状态 视觉 CSS类
pending 灰圆圈 ○ text-gray-400
active 蓝色旋转 + 脉冲 text-blue-500 animate-spin
done 绿色勾 ✅ text-green-500
error 红色叉 ❌ text-red-500

行业适配指南

医疗健康

  • 步骤：🔍→🗄️（检索医学文献）→🧠→📚
  • 来源格式：PubMed DOI / 临床指南 / NCCN / CMA
  • Prompt风格：需强提醒"不作为诊断依据"
  • 典型项目：患者教育平台、医生继续教育、科研助手

法律

  • 步骤：🔍→🗄️（检索法规条文）→🧠→📚
  • 来源格式：法律条文编号 / 判决书 / 司法解释
  • Prompt风格：明确"仅供参考，不构成法律意见"
  • 典型项目：法律咨询平台、企业合规助手

金融/财税

  • 步骤：🔍→🗄️（检索政策文件）→🧠→📚
  • 来源格式：财政部/税务局公告 / 法规链接
  • Prompt风格：明确"不构成投资建议"
  • 典型项目：财报解读、政策问答、理财咨询

通用企业知识库

  • 步骤：🔍→🗄️（检索内部文档）→🧠
  • 来源格式：内部文档名称 / Confluence链接
  • Prompt风格：简洁专业，直接给答案
  • 典型项目：内部问答机器人、客服辅助、CRM AI助手

实施流程

Step 1：判断场景复杂度

场景 步骤数 是否检索知识库
简单问答（FAQ类） 2步（🔍→🧠） 否，直接生成
知识库检索 3步（🔍→🗄️→🧠） 是，RAG检索
专业领域（医疗/法律） 4步（🔍→🗄️→🧠→📚） 是，强引用
深度报告生成 5步（🔍→🗄️→🧠→📚→⚡） 多源聚合

Step 2：设计步骤配置

// 通用3步（企业知识库）
const steps = [
  { key: 'understand', label: '理解问题意图', status: 'pending' },
  { key: 'retrieve',   label: '检索知识库内容', status: 'pending' },
  { key: 'generate',   label: '深度分析与生成', status: 'pending' },
];

// 专业4步（医疗/法律/金融）
const steps = [
  { key: 'understand', label: '理解问题意图', status: 'pending' },
  { key: 'retrieve',   label: '检索专业数据库', status: 'pending' },
  { key: 'analyze',    label: '深度分析证据', status: 'pending' },
  { key: 'generate',   label: '生成回答', status: 'pending' },
];

Step 3：接入API（见 references/frontend-pattern.md）

Step 4：行业Prompt定制（见 references/prompts.md）

Step 5：来源解析配置（见 references/frontend-pattern.md）

文件说明

文件 用途 何时读取
references/frontend-pattern.md React组件代码 + 流式实现 开发时
references/prompts.md 各行业系统Prompt模板 Prompt设计时
assets/AIAnalysisCard.tsx 可直接复制的React组件 组件开发时

快速接入路径

React项目（Vite + TypeScript）

  1. 复制 assets/AIAnalysisCard.tsx → src/components/common/
  2. 修改 references/frontend-pattern.md 中的API端点
  3. 在目标页面引入并替换原有loading状态

非React项目

  • 参考 references/frontend-pattern.md 中的纯函数封装 streamAI()
  • 按UI框架（Vue/Svelte/Angular）自行实现 AIAnalysisCard

依赖要求

  • React 18+（或任意UI框架）
  • TypeScript（支持TSX）
  • TailwindCSS（使用现有颜色变量）
  • 支持 stream: true 的LLM API
    • ✅ MiniMax / DeepSeek / OpenAI / Azure OpenAI / 百度千帆
    • ✅ 本地模型（Ollama + SSE）