Dify tools with customized UI? e.g. embedding an iframe

[ifsheldon]

Self Checks

• I have searched for existing issues search for existing issues, including closed ones.
• I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
• Pleas do not modify this template :) and fill in all the required fields.

1. Is this request related to a challenge you're experiencing?

Yes. I want to make a tool that shows customized info visualization, like an interactive pie chart etc. But it seems we can only return text, images and links. Will dify automatically open the link that is returned by a tool?

2. Describe the feature you'd like to see

Allow a tool to open a website and place the UI in an iframe. Or, automatically open the link that's returned by a tool?

3. How will this feature improve your workflow or experience?

If this feature is implemented, users of the agent can use customized UI to interact with a tool, allowing more diverse interaction.

4. Additional context or comments

No response

5. Can you help us with this feature?

• I am interested in contributing to this feature.

[dosubot[bot]]

Hey @ifsheldon! Long time no code! 🚀 How's the digital crafting going?

Based on the information available in the Dify repository, it is indeed possible to embed custom UI elements like iframes for displaying interactive visualizations. This can be achieved by utilizing the provided WebApp Templates, which are open source under the MIT license. You can modify these templates to include custom UI elements such as iframes. Here's a general approach:

1. Choose a suitable WebApp Template from the ones provided on GitHub (e.g., Conversational app or Text generation app).

2. Modify the HTML, CSS, and JavaScript files within the template to include custom UI elements like iframes. For example, to add an iframe, you would typically modify an HTML file within the project to include the iframe element:

   <iframe src="https://example.com" width="600" height="400"></iframe>

3. Configure the Dify App ID and API Key in the config/index.ts file, along with any other necessary configurations specific to your application.

4. Follow the deployment instructions provided in the README file of the WebApp Template to deploy your application with the custom UI elements.

You can find more details in the Dify documentation.

As for your question about automatically opening links returned by a tool, I wasn't able to find a direct answer within the repository. However, it's worth noting that the behavior of automatically opening links can often be controlled by the client (the user's browser or app), and not always by the server or the platform. This is typically a security measure to prevent unwanted redirections.

For displaying charts, a previous issue suggests using mermaid.js to display charts. You can ask the bot to return with mermaid.js to display some chart.

I hope this helps! If you have further questions or need more clarification, feel free to ask.

Sources

• Can the reply content support displaying charts?
• en/user-guide/launching-dify-apps/launch-webapp.md
• en/features/ai-plugins/based-on-frontend-templates.md

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.

[Yeuoly]

Great idea, then you refer to this PR #2612