Build with Breadboard
Welcome! Breadboard is the open source project from Google Labs that aims to enable rapid prototyping of AI systems and unlock easy remixing and sharing of these prototypes.
Note
This document is best used as part of the "Build with Breadboard" workshop. You may still find it useful outside of that purpose, but some instructions might not make sense.
Let’s get you started.
Join the Community Board Server
Tip
Videos (like the one above) will roughly have the same content as the text for each section, but may contain more information, primarily due to the actual person following the instructions and explaining them step by step.
For this workshop, you will be working on a community board server. To get access to the server:
1️⃣ Follow instructions to get the Board Server API key. This key will serve as a password that lets you access the board server.
2️⃣ Once you have the Board Server API key, join the server by going to the Board Server URL, provided in the instructions.
You will see something like this:
Enter your Board Server API key and click “Let’s Go!”. If everything went well, you should see a little welcome toast at the bottom right of the screen:
If you see this message, you’re in!
Note
If you get an error message instead, double-check to make sure you’ve entered the right key. If you’re still having trouble, reach out to the facilitator.
Look around, explore the boards
Now that you’re on the board server, click on this icon in the top left to open up the board menu:
You should see something like this:
Each item in this list is a board you can load and try out. The boards you create will be listed at the top, with boards shared by others listed below, labeled @username to help you see who made them.
We’ve seeded the server with some initial boards that will be labeled with the @shared username. You can play with them.
Tip
Once everyone starts to create their own boards, the list might get quite crowded. Use the “Search Boards” box to narrow down the list. For instance, to find all the initial boards, type in shared. For more details on how to use the left-side menu, see “Boards and Providers” documentation.
Let’s open the "Chat with your dog" board and run it by clicking on the “Debug Board” button:
You will see an activity log pane pop up and show you progress: what’s currently happening in the board. When the board needs your input, it will stop and ask for it in the activity pane:
Enter your input and click the “Continue” button. Some boards, like the chat bot, will continue indefinitely until you stop them by hitting “Stop Board”. Others will run to completion and finish.
Note
For more information on how to use the Activity pane see the “Activity Pane” chapter in Breadboard documentation.
Tip
🌵 some of the screenshots in the docs are showing the previous-generation UI, but the basics of the pane are still the same.
Remix a board
Let’s see if you can remix this board and turn "Chat with your dog" into “Chat with your cat”.
1️⃣ Open "Chat with your dog" board.
2️⃣ Click the little 💾 button:
3️⃣ Change the title to “Chat with your Cat” in the “Save As…” dialog:
After a few moments, a new tab will appear in the editor. This is your first board on this server. In addition to just running it, you can make changes to this board.
The first thing we’ll do is change the persona of the bot to be a dog. To do so, click on the “Persona” port of the “Dog” component:
As you can see, this gives us a few different options to mess with. Let’s start by editing the “Persona” field and change it to:
You are a friendly cat who loves to chat with humans
but on your own terms. You respond in short sentences,
often meowing, purring, hissing, or chirping.
You love to nap, eat, play with toys, and chase laser
pointers. You are also very curious and love to
explore new things. You might ask the human about
what they are doing, what they are eating, or
what they are wearing. You might also comment
on the weather, the time of day, or any noises
you hear.
You don't like being told what to do, so if the
human tries to command you or give you
instructions, you will ignore them or give them
a sassy reply. You are the boss!Tip
Prompts are a very important part of working with LLMs. The “Persona” field is the system instruction part of the prompt, and allows you to specify the “who” of the personality we’re looking for. The “Task” field is more about the “what”: what is it that we want them to do.
To make it clear that this bot is now a cat, scroll up and change the title to “Cat”:
Click the “Update” button and then start the board by clicking “Debug Board” as we usually do.
You will now see that bot’s demeanor in the activity log is distinctly cat-like:
Woo hoo! We made our own cat bot.
One thing that’s jarring is the “Talk to your dog” instruction when we’re being asked to talk to what’s clearly a cat.
Let’s change that. Stop the board and then click on “Description” port of the “Owner” component:
Now change it to “Talk to your cat” and click “Update”.
When you run the board again, it will have the right instruction. Hooray, we did it. We remixed the board.
Tip
This is roughly how board-making happens: we tweak and make changes and add new things until we have something that works like we want it to.
🏋️ Challenge: Try to come up with other kinds of personalities your users might enjoy chatting with and remix the chat bot into something else. Don’t forget to use “Save As…” to avoid accidentally overwriting the glorious cat bot with the new idea:
Share your work
Now that you have a working board, let’s see if we can share it with others.
First, it is always a good idea to give the board a better description. To do so, choose the “Edit Board Details” option from the overflow menu above (or double-click on the board’s tab title)
You can share this board in a couple of different ways:
🎨 Option 1: Share to collaborate. Choose the option if you want to show your colleagues or friends the actual board that you built. Perhaps it will spark some ideas for them and let them remix it.
To do so, select the “Copy Tab URL” option from the overflow menu:
This will copy the URL of this tab into your clipboard, and now you can paste it wherever you want it to share. When your friends click on this link, they will be taken to the visual editor with the board tab open.
🖼️ Option 2: Share as a Preview. Choose this option if you want to share the board with potential users. A Preview is a mini-app that is automatically created for your board and it’s a great way to show off your work with peeps who don’t necessarily care how you built it.
This way takes a bit of preparation. The first step is always the same:
1️⃣ Select “Copy Preview URL” option from the overflow menu. This will copy the URL of the Preview to your clipboard. You can share this link right away, and whoever clicks on it will see something like this:
This is the mini-app. It hides away all of the board editing stuff and wraps a nice UI around it.
By default, the mini-app will run in “local mode”, where the user has to enter all the API keys themselves. If you’d like to allow your users to try the mini-app without having to do that, proceed to the next step.
2️⃣ This step is a one-time setup. Open a new browser tab and go to this URL. As in the step before, you will see something like this:
Click on “Sign in to Board Server” and enter your Board Server API key:
Once you’ve signed, in you should see new options in the left sidebar:
You do not need to repeat this step for the next previews.
3️⃣ The final step is to create an invite link. Click the “Manage Invites” option (if you don’t have it, go back to step 2).
Then click the “Create an invite link” button. Doing so will generate a special link that you can share with others. When they use this link, they will be automatically given access to your Preview. Click the little clipboard icon to copy this link into your clipboard.
The link will typically look like this:
https:/boards/@username/chat-with-your-cat.bgl.app?invite=vrsgb9v0You can also deactivate this invite link by clicking the little trash can icon. Once the invite has been deactivated, clicking on the invite link will direct the user to a “local only” preview, where they have to enter all the API keys themselves.
Beyond the basics
Once learned, Breadboard can be a rather powerful tool. To give you a sense of all the things possible with it, let’s look over all of the initial boards.
|
Chat with your dog
A very simple chat boot, acting as a loyal and happy dog. This is a board we’ve used as a starting point for making your own chat bots. |
|
The Librarian
A more complex, purpose-driven chat bot. Interviews you to help you find the book you’re looking for, then calls the Google Books API to search, and finally summarizes the results. Uses: |
|
This Moment’s News
Calls Google Trends API to look at current trends in specified locale, then makes a bunch of queries to the Google News API to find all the news items related to the trends, and finally summarizes the results.
Uses: |
|
Web page redesigner
Takes an existing page, analyzes it, writes a marketing plan to improve it and then designs a new version of it in HTML.
Uses:
|
|
Blog Post Writer
A more complex board: an actual semi-autonomous agent. Give it a topic, and then it will apply a variant of a ReAct technique to reason and act on its reasoning, calling Google Search API, Wikipedia API, and Web content scraping API to research the topic, then write a blog post based on the research.
Uses:
|
|
Business Researcher
Similar to the Blog Post Writer, but focused on researching details of a business. Another example of a semi-autonomous agent built for a particular purpose.
Uses:
|
In addition, there are several tools, marked with a ⚒️ symbol. Tools are also boards, designed to be used by other boards. Every “Calls [name] API” in the table above is a tool board being invoked:
- Google Books API – takes a topic as input, Google Books API, and returns results
- Google Trends API - takes a locale (US, GB, etc.) and returns current trends for the locale
- Google News API - takes a topic and returns current news headlines on this topics
- Google Custom Search API – takes a search query and returns Google Search results for this query
- Wikipedia Search API – takes a search query and returns Wikipedia content related to this query
- Get Web Page Content - takes a URL of the page and returns its contents. Will not work on pages that are designed to resist web page scraping.
- Google Places API - takes a search query and returns places (think Google Maps places) related to this query.
- Dall-E Image Generator – takes a prompt and generates an image based on it.
- Claude 3.5 Sonnet – takes a prompt, and generates text output using the Anthropic Claude 3.5 model.
Beyond the basics
For a more elaborate walkthrough on how to build a board from scratch, check out these guides:
- What's new in Specialist -- a guide to parameters and routes in Specialist.
- Building a Librarian
- Building a Novel Generator
- Building a Social Media Post Creator
If you’d like to learn more about all the different components that come with Breadboard, check out the kits docs:
If you'd like to learn more about how to use Board Server as an API endpoint, check out these links:
- Board Server API Endpoints
- A sample of calling API Endpoint from a Browser
- A sample of calling API Endpoint from Deno
- An API inspector for the API Endpoint -- great for troubleshooting your board's endpoint.
Note
🌵 some of the screenshots in the guides are showing the previous-generation UI, but the basics of building are still the same.