The tool returns json results but there are no json output variables available in the front-end page tool.

Self Checks

[X] This is only for bug report, if you would like to ask a question, please head to Discussions.
[X] I have searched for existing issues search for existing issues, including closed ones.
[X] I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
[X] 请务必使用英文提交 Issue，否则会被关闭。谢谢！:）
[X] Please do not modify this template :) and fill in all the required fields.

Dify version

0.6.12-fix1

Cloud or Self Hosted

Self Hosted (Source)

Steps to reproduce

Creating a workflow that uses the GoogleSearch tool.

✔️ Expected Behavior

The tool output variable contains text, files, and json.

Wish the front-end could be modified immediately to accommodate the JSON Message API in the tool.

❌ Actual Behavior

The tool output variable only contains text, files.

To modify the front-end of Dify version 0.6.12-fix1 to accommodate JSON output variables from the GoogleSearch tool, follow these steps:

Update the Tool YAML Configuration: Ensure that the google_search.yaml file includes the necessary output format for JSON.

identity:
 name: google_search
 author: Dify
 label:
   en_US: GoogleSearch
   zh_Hans: 谷歌搜索
description:
 human:
   en_US: A tool for performing a Google SERP search and extracting snippets and webpages. Input should be a search query.
   zh_Hans: 一个用于执行 Google SERP 搜索并提取片段和网页的工具。输入应该是一个搜索查询。
 llm: A tool for performing a Google SERP search and extracting snippets and webpages. Input should be a search query.
parameters:
 - name: query
   type: string
   required: true
   label:
     en_US: Query string
     zh_Hans: 查询语句
   human_description:
     en_US: used for searching
     zh_Hans: 用于搜索网页内容
   llm_description: key words for searching
   form: llm
 - name: result_type
   type: select
   required: true
   options:
     - value: text
       label:
         en_US: text
         zh_Hans: 文本
     - value: link
       label:
         en_US: link
         zh_Hans: 链接
     - value: json
       label:
         en_US: JSON
         zh_Hans: JSON
   default: link
   label:
     en_US: Result type
     zh_Hans: 结果类型
   human_description:
     en_US: used for selecting the result type, text, link, or JSON
     zh_Hans: 用于选择结果类型，使用文本、链接或JSON进行展示
   form: form

Modify the Tool Logic: Update the google_search.py to handle the JSON output.

from core.tools.tool.builtin_tool import BuiltinTool
from core.tools.entities.tool_entities import ToolInvokeMessage

from typing import Any, Dict, List, Union

class GoogleSearchTool(BuiltinTool):
   def _invoke(self, 
               user_id: str,
               tool_parameters: Dict[str, Any], 
       ) -> Union[ToolInvokeMessage, List[ToolInvokeMessage]]:
       """
           invoke tools
       """
       query = tool_parameters['query']
       result_type = tool_parameters['result_type']
       api_key = self.runtime.credentials['serpapi_api_key']
       # TODO: search with serpapi
       result = SerpAPI(api_key).run(query, result_type=result_type)

       if result_type == 'text':
           return self.create_text_message(text=result)
       elif result_type == 'link':
           return self.create_link_message(link=result)
       elif result_type == 'json':
           return self.create_json_message(json=result)

   def create_json_message(self, json: Any) -> ToolInvokeMessage:
       return ToolInvokeMessage(
           type="json",
           content=json
       )

Update the Front-End: Ensure that the front-end is capable of displaying JSON output. This might involve updating the front-end code to handle and render JSON messages appropriately.

// Example front-end code snippet to handle JSON output
function renderMessage(message) {
   if (message.type === 'json') {
       const jsonContent = JSON.stringify(message.content, null, 2);
       document.getElementById('output').innerText = jsonContent;
   } else if (message.type === 'text') {
       document.getElementById('output').innerText = message.content;
   } else if (message.type === 'link') {
       const linkElement = document.createElement('a');
       linkElement.href = message.content;
       linkElement.innerText = message.content;
       document.getElementById('output').appendChild(linkElement);
   }
}

By following these steps, you can modify the front-end of Dify to accommodate JSON output variables from the GoogleSearch tool in your workflow ^[1]^[2].

To continue talking to Dosu, mention @dosu.

langgenius / dify