Improve input rendering for the LangGraph auto instrumentor

[annie-sri]

The langgraph auto instrumentor populates the attributes.input.value field with a lot of extra info which does not render nicely in the U; for example, the input field includes a messages json structure like so:

It would be cleaner to just pull in the messages.content field to improve the rendering.

[dosubot]

Hi @annie-sri! I'm Dosu and I’m helping the openinference team.

The Phoenix UI currently renders the entire JSON structure from attributes.input.value, which can be cluttered when the LangGraph auto instrumentor includes all message metadata. There are two main ways to improve this:

1. Instrumentor-side: Have the LangGraph auto instrumentor serialize only the relevant messages[].content fields into attributes.input.value before sending to Phoenix. This keeps the UI simple but loses other metadata unless you store it elsewhere.

2. UI-side: Update the Phoenix UI components (like RootSpanMessage or SpanDetails) to parse the input JSON and render just the messages[].content array if present. For example, you could modify the component to check if input.value is JSON, extract messages, and display only their content fields. Here’s a pseudocode snippet for a React component:

const valueString = useMemo(() => {
  if (mimeType === "json") {
    const parsed = safelyParseJSON(value as string);
    if (parsed.json?.messages) {
      return parsed.json.messages.map(m => m.content).join("\n\n");
    }
    return JSON.stringify(parsed.json, null, 2);
  }
  return String(value);
}, [value, mimeType]);

This approach preserves all input data for debugging but only shows the message content in the UI. If you want to keep all metadata for observability, the UI change is preferable. If you only care about content, changing the instrumentor is simpler.

There isn’t a built-in config or hook for customizing which fields are rendered; you’ll need to update the code as described above. For LLM spans, the UI already renders message content in a dedicated tab, but for generic input rendering, it defaults to the full JSON structure. See the SpanDetails and LLMSpanInfo components for reference.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[nate-mar]

@ialisaleh can you check to make sure that we are setting input.value with just the text content, and leaving the messages array in tact? If we aren't, can you help fix it? thanks.