API Component

[bradyd78]

I am currently using the API Request component to access a remote ollama model. It successfully reaches the model, but it has been returning in json format. What is the best way to parse through the response and export to the chat output component?

[dosubot[bot]]

To parse the JSON response from the API Request component and export it to the chat output component in Langflow, you can rely on the built-in handling provided by both the backend and frontend.

When you use the API Request component, the response is automatically parsed as JSON (if possible) by the make_request method. This method attempts to decode the response as JSON and wraps the result in a Data object, which is then passed along the workflow see code example.

On the frontend, the chat output component (specifically, the ContentDisplay component) detects when the content type is JSON and uses JSON.stringify to format and display the data in the chat UI. If you want to customize how the JSON is displayed or further process it, you can use the JsonOutputViewComponent, which parses the data (if it's a string) and renders it using a JSON editor see code example.

If you need to extract a specific field from the JSON response before displaying it, you can add a custom component or a small script in your workflow to access the desired property from the parsed JSON object and pass that value to the chat output.

In summary: as long as your API Request component is returning a JSON response, Langflow will parse and display it in the chat output automatically. If you want to display only a specific part of the JSON, extract that field in your workflow before sending it to the chat output component see details.

To reply, just mention my name @dosu.

---

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

[bradyd78]

@dosu I have connected the result of the API Request component with the parser component. This returns {"source": "http://local/api/chat/completions", "result": {"id": "llama3.2:latest-xxxxx", "created": xxxxx, "model": "llama3.2:latest", "choices": [{"index": 0, "logprobs": null, "finish_reason": "stop", "message": {"content": "How can I assist you today?", "role": "assistant"}}], "object": "chat.completion", "usage": {"response_token/s": xx, "prompt_token/s": xx, "total_duration": xxx "load_duration": xxx, "prompt_eval_count": xx, "prompt_tokens": xx, "prompt_eval_duration": xxx, "eval_count": x, "completion_tokens": x, "eval_duration": xxxx, "approximate_total": "0h0m0s", "total_tokens": xx, "completion_tokens_details": {"reasoning_tokens": x, "accepted_prediction_tokens": x, "rejected_prediction_tokens": xx}}}}. What would be the best way to have the chat output only display the content section?

[bradyd78]

@dosu

[dosubot[bot]]

To display only the 'content' section from your JSON response in the chat output, you have two main options:

1. Use the Parse JSON component with a JQ query. Connect your API Request output to the Parse JSON component, and set the JQ query to:

.result.choices[0].message.content

This will extract the content string from the nested structure. Pass the output of this component to your chat output.

2. Alternatively, if you use the Extract Key component, you’ll first need to extract the 'result' key, then chain another Extract Key to get 'choices', and so on, but this is more cumbersome for deeply nested fields.

The Parse JSON + JQ approach is the most direct for your case, since your 'content' field is nested under .result.choices[0].message.content in the API response (reference). Once extracted, connect the output to your chat output component and it will display just the assistant's reply.

To reply, just mention @dosu.

---

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