> ## Documentation Index > Fetch the complete documentation index at: https://langchain-zh.cn/llms.txt > Use this file to discover all available pages before exploring further. # 自定义输出渲染自定义输出渲染允许你使用自定义的 HTML 页面来可视化运行输出和数据集参考输出。这在以下场景中特别有用： * **领域特定格式化**：以原生格式显示医疗记录、法律文件或其他专业数据类型。 * **自定义可视化**：从数值或结构化输出数据创建图表、图形或示意图。在本页面中，你将学习如何： * 在 LangSmith UI 中 **[配置自定义渲染](#configure-custom-output-rendering)**。 * **[构建自定义渲染器](#build-a-custom-renderer)** 来显示输出数据。 * 了解自定义渲染在 LangSmith 中的 **[出现位置](#where-custom-rendering-appears)**。 ## 配置自定义输出渲染可以在两个级别配置自定义渲染： * **针对数据集**：将自定义渲染应用于与该数据集关联的所有运行，无论它们出现在何处——在实验、运行详情面板或标注队列中。 * **针对标注队列**：将自定义渲染应用于特定标注队列内的所有运行，无论它们来自哪个数据集。此配置优先于数据集级别的配置。 ### 针对追踪项目要为追踪项目配置自定义输出渲染：显示自定义输出渲染配置的追踪项目设置

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](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) 接收输出数据。LangSmith 发送的消息具有以下结构： ```typescript theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} { type: "output" | "reference", data: { // 输出（实际输出或参考输出） // 结构根据你的应用程序而异 }, metadata: { inputs: { // 生成此输出的输入 // 结构根据你的应用程序而异 } } } ``` * `type`：指示这是实际输出 (`"output"`) 还是参考输出 (`"reference"`)。 * `data`：输出数据本身。 * `metadata.inputs`：生成此输出的输入数据，提供上下文。 **消息传递时机**：LangSmith 使用指数退避重试机制，确保即使你的页面加载缓慢也能接收到数据。消息最多发送 6 次，延迟时间递增（100ms、200ms、400ms、800ms、1600ms、3200ms）。 ### 示例实现此示例监听传入的 postMessage 事件并将其显示在页面上。每条消息都被编号并格式化为 JSON，便于检查 LangSmith 发送给你的渲染器的数据结构。 ```html theme={"theme":{"light":"catppuccin-latte","dark":"catppuccin-mocha"}} PostMessage 回显

PostMessage 消息

``` ## 自定义渲染出现的位置启用后，你的自定义渲染将替换以下位置的默认输出视图： * **实验比较视图**：在比较多个实验的输出时：显示自定义渲染的实验比较视图

* **运行详情面板**：在查看与数据集关联的运行时：显示自定义渲染的运行详情面板

* **标注队列**：在标注队列中审阅运行时：显示自定义渲染的标注队列

***

[Edit this page on GitHub](https://github.com/langchain-ai/docs/edit/main/src/i18n\zh-CN\langsmith\custom-output-rendering.mdx) or [file an issue](https://github.com/langchain-ai/docs/issues/new/choose). [Connect these docs](/use-these-docs) to Claude, VSCode, and more via MCP for real-time answers.