Make breadboard ui embeddable

breadboard-ai / breadboard

A library for prototyping generative AI applications.

Apache License 2.0

96 stars 20 forks source link

Make breadboard ui embeddable #722

Open dglazkov opened 4 months ago

dglazkov commented 4 months ago

For https://github.com/google/labs-prototypes/tree/main/seeds/gemini-guide, we'd like to be able to embed parts of the current Breadboard UI into a site. For example, we'd like to be able to show a preview of a board as part of a larger page.

Mearman commented 4 months ago

@alexandraM98 has been looking over the components with a view towards this

paullewis commented 4 months ago

In theory there's nothing to prevent it, I guess it's mostly a case of making sure that there's a suitable API / bootstrap in place so that it's convenient to work with. Today we keep a fair amount of stuff (like the runner) outside in the breadboard-web and feed info into breadboard-ui, which we'd need to do in any other embedded context.

Or maybe another way to say it is that we could take a similar approach to the CLI and bundle in breadboard-web and feed it the board of interest?

Mearman commented 4 months ago

The @breadboard-ai/exadev team is still experimenting but will share any insights as we have them. My gut says being able to do both would be ideal

dglazkov commented 4 months ago

Vague ideas:

a developer runs npm install @google-labs/breadboard-web
this gives them access to a couple of web components: preview, debugger, etc.
they can just embed those into their docs
the components take in an abbreviated version of run config (maybe just a URL, even).
they can also do this from esm.run or similar.

WDYT?

Mearman commented 4 months ago

I think this aligns with one of the use-cases I was thinking of us aiming for. The flow you're describing feels a lot like that of the swagger react component: https://www.npmjs.com/package/swagger-ui-react

import SwaggerUI from "swagger-ui-react"
import "swagger-ui-react/swagger-ui.css"

export default App = () => <SwaggerUI url="https://petstore.swagger.io/v2/swagger.json" />

dglazkov commented 4 months ago

There's now a bb-embed custom element at @google-labs/breadboard-web/embed.js, instantiated like this:

https://github.com/breadboard-ai/breadboard/blob/464c10e52d26ac6b6fd39171234ffe84ad0bb1ae/packages/breadboard-web/embed.html#L65-L66

Not sure what to do next though. How do I make it easily portable/usable from anywhere?

dglazkov commented 4 months ago

Now embeddable: https://output.jsbin.com/biwuvec/quiet

The code is:

<bb-embed url="https://raw.githubusercontent.com/breadboard-ai/breadboard/main/packages/breadboard-web/public/graphs/summarizer.json"></bb-embed>
<script type="module" src="https://esm.sh/@google-labs/breadboard-web@1.2.0/embed.js?alias=fs/promises:fs"></script>

Mearman commented 4 months ago

very nice!

Mearman commented 4 months ago

~~@dglazkov did you try with a relative local path? I'm thinking about use in a development environment~~ edit: nevermind. I had a typo e.g.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    </head>
    <body>
        <bb-embed
            url="./board.json"
        />
        <script
            type="module"
            src="https://esm.sh/@google-labs/breadboard-web@1.2.0/embed.js?alias=fs/promises:fs"
        ></script>
    </body>
</html>