Display Adaptive Card

Summary

Hello, In my Streamlit app I want to display Adaptive cards.
So user will enter JSON of the Adaptive card and He should be able to see the card.


So, as in the answer field we have the JSON of adaptive card, Now how can we have adaptive card itself to be displayed below it.

Code snippet:

txt = st.text_area('Please enter JSON of Adaptive card')
#txt = {"type":"AdaptiveCard","body":[{"type":"TextBlock","text":"Our product is scalable with no limitations on it. We do load and performance testing  to make sure that our application is robust performance wise and supports multiple logins at the same time.","wrap":True,"size":"Medium"}],"$schema":"http://adaptivecards.io/schemas/adaptive-card.json","version":"1.2","speak":"Our product is scalable with no limitations on it. We do load and performance testing  to make sure that our application is robust performance wise and supports multiple logins at the same time."}
#Below the JSON we want to show the adaptive card.

Debug info

  • Streamlit version: 1.14.0
  • Python version: 3.8.0
  • Using Conda

As explained in the docs, I guess.

Cool, I remember using this in MS Bot Framework. I think the way forward would be to use the Adaptive Card JavaScript SDK in a Streamlit component, and one of the Python Adaptive Card libraries to generate the required schema and json data to send to the component.

Arvindra

Thank you @Goyo @asehmi is there a python SDK which can be used to display adaptive card in a Streamlit Component?

You want the card rendered in the browser, you need javascript. From Streamlit you can use the components API to inject the javascript code in the page.

Hi @Devershi_Vashistha ,

The Python SDKs (Google search) are used to create a json data payload to send to the JavaScript SDK for rendering. It’s the latter that you’d need to host in a Streamlit component. The Python side of the Streamlit component would pass the json data + (optionally) JavaScript action handler scripts. As mentioned by @Goyo, the JavaScript side of the Streamlit component will then render the card and (optionally) execute the JavaScript action script or pass the action data back to Streamlit to handle.

You should be able to do all of this with a static HTML Streamlit component. If interested, see a tutorial I wrote here, specifically the section on “Component Zero”.

I haven’t found any Python lib that supports the newish AC templates, but a least this implementation supports AC v1.5.

Hope you’ll have a go at this and if you do, please post back your progress!

Arvindra

1 Like