Feature: Improving langgraph integration with jupyter notebooks and the ipython display() function

[cab938]

At the moment it's pretty clunky to get a visual of either a langgraph graph or a langchain graph of runnables if you are using a jupyter (ipython) notebook. The canonical approach seems to be something like the following:

display(graph.get_graph().draw_mermaid_png())

Where graph is a CompiledStateGraph or the like.

Jupyter has strong support for different mimetypes as a cell output format, and this includes PNG/JPG images as well as other mimetypes (notably, HTML). A more natural approach to visualizing the above would just be to write

display(graph)

Or, if it is the last item on the line in the cell, the display() function should be called automatically.

To achieve this change is actually straight forward -- the display() function just looks for the presence of a few special methods on the object (graph) and if they exist then it will invoke them, and details are provided here: https://ipython.readthedocs.io/en/stable/config/integrating.html. This soft contract means there is no need for external dependencies to be added, which is particularly nice.

I propose that we add something like the following to the graph class:

def _repr_mimebundle_(self, **kwargs):
    """Mime bundle used by jupyter to display the graph"""
    output = {
        "text/plain": repr(self), 
        "image/png": self.get_graph().draw_mermaid_png()
        }
    return output

This preserves the ability to print the graph and see an object reference, while also providing an inline png image of the mermaid representation. Here's an example screenshot showing how this would work in jupyter (specifically in the VS Code jupyter extension) with a monkey patch:

[cab938]

Down the line it would be great to implement a more interactive interface to this, instead of just a png of a mermaid rendering. The ipython display has facilities for this using HTML as that representation, which means you could add in things like disclosure (click the node to see more properties of it, or collapse a subgraph), hovers, clicks, etc. It's probably possible to go overboard and write a whole langgraph studio knock off just in an HTML-base repr for the graph, though I doubt this would be usable (to be clear, I'm not suggesting that!). But a little bit more interactivity in the notebook would be great.

[cab938]

See PR at #2468