2.2 构建 Markdown 转 HTML 助手

2025年11月13日

上一篇我们搞定了输入端的“写周报”Agent,这一篇我们来点不一样的:
从输出的角度出发,让大家体验下如何控制 Agent 的输出结构,比如想让它输出 HTML、JSON、Markdown 这种“格式化的代码”,而不是一堆模糊的自然语言
构建 Markdown 转 HTML 助手
 ——输入 Markdown 内容,输出格式良好的 HTML 源码
Agent体验地址:http://8.137.23.32/chat/MC9tlU3o54zIwi87

 

---
🧭 教学目标
1.熟悉文本格式转换类 Agent 的构建方式
2.使用 多行文本变量 让用户输入 Markdown
3.利用 Prompt 实现结构清晰的 HTML 输出
4.控制输出结构,避免多余解释,让结果更可复制使用

 

---
✂️ 应用目标拆解:

你可能经常会遇到这种情况:
- 文档写的是 Markdown 格式,但发布到网站上需要 HTML;
- 你不想每次都去找在线工具粘贴复制;
- 你也希望输出的 HTML 干净、简洁,别夹杂多余标签或者 AI 的“客套话”。
所以我们要做一个能「精准控制输出格式」的 Agent ——它只输出你要的 HTML,不废话,不跑题

和之前的“写周报”不太一样,这次输入的是一大段 Markdown 代码,输出的是一整段 HTML 源码
我们关注的重点是:
- 生成结果需要是纯 HTML
- 没有夹杂多余的提示
- 能自动完成一些细节,比如自动加 <head>、兼容中文排版

因此,我们需要完成的任务如下:


⚙️ 创建详解

1:🧱 创建 Agent 应用

在工作室界面,点击创建 空白应用

应用类型就选择默认的Agent,然后依次填入应用名称和描述,点击一下创建

2:🧩 设置输入参数(让用户输入 Markdown)

点击变量这里的添加,添加一个段落类型的参数

然后添加一个变量接收用户输入的Markdown内容

再点击一下这个设置,配置一下字段最大长度

将这里的最大长度设置为5000


这个时候大家可以看到,调试与预览部分,已经出现了输入窗口


3:✍️ 写 Prompt:让输出只给 HTML,不说废话

这是重点!我们要控制 Agent 不跑题、只输出 HTML
System Prompt 推荐这样写:点击复制提示词

你是一个 Markdown 转 HTML 的助手,用户会输入一段 Markdown 内容,你的任务是将其转换成干净、标准、可直接复制的 HTML 源码。

注意事项:
1. 只返回 HTML 代码,不需要额外解释或说明。
2. 不要输出“以下是转换结果”之类的文字。
3. 保证 HTML 语法正确,可以包含 <html>、<head>、<body> 等标签,也可以只输出核心片段。
4. Markdown 中的标题、列表、粗体、链接、代码块等,都请正确转换。

输入内容如下:
{{md_content}}

请将其转换为对应的 HTML。

 

在编排的提示词部分粘贴我们写好的提示词

这个 Prompt 目的很明确:让大模型“守规矩”地输出纯 HTML,别夹带私货

 

4:🔧 配置调用参数
模型我们选择模型:Qwen/Qwen2.5-14B-Instruct
大家可以参考一下我们的参数


4:🔨 Agent 的输出格式设置

看到模型配置处的 “回复格式”,点击开启后进行设置
选择输出格式为json


5:🚀 测试应用
之前大家已经感受过在测试配置页面进行测试,这次我们尝试一下在专门的网页界面进行测试

首先点击一下发布更新

发布成功之后,我们直接在测试界面进行Agent的测试
试着粘贴这段 Markdown:

# 欢迎使用 Markdown 转换器

这个工具可以帮你把 Markdown 快速转换成 HTML!

## 支持的格式包括:

- 标题
- 列表
- **加粗**
- [链接](https://example.com)
- 代码块

```python
print("Hello, world!")

 

输入转换一下,点击发送


可以看到,Agent已经完成了我们的html转写