返回课程主页
Jamie 老师
Coze 智能体实战系列 · 第三讲

为什么 智能体 需要 消息卡片？

上节课我们讲了，插件让 AI 拥有了获取数据的“双手”。但是，插件返回的永远是冷冰冰的 JSON 代码。我们需要一种方式，将数据转化为 有温度的视觉表达。

01

感性理解：AI 的美颜滤镜

“设想你去餐厅点菜，后厨直接把生肉和菜叶（JSON）扔到你桌上。你肯定会崩溃。卡片，就是一位优雅的摆盘师，把食材做成色香味俱全的菜品端给你。”

数据可视化： 把枯燥的 {temp: 24} 变成带太阳图标的天气面板。
交互升级： 卡片不仅能看，还能带有按钮，让用户直接点击下单或跳转。
02

理性定义：视图层映射

卡片 = 插件数据 + UI 模板

  • 数据源 (Data Source)： 插件 API 返回的结构化 JSON。它是卡片的灵魂，提供真实的信息。
  • 模板变量 (Variables)： 在 Coze 的设计器中，我们用 {{price}} 占位符，把数据动态“填”进 UI 框架里。

工作原理：数据怎样更新卡片

点击下方执行流，探究机器语言是如何变为人类视觉的。

Rendering Flow
01 获取插件原始数据
02 加载预设卡片模板
03 变量映射与注入
04 客户端呈现

获取插件原始数据

这是上一节课的内容。Agent 调用金融插件，服务器返回了一段机器可读的纯文本 JSON。


                        

                    

                

            

        

    


    
    

        

            
基础链路渲染模拟器

            

                 渲染引擎就绪
            

        


        

            

                

                    

                        
                        
等待指令。尝试输入“查腾讯股价”...

                    

                

                

                    

                        
                        
                    

                    

                        
                        
                    

                

            


            

                

                    Data Stream & Binding
                    
                

                

                    
等待数据注入...

                

                

                    

                        

                            
Pipeline Status

                            
IDLE

                        

                        

                            

                        

                    

                

            

        

    


    
    

        

            

                

                     透视眼：数据是如何“长”在卡片上的？
                

                
交互演示区

                
将鼠标悬停在左侧代码的字段上，观察右侧实体卡片的动态映射。

            


            

                
                

                    

                        Data Source (Plugin Output)
                        

                    

                    

                        
{

                        
"status": 200,

                        
"data": {

                        
                        

                            "image_url": "https://images...",
                        

                        

                            "product_name": "赛博武士·火箭模型",
                        

                        

                            "tag": "全球限量 500 件",
                        

                        

                            "price": 1299.00,
                        

                        

                            "stock_status": "库存充足",
                        

                        
                        
}

                        
}

                    

                    

                        💡 老师解析：在 Coze 中，我们用 {{product_name}} 将字段绑定到 UI 组件。
                    

                


                
                

                    

                    

                        

                            Toy
                            
全球限量 500 件

                        

                        

                            
赛博武士·火箭模型

                            

                                
                                库存充足
                            

                            

                                

                                    ¥
                                    1299
                                

                                
                            

                        

                    

                

            

        

    


    
    

        

            

                 场景革命：从对话到交易
            

            
应用模拟：潮玩店 AI 导购

            
观察带有实体卡片的交互流

        


        

            

                

                    

                        
                        
你好！我是潮玩主理人。
想看哪款手办？

                    

                

                

                    

                        
                        
                    

                    

                        
                        
                    

                

            


            

                

                    Logic Flow Monitor
                    
                

                

                    

                        Waiting for pipeline execution...