跳到主要内容
本页介绍如何使用自定义输出渲染，通过您自己的自定义 HTML 页面可视化实验的输出。 您将学习如何：

​
概览

默认情况下，LangSmith 以标准 JSON 格式显示输出。通过自定义输出渲染，您可以将此默认视图替换为自己的 HTML 页面，该页面通过 postMessage API 接收输出数据并按照您选择的方式进行渲染。 这对于以下方面特别有用：
  • 特定领域格式化：以其原生格式显示医疗记录、法律文档或其他专业数据类型。
  • 自定义可视化：从数字或结构化输出数据创建图表、图形或示意图。
自定义渲染是为每个数据集配置的。

​
先决条件

  • LangSmith 数据集
  • 一个可以接收 postMessage 事件的网页（可以在任何地方托管或在本地运行）
  • HTML/JavaScript 和 postMessage API 的基本知识

​
配置自定义输出渲染

​
在 LangSmith UI 中

要为数据集配置自定义输出渲染： 数据集页面，带有显示自定义输出渲染选项的三点菜单
  1. 导航到数据集与实验页面中的数据集。
  2. 单击右上角的 ⋮（三点菜单）。
  3. 选择自定义输出渲染。
  4. 切换启用自定义输出渲染。
  5. 在URL字段中输入网页 URL。
  6. 单击保存。
Custom Output Rendering modal with fields filled in

​
通过 API

您还可以通过更新数据集元数据以编程方式配置自定义渲染 
from langsmith import Client

client = Client()

# Update dataset metadata with iframe config
client.update_dataset(
    dataset_id="your-dataset-id",
    metadata={
        "iframe_config": {
            "enabled": True,
            "url": "https://your-domain.com/output-renderer.html"
        }
    }
)

​
构建自定义渲染器

​
理解消息格式

您的 HTML 页面将通过 postMessage API 接收输出数据。LangSmith 发送的消息结构如下： 
{
  type: "output" | "reference",
  data: {
    // The outputs (actual output or reference output)
    // Structure varies based on your application
  },
  metadata: {
    inputs: {
      // The inputs that generated this output
      // Structure varies based on your application
    }
  }
}
  • 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
在 GitHub 上编辑此页面源文件。
以编程方式连接这些文档到 Claude、VSCode 等，通过 MCP 获取实时答案。
© . This site is unofficial and not affiliated with LangChain, Inc.