场景：产品要个"一键提炼"，但我是前端

需求很常见：详情页有大段图文/长文档，产品想加个"一键总结要点"的按钮。问题是——我是写前端的，不想也不该去碰模型部署、Prompt 工程、向量库这一摊。我要的只是一个稳定的接口：POST 一段长文，返回结构化要点。

自己从零搭一套后端 + 模型调用链，太重。这篇记录我用讯飞星辰 Agent 把"长文提炼"做成一个可直接调用的 API，前端 fetch 一下就完事的全过程。

思路：后端逻辑用平台搭，前端只管调

讯飞星辰 Agent 是个智能体开发平台，对前端最友好的一点是：你在平台里把 Agent 调好，然后一键发布成 API（也能反向发布成 MCP Server 给别的系统复用）。模型、提示词、链路都在平台侧，前端拿到的就是个普通 HTTP 接口。

整体分工：

层

谁负责

干什么

模型/Prompt/链路

星辰平台

长文 → 结构化要点

接口

星辰发布的 API

暴露成 HTTP

调用与展示

我（前端）

fetch + 渲染

步骤一：在平台里搭一个"提炼" Agent

用零代码那档就够。核心是把输出约束成固定结构，方便前端解析。设定大致写成：

你是文档要点提炼助手。

输入：一段长文本。

输出：严格的 JSON，字段为

{ "summary": "一句话总览", "points": ["要点1","要点2", ...], "keywords": ["关键词", ...] }

不要输出 JSON 以外的任何内容。

步骤二：发布成 API

调好后在发布渠道里选"API"，平台会给你调用地址 + 鉴权所需的凭证。这一步把平台侧能力变成了一个标准接口。如果后续别的内部系统也要复用这个能力，还可以发布成 MCP Server，不用重复造。

步骤三：前端调用（示意）

拿到接口后，前端就是熟悉的活儿了。结构示意（具体鉴权字段以平台控制台为准）：

async function summarize(longText) {

  const res = await fetch(API_ENDPOINT, {

    method: 'POST',

    headers: {

      'Content-Type': 'application/json',

      'Authorization': `Bearer ${API_TOKEN}`, // 凭证以控制台为准

    },

    body: JSON.stringify({ input: longText }),

  });

  if (!res.ok) throw new Error(`summarize failed: ${res.status}`);

  const data = await res.json();

  // data 里取出 Agent 输出的 JSON 字符串再 parse

  return JSON.parse(data.output);

}

前端把返回的 summary / points / keywords 渲染成卡片即可。

两个真实踩坑

1 JSON 输出要靠提示词"压"稳。 即便设定要求只输出 JSON，偶尔它也会多句寒暄导致 JSON.parse 炸。我的做法：提示里反复强调"仅输出 JSON"，并在前端做容错——先用正则抠出 {...} 再 parse，别裸 parse。

2 长文链路响应不是秒级。 文本一长，整条链路要几秒，前端务必做 loading 态和超时处理，别让按钮看起来像卡死。

小结

对前端来说，给页面加 AI 能力，最划算的姿势是"让平台当后端"：你不碰模型，只消费一个接口。调通第一版大概一两个小时。

去把你的第一个 Agent 发布成 API 试试吧！！！