Skip to main content
自定义输出渲染允许您使用自己的自定义 HTML 页面来可视化运行输出和数据集参考输出。这对于以下情况特别有用：
  • 特定领域格式化：以原生格式显示医疗记录、法律文档或其他专业数据类型。
  • 自定义可视化：从数值或结构化输出数据创建图表、图形或示意图。
在本页中，您将学习如何：

​
配置自定义输出渲染

在两个级别配置自定义渲染：
  • 对于数据集：将自定义渲染应用于与该数据集关联的所有运行，无论它们出现在何处——在实验中、运行详情窗格中或标注队列中。
  • 对于标注队列：将自定义渲染应用于特定标注队列中的所有运行，无论它们来自哪个数据集。这优先于数据集级别的配置。

​
对于追踪项目

要为追踪项目配置自定义输出渲染： 显示自定义输出渲染配置的追踪项目设置
  1. 导航到 追踪项目 页面。
  2. 单击现有追踪项目或创建一个新项目。
  3. 在编辑追踪项目窗格中，滚动到 自定义输出渲染 部分。
  4. 切换 启用自定义输出渲染。
  5. 在 URL 字段中输入网页 URL。
  6. 单击 保存。

​
对于数据集

要为数据集配置自定义输出渲染： 数据集页面，三点菜单显示自定义输出渲染选项
  1. 在 数据集与实验 页面中导航到您的数据集。
  2. 单击右上角的 ⋮（三点菜单）。
  3. 选择 自定义输出渲染。
  4. 切换 启用自定义输出渲染。
  5. 在 URL 字段中输入网页 URL。
  6. 单击 保存。
已填写字段的自定义输出渲染模态框

​
对于标注队列

要为标注队列配置自定义输出渲染： 显示自定义输出渲染配置的标注队列设置
  1. 导航到 标注队列 页面。
  2. 单击现有标注队列或创建一个新队列。
  3. 在标注队列设置窗格中，滚动到 自定义输出渲染 部分。
  4. 切换 启用自定义输出渲染。
  5. 在 URL 字段中输入网页 URL。
  6. 单击 保存 或 创建。
当自定义渲染设置在多个级别应用时，优先级如下：标注队列 > 数据集 > 追踪项目。

​
构建自定义渲染器

​
理解消息格式

您的 HTML 页面将通过 postMessage API 接收输出数据。LangSmith 发送具有以下结构的消息： 
{
  type: "output" | "reference",
  data: {
    // 输出（实际输出或参考输出）
    // 结构根据您的应用程序而变化
  },
  metadata: {
    inputs: {
      // 生成此输出的输入
      // 结构根据您的应用程序而变化
    }
  }
}
  • type：指示这是实际输出（"output"）还是参考输出（"reference"）。
  • data：输出数据本身。
  • metadata.inputs：生成此输出的输入数据，作为上下文提供。
消息传递时机：LangSmith 使用指数退避重试机制，以确保即使您的页面加载缓慢也能接收到数据。消息最多发送 6 次，延迟时间递增（100ms、200ms、400ms、800ms、1600ms、3200ms）。

​
示例实现

此示例监听传入的 postMessage 事件并在页面上显示它们。每条消息都编号并格式化为 JSON，便于检查 LangSmith 发送到您的渲染器的数据结构。 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>PostMessage 回显</title>
        <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" />
    </head>
    <body>
        <h1>PostMessage 消息</h1>
        <div id="messages"></div>
        <script>
            let count = 0;
            window.addEventListener("message", (event) => {
                count++;
                const header = document.createElement("h3");
                header.appendChild(document.createTextNode(`消息 ${count}`));
                const code = document.createElement("code");
                code.appendChild(document.createTextNode(JSON.stringify(event.data, null, 2)));
                const pre = document.createElement("pre");
                pre.appendChild(code);
                document.getElementById("messages").appendChild(header);
                document.getElementById("messages").appendChild(pre);
            });
        </script>
    </body>
</html>

​
自定义渲染出现的位置

启用后，您的自定义渲染将替换以下位置的默认输出视图：
  • 实验比较视图：当比较多个实验的输出时：
显示自定义渲染的实验比较视图
  • 运行详情窗格：当查看与数据集关联的运行时：
显示自定义渲染的运行详情窗格
  • 标注队列：当在标注队列中查看运行时：
显示自定义渲染的标注队列
将这些文档连接到 Claude、VSCode 等，通过 MCP 获取实时答案。
在 GitHub 上编辑此页面 或 提交问题。