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

​
配置自定义输出渲染

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

​
对于数据集

要为数据集配置自定义输出渲染： Dataset page with three-dot menu showing Custom Output Rendering option
  1. 在 Datasets & Experiments 页面中导航到您的数据集。
  2. 单击右上角的 ⋮（三点菜单）。
  3. 选择 Custom Output Rendering。
  4. 切换 Enable custom output rendering。
  5. 在 URL 字段中输入网页 URL。
  6. 单击 Save。
Custom Output Rendering modal with fields filled in

​
对于注释队列

要为注释队列配置自定义输出渲染： Annotation queue settings showing custom output rendering configuration
  1. 导航到 Annotation Queues 页面。
  2. 单击现有注释队列或创建新注释队列。
  3. 在注释队列设置窗格中，滚动到 Custom Output Rendering 部分。
  4. 切换 Enable custom output rendering。
  5. 在 URL 字段中输入网页 URL。
  6. 单击 Save 或 Create。
当在两个级别都配置自定义渲染时，注释队列配置优先于在该队列中查看的运行的数据集配置。

​
构建自定义渲染器

​
理解消息格式

您的 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 Echo</title>
    <link rel="stylesheet" href="https://unpkg.com/sakura.css/css/sakura.css" />
  </head>
  <body>
    <h1>PostMessage Messages</h1>
    <div id="messages"></div>
    <script>
      let count = 0;
      window.addEventListener("message", (event) => {
        count++;
        const header = document.createElement("h3");
        header.appendChild(document.createTextNode(`Message ${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>

​
自定义渲染出现的位置

启用后，您的自定义渲染将替换以下位置的默认输出视图：
  • 实验比较视图：在比较多个实验的输出时：
Experiment comparison view showing custom rendering
  • 运行详细信息窗格：在查看与数据集关联的运行时：
Run detail pane showing custom rendering
  • 注释队列：在注释队列中审查运行时：
Annotation queue showing custom rendering
Edit the source of this page on GitHub.
Connect these docs programmatically to Claude, VSCode, and more via MCP for real-time answers.