LWC & Flow Examples

好，同学们，我们来看看这一页内容。这里展示了四个示例模式，它们都演示了如何把 Models API 集成到我们自己的应用里。我们一个一个来看，理解它们各自的特点和适用场景。 首先，是最基础的 ，Simple LWC，。这个组件做得非常直白，页面上就是一个输入框，一个生成按钮，还有一个展示响应的区域。你只需要输入一个提示，点一下按钮，模型返回的内容就直接显示出来。它简单到没有任何多余的功能，特别适合刚接触时，理解最基本的调用流程。 接下来是 ，Flow 示例，。它把同样的能力放到了 Flow Builder 里，做成一个可调用的动作。也就是说，你不用写代码，在流程里就能直接调用模型。这对于自动化业务场景非常方便，比如在某个流程节点自动生成一段文本，完全不用写前端代码。 第三个，，Promise Engineering LWC，，听名字就知道它进了一步。它在 Simple LWC 的基础上，增加了系统提示词，用来做“思维链实验”。就是说，你可以在这里设定模型的角色、思考方式，看看不同的提示工程技巧会带来什么效果。它本质上还是一个单轮交互，但给了你控制模型行为的入口。 最后，，聊天 LWC， 是最完整的示例。它构建了一个完整的聊天界面。你看，它有消息历史记录，每条消息还能根据角色显示不同的样式——用户说的用蓝色气泡，AI 回复的用灰色气泡。而且它做了打字效果，回复是逐词出现的，非常生动。屏幕还会自动滚动到最新消息，也有加载指示器。这些都让交互体验更接近真实的聊天应用。 另外需要注意，所有这些示例，默认都使用 GPT‑4 o Mini 模型，。这个模型轻量高效，很适合演示和学习。 不过老师要提醒大家，这些代码都是，演示模式，，不是可以直接上生产的。它们的目标是帮你理解怎么用 Models API，让你快速看到效果。如果要真正用到生产系统里，你还需要考虑错误处理、安全、性能优化等很多细节。 好，关于这四个示例模式，我们就讲到这里。同学们可以自己打开示例跑一跑，感受一下从简到繁的不同集成方式。