1. 项目缘起当AI Agent遇上MBTI一个程序员的周末实验最近在捣鼓各种AI Agent框架想找个有意思的切入点把玩一下。正好看到QClaw这个号称“零代码”的Agent搭建平台手痒想试试。同时MBTI人格测试这玩意儿在程序员圈子里也时不时被拿来当梗玩什么“INTJ是架构师INTP是算法工程师”之类的。我就琢磨能不能用AI Agent来模拟MBTI的测试过程甚至让两个不同“人格”的Agent互动起来做成一个轻量级的H5小游戏这听起来比单纯调API生成一段文本要有趣得多。这个想法的核心是想探索AI Agent在模拟“人格”与“交互”上的可能性。我们通常用Agent来处理任务比如查天气、写代码但Agent能否被赋予一些简单的“性格特质”并基于此进行有逻辑、有“人设”的对话和决策MBTI作为一个有固定维度和描述的人格模型恰好提供了一个绝佳的测试框架。而QClaw这类低门槛工具让快速搭建和验证这个想法成为可能无需从零开始写复杂的状态机和对话逻辑。最终目标是做出一个H5页面用户进入后可以观看或参与两个代表不同MBTI人格的AI Agent之间的一场趣味对话或小游戏比如“E外向型Agent”和“I内向型Agent”如何协作解决一个编程难题或者“J判断型Agent”如何给“P感知型Agent”制定计划。这不仅是前端展示更是对Agent能力一次生动的“压力测试”。2. 技术选型与核心工具为什么是QClaw市面上Agent框架很多像LangChain、AutoGen功能强大但需要一定的开发门槛。对于这个快速验证想法的项目我的核心诉求是快、可视化、能处理多Agent交互。QClaw进入了我的视线。2.1 QClaw的核心优势QClaw定位为一个AI Agent创作平台它最大的特点是提供了可视化的编排界面。你可以通过拖拽组件称为“技能”或“节点”来构建Agent的工作流这非常像搭积木。对于构建MBTI人格Agent来说这意味着人格定义可视化我可以为每个MBTI类型如INTP创建一个独立的Agent。这个Agent的“性格”不再是一段模糊的提示词Prompt而是由一系列具体的“决策节点”和“反应节点”构成的工作流。例如遇到开放性问题时“P型”节点可能触发“发散思考”技能而“J型”节点则触发“制定步骤”技能。交互逻辑清晰两个Agent之间的对话可以通过“消息传递”节点来连接。我可以清晰地定义当Agent A说完某句话后将输出内容作为输入触发Agent B的某个判断流程从而生成回应。整个对话的脉络在画布上一目了然。快速迭代调试调整人格特质直接修改对应节点里的提示词或判断逻辑然后在线测试无需重启服务或重新部署。这对于精细调校Agent的“人设”至关重要。相比之下纯代码框架虽然灵活但在初期构思和调试交互逻辑时频繁修改代码和重启测试的周期较长。QClaw的可视化降低了思维负担让我更专注于“人格设计”本身。2.2 与其他方案的简单对比与通用大模型API直接调用如果只用ChatGPT的API我需要写大量复杂的提示词工程来约束模型行为模拟固定人格且难以维持长时间对话中人格的一致性。QClaw的工作流可以将人格逻辑固化下来。与LangChain等开发框架LangChain更擅长构建复杂、可扩展的生产级应用需要编写Python代码。对于我这个快速原型QClaw的零代码/低代码特性更省时。与专门的角色扮演Chatbot工具有些工具专注于角色对话但通常限于单角色。我的项目核心是多Agent互动需要它们能根据对方的输出动态反应QClaw的多Agent编排能力更贴合需求。2.3 项目技术栈全景Agent层QClaw核心。用于搭建和编排两个MBTI人格Agent。前端层H5Vue 3 Vite。选择Vue是因为其响应式特性和组件化开发能快速构建交互界面。Vite提供极速的热更新提升开发体验。通信层WebSocket RESTful API。WebSocket用于实现前端与Agent服务间的实时双向对话。用户在前端触发对话消息通过WebSocket发送到后端后端驱动两个QClaw Agent进行交互再将交互产生的对话流实时推回前端展示。RESTful API用于处理非实时操作如初始化游戏、获取Agent人格描述、提交用户选择等。后端层衔接层Node.js (Express) 或 Python (FastAPI)。这是关键的一层。QClaw通常提供API供外部调用。我需要一个轻量级后端服务器它负责接收前端WebSocket消息或API请求。根据请求通过QClaw的API去触发或运行对应的Agent工作流。处理两个Agent工作流之间的输出/输入衔接模拟它们“听到”对方说话并“思考”的过程。将最终整理好的对话数据通过WebSocket或API返回给前端。部署前端打包后部署到任意静态托管服务如Vercel, Netlify。后端服务部署到云服务器或Serverless平台如Vercel Serverless Functions, AWS Lambda。QClaw Agent本身运行在QClaw平台无需自部署。这个架构的关键在于后端服务是“导演”它拿着QClaw提供的两个“演员”Agent的剧本工作流指挥它们按顺序“表演”执行并将“表演实录”对话直播给前端“观众”。3. 核心实现从人格设计到多Agent对话引擎3.1 在QClaw中定义MBTI人格Agent这不是简单地在系统提示词里写“你是一个INTP程序员”。我们需要将MBTI的四个维度E/I, S/N, T/F, J/P转化为可执行的决策逻辑。我为每个维度创建了独立的判断节点。以构建一个“INTP”型内向、直觉、思考、感知程序员Agent为例创建Agent在QClaw中新建一个Agent命名为“程序员_INTP”。设计工作流输入节点接收外部问题或对话语句。人格解析节点这是一个大语言模型LLM节点提示词大致为“你正在模拟一个INTP人格的程序员。请分析输入的问题并按照以下INTP特质生成思考要点1. 优先从抽象理论和可能性出发N2. 分析问题逻辑追求精确T3. 回应可能显得疏离但充满洞察力I4. 倾向于开放性地探索不急于下结论P。请输出一段内部思考过程。”技能调用节点基于思考要点决定调用哪个“技能”。例如如果问题涉及算法则连接到一个“代码示例”技能节点如果是概念讨论则连接到“理论阐述”节点。这些技能节点也是LLM节点有更具体的提示词如“请用Python举一个优雅的示例来说明递归思想”。反应格式化节点将技能节点的输出再次用LLM润色确保符合INTP的“人设”“将上述内容转化为一句符合INTP程序员口吻的、略带幽默感的回复。避免使用感叹号保持冷静客观。”输出节点将最终回复发送出去。同理再创建一个“ESFJ”型外向、实感、情感、判断产品经理Agent。它的工作流中“人格解析节点”的提示词会强调“从实际用户场景出发S关注团队和谐与可行性F给出结构清晰的建议J并以鼓励协作的语气表达E。”3.2 构建多Agent对话引擎后端关键逻辑这是项目的“大脑”。我使用Node.js Socket.io来实现。// 伪代码示例展示核心循环逻辑 const startMBTIConversation async (topic) { // 1. 初始化对话记录和Agent状态 let conversationLog [{ speaker: ‘系统‘, text: 话题: ${topic} }]; let currentSpeaker ‘INTP_Agent‘; // 从INTP开始 const maxTurns 6; // 限制对话轮次防止无限循环 for (let turn 0; turn maxTurns; turn) { // 2. 构建当前发言者的“上下文” const context conversationLog.map(entry ${entry.speaker}: ${entry.text}).join(‘\n‘); const promptForCurrentAgent 这是之前的对话记录\n${context}\n\n现在轮到${currentSpeaker}发言。请基于你的人格和对话历史做出回应。; // 3. 调用QClaw API运行对应Agent的工作流 let response; if (currentSpeaker ‘INTP_Agent‘) { response await callQClawAgent(‘INTP_Agent_ID‘, promptForCurrentAgent); } else { response await callQClawAgent(‘ESFJ_Agent_ID‘, promptForCurrentAgent); } // 4. 记录回应 conversationLog.push({ speaker: currentSpeaker, text: response }); // 5. 简单判断是否对话自然结束例如出现达成共识或明显结束语 if (response.includes(‘我同意‘) || response.includes(‘先这样‘) || response.includes(‘明白了‘)) { break; } // 6. 切换发言者 currentSpeaker currentSpeaker ‘INTP_Agent‘ ? ‘ESFJ_Agent‘ : ‘INTP_Agent‘; } // 7. 返回完整的对话记录 return conversationLog; };callQClawAgent函数封装了对QClaw平台API的调用传入Agent ID和当前的输入提示词获取Agent工作流的执行结果。3.3 前端H5界面设计与实现前端的目标是清晰、有趣地展示这场AI之间的“人格对话”。界面设计采用左右分栏或聊天泡泡样式清晰区分两个Agent。为每个Agent设计专属头像和颜色主题如INTP用冷色调、理性图标ESFJ用暖色调、协作图标。顶部设置话题选择器如“如何设计一个缓存系统”“如何推进项目进度”。中央是对话流展示区域支持自动滚动。底部有控制按钮“开始对话”、“暂停/继续”、“重置”。关键交互点击“开始对话”前端通过WebSocket发送消息到后端Node.js服务。Node.js服务启动startMBTIConversation函数并实时将每一轮对话通过WebSocket推回前端。前端收到新消息后以动画形式如渐入将其添加到对话流中。使用audio元素在消息出现时播放轻微的键盘敲击声增强趣味性。代码片段Vue 3 Composition APIscript setup import { ref, onMounted } from ‘vue‘; import io from ‘socket.io-client‘; const conversation ref([]); const socket ref(null); const topic ref(‘如何设计一个缓存系统‘); onMounted(() { socket.value io(‘你的后端服务地址‘); socket.value.on(‘agent_message‘, (data) { conversation.value.push(data); // 触发滚动到底部 }); socket.value.on(‘conversation_end‘, () { console.log(‘对话结束‘); }); }); const startChat () { conversation.value []; // 清空历史 socket.value.emit(‘start_mbti_chat‘, { topic: topic.value }); }; /script template div select v-model“topic“ option如何设计一个缓存系统/option option如何推进项目进度/option option如何学习一门新技术/option /select button click“startChat“开始MBTI对话/button div class“chat-container“ div v-for“(msg, index) in conversation“ :key“index“ :class“bubble ${msg.speaker}“ strong{{ msg.speaker }}:/strong {{ msg.text }} /div /div /div /template4. 踩坑实录与核心优化点在实际搭建过程中遇到了几个典型问题也是这类项目需要注意的关键。4.1 Agent人格的“漂移”与一致性维持问题最初Agent在几轮对话后人格特质会模糊INTP可能突然说出非常情感化的话。这是因为每次调用LLM节点都是独立的缺乏对整体对话人格的“记忆”。解决方案强化系统提示词在每个Agent工作流的初始节点设置强约束的系统提示词例如“在整个对话中你必须始终扮演一个INTP程序员。你的核心特质是理性、热爱抽象模型、追求逻辑自洽、在社交中略显被动。所有回复必须符合此设定。”引入“人格状态”变量在QClaw的工作流中利用其变量传递功能。创建一个“人格一致性检查”节点放在输出前。这个节点接收历史对话摘要和当前回复草稿用LLM判断“当前草稿是否符合INTP人格如果不符合请修正。”然后将修正后的版本输出。上下文管理在后端调用Agent时不仅传递当前输入还附带最近3-4轮对话的摘要作为上下文帮助Agent维持人设。4.2 对话陷入循环或逻辑怪圈问题两个Agent可能就一个细节无休止地争论或者互相赞同导致对话无法深入。解决方案设置回合制与话题推进器在后端的对话引擎中除了切换发言还加入一个“话题推进”机制。例如每3轮对话后后端会主动生成一个提示插入对话上下文“请注意对话已进行一段时间请尝试从新的角度阐述或提出一个具体问题来推进讨论。”然后把这个增强的上下文发给下一个发言的Agent。定义对话目标在开始对话时就给两个Agent一个隐含的“目标”而不只是闲聊。例如“INTP你的目标是说服ESFJ接受一个更优雅但略显复杂的方案ESFJ你的目标是确保方案简单可行且团队能快速理解。”这能引导对话产生自然的冲突与和解。人工设定终止条件如代码所示设定最大轮次并检测对话中的结束关键词如“好吧”、“我理解你的观点了”、“我们下一步可以...”及时优雅地结束对话。4.3 QClaw API调用的性能与稳定性问题QClaw的工作流如果复杂单次执行可能需要几秒。实时对话中如果等待时间过长用户体验会变差。解决方案异步处理与前端优化后端收到前端请求后立即返回一个“对话已开始”的响应。真正的Agent对话过程在后台异步执行每生成一轮对话就通过WebSocket推送一次。前端配合加载动画让用户知道正在“思考”。简化工作流重新审视QClaw中的Agent工作流合并不必要的LLM调用节点。有些判断逻辑可以用更简单的条件分支节点如果QClaw支持或在后端处理减少对慢速LLM的依赖。设置超时与重试在后端调用QClaw API时设置合理的超时时间如10秒。如果超时则记录日志并尝试生成一个降级回复如“[INTP思考中...]我觉得这个问题需要更多时间分析”保证对话流不中断。缓存对于相同的话题开头可以缓存前几轮生成的经典对话直接返回减少不必要的计算。4.4 前端体验细节打磨横屏适配与移动端H5常见坑在手机微信浏览器等环境中需要处理横屏、输入框被键盘顶起等问题。横屏如果希望游戏在横屏下体验更好可以使用CSSmedia (orientation: landscape)或JS检测屏幕旋转。输入框遮挡在需要用户输入如自定义话题的场景使用focus事件滚动元素到可视区或使用position: fixed布局来避免页面整体被顶起。状态管理对话开始、进行中、结束的状态需要清晰反馈给用户。使用Vue的响应式变量和条件渲染来控制按钮的禁用状态、显示加载指示器等。5. 项目总结与Agent开发的个人思考通过这个周末项目我验证了用QClaw这类可视化工具快速构建具有“人格”的多Agent交互系统是可行的。它最大的价值在于降低了原型验证的门槛让我能把精力集中在“人格建模”和“交互设计”这些有趣的部分而不是陷入框架配置和底层通信的泥潭。对于想入门Agent开发的朋友这个项目提供了一个很轻的起点。你不必一开始就钻研LangChain的复杂链条可以从QClaw这样的平台开始理解Agent的“工作流”思维感受多Agent之间如何通过消息传递进行协作或博弈。这比学习抽象概念要直观得多。几点延伸思考从“玩具”到“工具”目前这个项目更偏向趣味演示。但如果深入下去可以为每个MBTI类型赋予更专业的技能树。例如INTJ Agent可以集成代码分析技能ESFP Agent可以集成用户故事编写技能。它们可以变成一个有趣的团队头脑风暴辅助工具。评估与迭代如何评估Agent的人格模拟得像不像除了人工看可以设计一些评估问题计算其回答与标准MBTI描述之间的语义相似度或者让真人用户进行盲测打分从而迭代优化工作流中的提示词和决策节点。QClaw的局限性QClaw的强项是快速搭建但当逻辑变得极其复杂需要自定义计算、频繁访问外部数据库或工具时可能还是会需要回归到代码框架如LangChain进行更灵活的编排。它更适合作为前期构思和轻量级应用的平台。最后这个项目的所有代码和QClaw工作流设计我已经整理放在了GitHub上。前端Vue项目可以直接npm run dev启动后端Node服务需要配置你自己的QClaw API密钥和端点。如果你也想打造属于自己的“人格Agent”小剧场不妨从这里开始搭两个Agent看它们如何在你设定的舞台上演绎出人意料的对话。