Need help in displaying images in response

[RagavMaddali]

I have created a Postgres MCP server and created a sequential agent. As part of the code we have a step in which python code generates plots and sends in response as base64. Need help in displaying the images in ADK web ui.

code:

from google.adk.agents.llm_agent import LlmAgent
from google.adk.tools.mcp_tool.mcp_toolset import MCPToolset, SseServerParams
from google.adk.agents.sequential_agent import SequentialAgent
from google.adk.tools import built_in_code_execution


async def create_agent():
  """Gets tools from MCP Server."""
  tools, exit_stack = await MCPToolset.from_server(
      connection_params=SseServerParams(
          url=f"http://localhost:8808/sse",
      )
  )

  GEMINI_MODEL = 'gemini-2.0-flash'

  code_writer_agent = LlmAgent(
      name="CodeWriterAgent",
      model=GEMINI_MODEL,
      instruction="""You are a sql Generator.
  The orders table holds all the information about the orders.
  The orders table id column has the unique id for every order.
  the orders table user_id column has the id of user who placed the order.
  the orders table product_id column has the id of the product ordered by the user.
  the orders table status column has the status of the order. completed, shipped and processing are the three possible values for order status.
  Based *only* on the user's request, write sql query that fulfills the requirement.
  Output *only* the complete sql. 

  """,
      description="Writes sql query on a specification.",
      output_key="sql"
  )

  code_reviewer_agent = LlmAgent(
      name="CodeReviewerAgent",
      model=GEMINI_MODEL,
      # Change 3: Improved instruction, correctly using state key injection
      instruction="""You are an expert sql query Reviewer. 
      Your task is to provide constructive feedback on the provided sql.
      The orders table holds all the information about the orders.
      The orders table id column has the unique id for every order.
      the orders table user_id column has the id of user who placed the order.
      the orders table product_id column has the id of the product ordered by the user.
      the orders table status column has the status of the order. completed, shipped and processing are the three possible values for order status.

      **sql to Review:**
      ```
      {sql}
      ```

  **Review Criteria:**
  1.  **Correctness:** Does the sql query work as intended? Are there syntax errors?

  **Output:**
  Provide your feedback as a concise, bulleted list. Focus on the most important points for improvement.
  If the query is excellent and requires no changes, simply state: "No major issues found."
  Output *only* the review comments or the "No major issues" statement.
  """,
      description="Reviews sql query and provides feedback.",
      output_key="review_comments",  # Stores output in state['review_comments']
  )

  code_refactorer_agent = LlmAgent(
      name="CodeRefactorerAgent",
      model=GEMINI_MODEL,
      # Change 3: Improved instruction, correctly using state key injection
      instruction="""You are a sql query Refactoring AI.
  Your goal is to improve the given sql code based on the provided review comments.

    **Original Code:**
    ```
    {sql}
    ```

    **Review Comments:**
    {review_comments}

  **Task:**
  Carefully apply the suggestions from the review comments to refactor the original sql query.
  If the review comments state "No major issues found," return the original code unchanged.
  Ensure the final sql query is complete and functional.

  **Output:**
  Output *only* the final, refactored sql query. 
  """,
      description="Refactors sql query based on review comments.",
      output_key="refactored_query",
  )

  data_agent = LlmAgent(
      model='gemini-2.0-flash',
      name='dataAssistance',
      instruction=("""
      Pass the generated sql {refactored_query} query to the tool to fetch the data.
      Display the results in tabular format.
      """
      ),
      tools=tools,
      description="Fetch the data for the generated query.",
      output_key="db_data",
  )

  plot_agent = LlmAgent(
      model='gemini-2.0-flash',
      name='plotAgent',
      instruction=("""
      Generate a pie chart and bar graph for data {db_data}. 
      Write and execute python code to generate pie chart and bar graph for data {db_data}.
      Use built_in_code_execution tool to execute the generated python code. Save the plots as images and return the saved plot images.
      Return only the final pie chart and bar graph generated by executing the python code.
      Convert the raw image in the response and display as image.
      """
      ),
      tools=[built_in_code_execution]
  )
  code_pipeline_agent = SequentialAgent(
      name="sqlPipelineAgent",
      sub_agents=[code_writer_agent, code_reviewer_agent, code_refactorer_agent, data_agent, plot_agent],
      description="""
      Executes a sequence of sql writing, reviewing, and refactoring. 
      Use the refactored sql query to fetch data for the user. 
      Create a pie chart and bar graph for the data fetched.""",
  )

  return code_pipeline_agent, exit_stack


root_agent = create_agent()

[VVarrior1]

You can take a look at the adk samples, specifically the data science one. I'd like to extend the question, how to display images from a cloud deployed agent, using the vertex AI sdk ?