Back to Updates

Update July 23, 2024

This update is very 🥦 (broccoli emoji). In our project, we use the term "broccoli" as the opposite of "ice cream". The latter is all about having fun and making cool stuff. The former is about cleaning up, documenting, and making the project more accessible and fun for others. Over the last 5-ish weeks, we've been eating a lot of broccoli.

Here are the highlights of what we've been working on!

🧑‍🏫 Website

The most noticeable change since the last time we met would be on the project website. It was truly the labor of love.

Help Link

First, we've tech'd up our ability to show example boards. Why post a screenshot of a board, when we can just show the actual board:

This ability to embed boards into the site is quite handy: now, every example of a component or a guide comes with its own set of boards that you can immediately run and play with.

It's "Components" now

Wait... did we just say "Component?" What happened to "Node"? As we played with Breadboard, we realized that the term "node" is both a bit overloaded ("Node as in NodeJS? Or some other node?") and also is a bit farther from the terminology used by the actual breadboard enthusiasts.

So we picked another term: "Component". Yeah, it's also quite overloaded and overused, but at least it puts us back on track with our breadboard vernacular.

As part of us settling down on the terminology, we are now working lock on to three key terms in Breadboard: "component" (nee "node"), "kit", and "board" -- everywhere, in our docs, our code and the Visual Editor.

Guides and more guides

The website now features several guides to help you get going with the Breadboard Visual Editor. There's one that takes you through the creation of a Librarian agent, one that builds a Social Post Generator with you, one that helps you build your first tool, and even a guide for making your own Novel Generator.

Each guide comes with step-by-step instructions and snapshots of boards to help you play along. Give them a whirl and tell us what you think.

And if you're just getting started, there's even a guide to the Visual Editor itself.

Kit documentation

We've invested a substantial amount of 🥦 time into writing docs for all Breadboard kits. We're still not 100% done, but we're close. Most components now have a simple example board that helps explain what it does. For instance, here's the example board for the promptTemplate component:

Component documentation is also reachable via the "Read More" link in the Visual Editor:

Help Link

Summer cleaning

We adjusted the look of the website to be more like the Visual Editor, as well as cleaned up existing docs and guides, archiving the ones that are no longer relevant. The Breadboard Github repo got a bit of a spruce up, and now points (correctly) to the website.

🎨 Visual Editor

The Visual Editor continues to evolve and improve as we get feedback from others (thank you!), and as we ourselves notice rough edges in our day-to-day work.

A Component Runner

The first addition is the ability to run components in isolation from the board you're working on. This gives the opportunity to both explore what a component does and confirm that it works with the values you've set for it in a given board. This is particularly useful if the component you're interested in is found further along in a board and you'd rather just skip to it.

We're already seeing a lot of value here, and we'll continue to polish this feature in the coming weeks and months.

Component testing showing a runJavascript node

Comments Component

You may notice that a lot of the boards embedded on this site or in the Visual Editor have comments on them, including in this update! That's because we added the ability to drop comments into boards. You can also use a markdown in your comments, meaning you link to other resources as well as explain how something works!

Comments component showing markdown

A Welcome Pane

One point of friction we noticed, particularly for people new to the Visual Editor, was the "blank canvas" problem, where someone struggles to get going when they're faced with a blank screen. When you first loaded the Visual Editor that's pretty what you were presented with.

To improve matters we've added a Welcome Pane that includes links to guides, the option to create a new board, a link to our bug tracker, and a list of recently accessed boards.

The welcome pane in the Visual Editor

Other assorted UI improvements

In no particular order, here are a few of the other quality-of-life improvements we've made to the Visual Editor recently.

  1. Tidier top bar navigation. We've removed some deprecated features, and introduced an overflow menu in the top right corner of the main navigation with infrequently-accessed (but still very handy!) features.
  2. "Save As...". If you open an example board, or someone else's board, you usually don't have write permissions, meaning that you can't save the board. Now you can use the Save As... feature to create your own copy instead. You can also use this feature to duplicate your own boards, which is very handy when you want to quickly spin up a variant of a promising idea. We also support the Cmd/Ctrl + Shift + S keyboard shortcut, too!
  3. Improved inputs. We've done some underlying work on the right panel, unifying inputs for both the Activity Log and the Component configuration panes. This means that input is generally more robust and consistent across the board!
  4. Board filtering. We noticed that we often scroll a lot to find a particular board we want to work on, so to improve matters we've introduced a filter in the navigation menu.
  5. Tools selection. The board selector used to show all the boards you could access. We found that the lists of boards were becoming overwhelming, so now it only shows boards that have been tagged as Tools by their creator. (You can find the checkbox to mark a board as a Tool in the Board Details pane on the right side of the Visual Editor.) If you want to use a board that isn't marked as a Tool for whatever reason, you still can do that by choosing "Custom URL" in the board selector and entering the board's URL.
  6. Updated examples. A lot of the boards we listed as examples in the Visual Editor were starting to show their age! So we've moved them to their own "playground" area which can be accessed if you have a local clone of the Visual Editor. (They're mostly around for posterity at this point!). As part of our broccoli work we've updated the examples to match the guides here on the site.

🔍 Sneak Peek: Highlighting Invalid Wires

We are working on a feature to let you know when ports of incompatible types are wired together, which we hope will help in fixing a whole set of subtle bugs 🐛 that can creep into boards! If you want to play with it you can switch it on in the settings.

An invalid wire being highlighted in the Visual Editor

🚚 Service Component

One of the cool additions to the Core Kit is the service component. Think of it as an escape hatch, which allows quickly adding various external services to our boards. All the API has to do is follow the Breadboard Service Endpoint (BSE) protocol.

For example, here's a simple Google News service built using Val town that is brought into a board. Now this board can search news!

By the way, we here in Breadboard project love Val town. It's a perfect duct tape for our popsicle sticks, a necessary ingredient in any prototyping adventure.

🏄 Board Server

The board server, which was introduced in the last month's update, is growing like a weed. We've been adding various new bits of functionality to it.

We taught it to communicate more about itself and the boards it serves, starting down the path of proper access controls. It now will report correctly whether or not the board belongs to you or someone else, and it will even hide boards that are marked as draft from others on the server.

And -- plot twist! -- every board can now serve as a BSE endpoint. Just change the board URL extension to be .api when typing it into the Service URL field of a service node.

Board Service URL

When used as a service, boards run on the board server, which means that now we can shift board computation resources across clients and servers. Parts of a board may run in the browser, and parts of them on various servers -- all orchestrated in one place.

This is a big deal, because it points toward the future where board servers not just host boards and allow quickly sharing them withing a team. In that future, the board servers run boards and act as API endpoints for boards, enabling makers of boards go from idea to a working API (and an app!) in one click. This is what really gets us excited.