拒绝“重后端”！带你用 MateChat 打造 AI 驱动的“轻状态”叙事引擎

摘要：本文介绍了一种基于华为云DevUI MateChat组件构建的纯前端AVG游戏引擎方案。通过创新性地将静态JSON剧本与生成式AI结合，实现轻量化的"混合驱动"架构。方案充分利用MateChat的原子组件搭建游戏界面，并将输入框改造为多功能指令终端。该方案具有快速响应、低代码开发、AI赋能等优势，适用于企业培训、电商互动等场景，展示了前端技术在游戏化交互中的潜力。

小雨青年

20227人浏览 · 2025-11-27 13:39:00

小雨青年 · 2025-11-27 13:39:00 发布

前言

一、破局：从“用组件”到“玩生态”

二、架构：静态脚本与 AI 的“混合双打”

三、界面：告别 div 堆砌，拥抱原子组件

四、交互：输入框变身“指令终端”

五、总结：低代码，大潜力

前言

大家好！提到“游戏化交互”，大家脑子里是不是立马浮现出复杂的后端服务、庞大的数据库设计，还有令人头秃的状态机管理？

说实话，这种“重后端”的架构往往让我们望而却步——我只是想给活动页加个剧情小游戏，或者给入职引导做个互动，真的需要动用这么大阵仗吗？

今天，我们换个思路。如果不写后端，只用前端技术和华为云的 DevUI MateChat 组件，能不能“搓”出一个高大上的 AVG（文字冒险）引擎？

答案是肯定的！而且我们还要更进一步：不仅要轻量化，还要把现在最火的生成式 AI 给接进去！

我将带大家打破常规，利用 MateChat 强大的组件能力，在纯前端环境下构建一个“轻状态”叙事引擎。完整代码我已经放到了 GitCode 仓库： https://gitcode.com/kaminono/MateChatStoryEngine ，大家也可以直接点这个 https://mate-chat-story-engine.vercel.app/ 实际上手玩玩看！

一、破局：从“用组件”到“玩生态”

平时大家用 UI 组件库，可能习惯了“拿·来主义”——需要聊天窗口，就引入一个组件，传点数据进去完事。

但在华为云 DevUI 的生态里，MateChat 可不只是个聊天框，它更像是一个超级容器。这次，我们不满足于简单的 API 调用，而是要玩点高级的——生态共建。

我们直接 Fork 了 MateChat 的源码，在其 Playground 环境中通过“搭积木”的方式构建场景。这么做有什么好处？

首先，我们不需要从零搭建项目脚手架；其次，我们是在验证 MateChat 架构的极限——看看它能不能从一个“客服助手”摇身一变，成为“游戏引擎”。

当你把代码跑起来的那一刻，你不仅是一个使用者，更是一个 MateChat 生态的贡献者，这种成就感是完全不一样的！

二、架构：静态脚本与 AI 的“混合双打”

做游戏最怕什么？怕卡顿，怕加载慢。为了保证体验，我们设计了一套“混合驱动”的策略。

冷启动阶段，我们直接读取本地的 JSON 剧本。这能确保用户打开页面的瞬间，精美的开场图和剧情文字就能“秒开”，完全没有网络延迟的烦恼。

探索阶段，好戏上演了——我们把控制权交给 AI。

你可能会问：“前端怎么控制 AI 的输出格式？” 别急，这里有个 Prompt Engineering 的小技巧。我们在前端构造了一个 System Prompt，强制要求大模型返回我们规定的 JSON 格式。

大家看看下面这段核心代码 useAIGameEngine.ts，重点就在那个 systemPrompt 里：

// playground/src/avg-game/composables/useAIGameEngine.tsconst fetchAIStory = async (userAction: string) => {
  // 咱们给 AI 下个“死命令”：必须吐出 JSON，别给我整 Markdownconst systemPrompt = `
    你是一个文字冒险游戏的 DM (地下城主)。
    当前玩家背包: [${inventory.value.join(', ')}]。
    玩家操作: "${userAction}"。
    
    请严格返回以下 JSON 格式，不要包含 markdown 标记：
    {
      "content": "剧情描述(50字左右)",
      "options": [
        { "label": "选项1", "action": "简短意图" },
        { "label": "选项2", "action": "简短意图" }
      ],
      "loot": "如果获得物品则填物品名，否则 null"
    }
  `;

  // 直接在前端调用大模型 API (注意：Demo 环境下咱们把 Key 存在本地 Storage 里)const res = await fetch(`${baseUrl}/chat/completions`, {
    body: JSON.stringify({ messages: [{ role: 'system', content: systemPrompt }] })
  });
  
  // 拿到数据，转成对象，直接驱动 UI 渲染！const storyData = JSON.parse(res.data.choices[0].message.content);
  currentNode.value = storyData;
};

通过这种方式，前端组件压根不需要知道数据是 AI 写的还是脚本写的，它只管渲染就行。这就是逻辑与渲染的完美解耦。

三、界面：告别 div 堆砌，拥抱原子组件

以前写页面，大家可能习惯了一层套一层的 div。但在 MateChat 的世界里，咱们得按“套路”出牌。

为了让界面看起来更专业，我全面采用了 MateChat 提供的原子组件——McLayout、McHeader、McBubble 等等。

我把布局设计成了“左侧仪表盘 + 右侧舞台”的双栏结构。左侧用 DevUI 的基础组件做状态展示（比如背包、AI配置）；右侧则是游戏的主舞台。

来，看看我们在 GameLayout.vue 里是怎么“组装”这些积木的：

<template><McLayout class="avg-game-container"><McHeader title="MateChat 故事引擎" :logo-img="logoUrl"><template #operationArea><div class="stage-status">{{ loading ? 'AI 正在构思...' : 'AI 就绪' }}</div></template></McHeader><McLayoutContent class="game-flow-content"><template v-for="msg in messages" :key="msg.id"><div v-if="msg.type === 'game_node'" class="game-card-wrapper"><StoryCard 
            :node="msg.data" 
            :inventory="inventory"
            @select="onCardSelect"
          /></div><McBubble 
          v-else 
          :content="msg.content" 
          :align="msg.role === 'user' ? 'right' : 'left'"
        ></McBubble></template></McLayoutContent><McLayoutSender>...</McLayoutSender></McLayout></template>

这种“组件套组件”的写法，不仅代码看着清爽，而且自动适配了移动端。不论你在手机还是电脑上打开 Demo，体验都非常丝滑。

四、交互：输入框变身“指令终端”

聊聊底部的输入框。在普通聊天里，它只能用来打字。但在我们的游戏引擎里，这可是“指令终端”。

MateChat 的 McInput 组件提供了一个超好用的 extra 插槽。我利用这个插槽，在输入框底下加了一排快捷按钮。

你想“重置游戏”？想“查看背包”？不用敲命令，点一下按钮就行。当然，如果你想和 AI 自由对话，直接在输入框里打字也没问题。

<McInput 
  :value="inputValue" 
  placeholder="输入指令或与 AI 对话..." 
  @submit="onInputSubmit"
><template #extra><div class="sender-actions"><div class="quick-btns"><d-button icon="icon-refresh" @click="resetGame">重置</d-button><d-button icon="icon-search" @click="checkBag">背包</d-button></div><div class="char-count">{{ inputValue.length }}/1000</div></div></template></McInput>

这样一来，这个输入区域就成了一个集对话、控制、反馈于一体的超级枢纽，交互效率直接拉满。