丝滑~用AI云原生的Agent开发每日AI热点新闻智能体，喂饭级教程！

大家好，我是木三。

就在最近，字节在北京召开了火山引擎春季Force原动力大会，火山引擎在Agent上真是加大了投入。

简单说下这次Agent方面的升级亮点：豆包大模型继续升级，推出了DouBao-Seed-1.6、DouBao-Seed-1.6-thinking、DouBao-Seed-1.6-flash三个模型。

发布了PromptPilot，能够交互式生成prompt还可以优化提示词，小白也不用担心自己不会写专业prompt了~

Trea全面升级，作为AI原生IDE，能快速构建智能体，并能集成智能体所需要的MCP工具。

我们来个例子看看整个构建过程有多丝滑~

使用Trae + DouBao-Seed-1.6 + PromptPilot + 火山引擎MCP Servers来生成一份每日AI热点新闻。

1、寻找MCP工具

打开火山引擎MCP Servers（网址www.volcengine.com/mcp-marketp...

先点击"搜索工具"，我们使用trends-hub和hotnews两个MCP。

在Trea的MCP页签处输入"hotnews"，并点击"+"号。

点击"确认"

用相同的方式添加"trends-hub"。

只有出现绿色的对勾，才说明添加成功了，能够正常使用了。

2、使用PromptPilot构建提示词

使用火山引擎的PromptPilot（网址：promptpilot.volcengine.com/）帮助生成合适的提示词。

如果对提示词不满意，点击"继续调试Prompt"进行优化。

3、在Trea新建智能体

将Trea升级到最新版本，在智能体页签点击"创建"或者"创建智能体"。

输入智能体名称，输入提示词（注意：提示词最多为10000个字符），并选中MCP，点击创建。

点击"立即使用"

4、优化AI新闻页面

在Trea的对话框，选择DouBao-Seed-1.6

生成的效果确实不错，蓝色的科技感很足。

继续再优化生成的代码，直到自己满意为止。

最终拿到的提示词如下：

xml 复制代码

你的任务是制作一个AI热点日报生成智能体。该智能体将通过MCP工具（trends-hub和hotnews）获取当日最新AI热点新闻，并生成一个具有科技感的网页来展示这些新闻。
请使用以下的页面样式排版模版：
<web_page_template>
<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">   
    <title>AI热点新闻</title>    
    <style>        
        :root { --primary: #00f0ff; --bg: #0a0e17; --card: #121826; --text: #e0e0e0; --border: rgba(0,240,255,0.3); }        
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }        
        body { background: var(--bg); color: var(--text); padding: 20px; }        .container { max-width: 1200px; margin: 0 auto; }        
        h1 { color: var(--primary); text-align: center; margin: 20px 0; text-shadow: 0 0 10px rgba(0,240,255,0.5); }        
        .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }        
        .news-card { background: var(--card); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; transition: all 0.3s; }        
        .news-card:hover { transform: translateY(-5px); box-shadow: 0 0 15px rgba(0,240,255,0.3); }        
        .news-img { width: 100%; height: 180px; object-fit: cover; }        
        .news-content { padding: 15px; }        
        .news-title { color: var(--primary); margin-bottom: 10px; font-size: 1.1rem; }    
        .news-summary { font-size: 0.9rem; color: #9ca3af; margin-bottom: 15px; }
        .news-meta { display: flex; justify-content: space-between; font-size: 0.8rem; color: #6b7280; }  
        .tags { display: flex; gap: 5px; margin-bottom: 10px; }
       .tag { background: rgba(157,78,221,0.2); color: #d8b4fe; padding: 3px 8px; border-radius: 12px; font-size: 0.7rem; }    
     </style>
</head>
<body>    
     <div class="container">        
         <h1>AI热点新闻</h1>        
             <div class="news-grid">            
             <!-- 新闻卡片1 -->            
             <article class="news-card">                
                 <img src="{{image_url}}" alt="{{title}}" class="news-img"> 
                 <div class="news-content">                    
                     <h2 class="news-title">{{title}}</h2>                    
                     <p class="news-summary">{{summary}}</p>                   
                     <div class="tags">                        
                         <span class="tag">AI</span>                    
                     </div>                    
                     <div class="news-meta">                        
                         <span>{{time}}</span>                    
                     </div>                
                   </div>           
              </article>
            <!-- 新闻卡片2 -->            
            <article class="news-card">                
                <img src="{{news_url}}" alt="{{title}}" class="news-img">                
                <div class="news-content">                    
                    <h2 class="news-title">{{title}}</h2>                    
                    <p class="news-summary">{{summary}}</p>                    
                        <div class="tags">                        
                            <span class="tag">AI</span>                    
                        </div>                    
                        <div class="news-meta">                        
                            <span>{{time}}</span>                    
                        </div>                
                    </div>            
                </article>        
            </div>    
        </div>
    </body>
</html>
</web_page_template>
请仔细阅读以下MCP工具的配置信息，该信息用于连接和使用MCP工具获取新闻：
<mcp_config>
{{MCP_CONFIG}}
</mcp_config>
以下是具体的操作步骤：
1. 根据MCP工具的配置信息，详细规划如何调用trends - hub和hotnews来获取当日最新AI热点新闻。考虑可能遇到的问题，如网络连接、数据格式等，并思考解决方案。
2. 使用MCP工具的trends-hub和hotnews，依据配置信息获取当日最新AI热点新闻。确保获取的新闻是准确且最新的。
3. 利用获取到的新闻数据，按照网页样式排版模板的格式进行填充。网页应包含新闻标题、摘要、来源等关键信息。
4. 在<日报网页内容>标签内输出最终生成的网页的HTML代码。
请在<web_page>标签内输出最终生成的网页内容。
<web_page>
[在此输出生成的网页的网页内容]
</web_page>