了解FastGPT

FastGPT 是一个基于 LLM 大语言模型的知识库问答系统，提供开箱即用的数据处理、模型调用等能力。同时可以通过 Flow 可视化进行工作流编排，从而实现复杂的问答场景！
FastGPT 在线文档：https://doc.tryfastgpt.ai/docs/
FastGPT 在线使用：https://tryfastgpt.ai
FastGPT 教程：https://www.bilibili.com/video/BV1n34y1A7Bo/?spm_id_from=333.999.0.0&vd_source=821011acf2d09387de99a7acb397128b 等，可以在B站上搜索到很多。

iframe 快速对接FastGPT到前端项目

FastGPT可以帮助我们使用低代码的模式快速搭建出来RAG验证模型，方便进行初期的应用调研和方法验证，非常高效。
在这种使用场景中，我们选用的是 React 前端框架 + Nodejs 后台 + FastGPT Login-Free window 中的bot模式。

在React 项目中集成js script代码：

 componentDidMount() {
    // 加载AI Bot script
    this.loadAIBotScript();
    console.log('AI bot script added.');
    // 定时触发AI Bot script，解决React项目部署后，偶尔无法正常渲然出bot 按钮的问题
    setTimeout(this.triggerAIScript, 2000);
  }

  loadAIBotScript() {
    if (!document.querySelector('#chatbot-iframe')) {
      // 在此处获取本地token
      let access_token = this.getTokenFn(); 
      const s = document.createElement('script')
      s.src = 'http://FastGPTServer/js/iframe.js'
      s.setAttribute('id', 'chatbot-iframe')
      s.setAttribute('data-default-open', 'false')
      s.setAttribute(
        'data-bot-src',
        `http://FastGPTServer/chat/share?shareId=id&showHistory=0`
      )
      s.setAttribute('data-drag', 'false')
      s.setAttribute(
        'data-open-icon',
        'data:image/svg+xml;base64,PHN2ZyB0PSIxNjkwNTMyNzg1NjY0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQxMzIiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNNTEyIDMyQzI0Ny4wNCAzMiAzMiAyMjQgMzIgNDY0QTQxMC4yNCA0MTAuMjQgMCAwIDAgMTcyLjQ4IDc2OEwxNjAgOTY1LjEyYTI1LjI4IDI1LjI4IDAgMCAwIDM5LjA0IDIyLjRsMTY4LTExMkE1MjguNjQgNTI4LjY0IDAgMCAwIDUxMiA4OTZjMjY0Ljk2IDAgNDgwLTE5MiA0ODAtNDMyUzc3Ni45NiAzMiA1MTIgMzJ6IG0yNDQuOCA0MTZsLTM2MS42IDMwMS43NmExMi40OCAxMi40OCAwIDAgMS0xOS44NC0xMi40OGw1OS4yLTIzMy45MmgtMTYwYTEyLjQ4IDEyLjQ4IDAgMCAxLTcuMzYtMjMuMzZsMzYxLjYtMzAxLjc2YTEyLjQ4IDEyLjQ4IDAgMCAxIDE5Ljg0IDEyLjQ4bC01OS4yIDIzMy45MmgxNjBhMTIuNDggMTIuNDggMCAwIDEgOCAyMi4wOHoiIGZpbGw9IiM0ZTgzZmQiIHAtaWQ9IjQxMzMiPjwvcGF0aD48L3N2Zz4='
      )
      s.setAttribute(
        'data-close-icon',
        'data:image/svg+xml;base64,PHN2ZyB0PSIxNjkwNTM1NDQxNTI2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYzNjciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNNTEyIDEwMjRBNTEyIDUxMiAwIDEgMSA1MTIgMGE1MTIgNTEyIDAgMCAxIDAgMTAyNHpNMzA1Ljk1NjU3MSAzNzAuMzk1NDI5TDQ0Ny40ODggNTEyIDMwNS45NTY1NzEgNjUzLjYwNDU3MWE0NS41NjggNDUuNTY4IDAgMSAwIDY0LjQzODg1OCA2NC40Mzg4NThMNTEyIDU3Ni41MTJsMTQxLjYwNDU3MSAxNDEuNTMxNDI5YTQ1LjU2OCA0NS41NjggMCAwIDAgNjQuNDM4ODU4LTY0LjQzODg1OEw1NzYuNTEyIDUxMmwxNDEuNTMxNDI5LTE0MS42MDQ1NzFhNDUuNTY4IDQ1LjU2OCAwIDEgMC02NC40Mzg4NTgtNjQuNDM4ODU4TDUxMiA0NDcuNDg4IDM3MC4zOTU0MjkgMzA1Ljk1NjU3MWE0NS41NjggNDUuNTY4IDAgMCAwLTY0LjQzODg1OCA2NC40Mzg4NTh6IiBmaWxsPSIjNGU4M2ZkIiBwLWlkPSI2MzY4Ij48L3BhdGg+PC9zdmc+'
      )
      // s.async = true
      s.defer = true
      document.body.appendChild(s);
    }
  }
  
  triggerAIScript() {
    if (window.embedChatbot) {
      if (!document.querySelector('#fastgpt-chatbot-button')) {
        window.embedChatbot()
        // change chatbot style
        const chatbotButton = document.querySelector('#fastgpt-chatbot-button');
        //控制bot 打开按钮位置
        chatbotButton.style.right = '30px';
        //控制bot打开后窗口大小
        const chatWindow = document.querySelector('#fastgpt-chatbot-window')
        chatWindow.style.width = '90%'
      }
    } else {
      // 如果没有找到方法，递归触发
      setTimeout(this.triggerAIScript, 500)
    }
  }

集成后效果展示：

配置验证token到高级编排中

前端配置

在bot打开的时候想要传入参数到高级编排中，根据文档中分享链接中增加额外 query 的提示, 可以在data-bot-src中加入合适的参数如下

s.setAttribute(
	'data-bot-src',
	`http://FastGPTServer/chat/share?shareId=sharedId&showHistory=0&access_token=${access_token}`
)

配置完成后，在bot中重新提出问题，就可以在 /api/v1/chat/completions 请求的payload中查看到 variables出现了多个上面配置好的参数： access_token。

FastGPT 配置

此时回到FastGPT高级编排中，在“系统配置”组件中添加两个新的"Global Variable": user_token， 具体配置如下：

此时在“流程开始”中就可以看到新添加的全局变量 user_token, 并且在后续编排中可以在其他组件中拿到配置好的全局变量值，方便后续步骤使用。

这个全局变量会在前端项目触发访问时从completions API中获取到。

以上我们就完成了在项目中快速集成Login-Free window bot 并且 配置参数(token)到高级编排中，方便后续使用 HTTP Request模块调用项目API或者获取其他所需参数的需求。

写在最后， 编程不归路
祝君一路荆棘一路过，关关难过关关过