Better AIM
Better Agent Integrated with MCP tools.
关于这个库
Better AIM 的目标是利用mcp tools创建一个更面向用户的助理，相较于复杂的mcp工具，大语言模型可以代替用户设置参数，并且更好地引导用户。 与此同时，提供一个便利且多功能的前端界面，一键接入mcp tools，自动创建agent，省去前端开发压力。
我需要为我的项目编写一个前端，现在需要你先进行计划。该项目是一个与AI Agent交流的前端项目，调用google-mcp工具与AI进行交流，其中agent可以使用mcp工具。该项目本来有一个使用gradio实现的前端方案，但是由于gradio自身问题准备更换，你可以参考原来的host.py文件查看原来的实现方法。新前端使用React进行编写，并且实现以下功能： 1、登录界面：该前端可以同时被多个用户同时访问，所以需要为每个用户分配自己的会话ID，当用户进入页面时，可能带有cookie：appAccessKey，如果读取到该cookie，则自动进入对应会话ID的会话中，若没有，则为用户展示一个自行输入会话ID的登录界面，并附着一个随机生成会话ID的按钮，点击则会自动生成32位随机字符串（数字和字母），此后用户可以点击登录进入主界面；会话ID必须为32位字符串（数字和字母），应该带有一个判断。 2、主界面：主界面主要分为几个部分上部分和下部分，下部分又分为左部分和右部分。上部分为信息框，其左侧展示会话ID（只展示前四位和后四位，中间用星号省略）。右侧一个提示框展示Token消耗数，另一个提示框展示agent的状态。下部分为主要工作区，左部分占下部分的25%，有着一系列的按键，当不按下任何按键时，左部分隐藏。按键有：用户会话记录、文件列表、修改参数。右部分则为主要聊天区，其中上方为聊天记录，左侧为agent说的话，右侧为用户发的信息。下方则为用户的输入区，输入区左侧有一个样例区，用户可以选择样例自动输入。中间为输入区，右侧为发送按钮。用户选择样例后，不直接进行发送，而是将输入区的文本更改为样例对应的文字。在输入区输入回车也会发送信息。 2.1、用户会话记录：这部分是该用户的多次会话记录，上方有一个新会话的按钮，下方则横排显示每一次的会话标题，点按则切换到对应会话中。 2.2、文件列表：用户可以访问到/tmp/[会话ID]下的文件，并可以上传文件到该文件夹中。需要实现一个上传的按钮，并且在下方展示该文件夹下的所有文件，并附带下载按键。 2.3、修改参数：该部分分为三个部分：第一，有一个下拉框，用户可以选择mcp tool的工作模式，有在线和玻尔两种方式可以选择。默认模式为在线。第二，有一个占据一行的两个选项栏，其中左侧为“逐个修改”，右侧为“使用JSON”对应两种模式，当用户选择左侧模式时，当用户调用mcp tool被拦截时，前端会逐个展示各个参数，并允许用户修改，修改后还有一个提交按钮，点击后将参数重新输出回mcp；另一个则是直接展示JSON，并且用户可以直接修改JSON内容，并且直接提交json。 3、启动：该应用应该可以使用python直接启动，并且可以通过一些参数调整配置，例如/example/DeePTB-agent/api.py的格式 4、运行逻辑：本应用是一个前端调用agent的应用。当用户提交会话ID后，在后台生成一个新的agent，并且名为agent_info["name"]-{会话ID}的格式。此后该用户进行对话时，则将信息提交给对应agent并等待回复。 5、参数拦截功能：该应用亮点为调用MCP TOOLS前会拦截agent输入的参数，并展示给用户让其进行修改，请详细阅读tool_modify_guardrail.py和host.py中的具体实现方法，并且在React中实现该功能。 实现以上功能，充分阅读原文件host.py所实现的功能并复现，将有关代码编写在react_host.py中，不要修改除了main.py以外的文件。 要求：不使用docker，对python包进行使用时，由于你的数据可能不是最新的，请尽可能不要将requirements中的版本号固定。