Embed AI-produced text-to-diagram "slates" on your own site with a simple img tag and a tiny script. The images load progressively using a websocket connection.

Build a slate directly on your own page with an <img> tag. Provide whatever text prompt you want and voilà, you have a Slate as an image in your site!

Here's an example of an AI-generated slate. The whole thing is produced completely in your app. I've already included the 1kb javascript snippet onto the blog right before the closing </body> tag:

<script src="https://api.slatebox.com/js/v1.0/sb.min.js"></script>

And here is the <img> I'd like to create...notice the data-sb-prompt – that is what tells Slatebox what you want this img to be about. The data-sb-prompt is scratch, which means "build it from scratch without a template." Other options are explained below.

<img
  class="sb-image"
  data-sb-clientId="{clientIdGoesHere}"
  data-sb-prompt="The 3 most important steps to harden a Kubernetes cluster"
  data-sb-levelOfDetail="1"
  data-sb-wordsPerNode="25"
  data-sb-type="scratch"
  data-sb-themeId="ocean"
/>

...and LOOK what you have created!

Perhaps you'd like to create an slate-to-image using just a URL? Here's a slate that describes Apple's new Vision Pro headset:

<img
  class="sb-image"
  data-sb-clientId="{clientIdGoesHere}"
  data-sb-levelOfDetail="1"
  data-sb-wordsPerNode="25"
  data-sb-type="url"
  data-sb-url="https://www.apple.com/apple-vision-pro"
  data-sb-themeId="simple"
/>

How does this work?

Behind the scenes, the script established a bidirectional websocket connection with the Slatebox infrastructure, authenticates your user based on the data-sb-clientId you pass in, confirming that you've granted access to whatever IP is making the call.

Once the connection is secure, it forwards the appropriate details into the Slatebox engine using puppeteer, a headless web browser. The slate is produced as an editable visualization within your own account, with the PNG representation incrementally sent back to the client. Once the slate completes, the final image is sent back to the client. A refresh of that page at that point will always yield the last image created.

Options that you can include as data-sb-* parameters are:

• data-sb-prompt - explain what you want to visualize in natural langauge.
• data-sb-type - either url, scratch, or template
• data-sb-templateId - only needed if you want your img tag to be based on slatebox templates. The ids for any template are in the URL which you can find by clicking the info button on any template on that page (e.g., reverse-brainstorming, swot-analysis, etc).
• data-sb-url - the full URL of the URL you want to turn into a diagram (this is how the Apple Vision diagram above was created)
• data-sb-levelOfDetail - this can be 1-10, with 1 being the least detailed, 10 being the most. Levels 3-10 are reserved for slatebox PRO users.
• data-sb-wordsPerNode - how many words do you want the sub ideas to have on the slate?
• data-sb-clientId - when you sign up at Slatebox.com, you can use the AI settings modal to get a snippet of pasteable <img> that includes your clientId. See the below screenshot.
• data-sb-themeId - you can use Slatebox themes - a full list is available when you log into your slatebox account and click the themes page. Examples: bright, spring, simple, chalk.

All slates created this way are completely editable within your own Slatebox account and can be customized at will. Coming soon: these customizations will automatically be reflected in the original <img> tag that produced the slate.

Ready to build your own Slates?

Head over to Slatebox and login or start for FREE as a guest. You have access to the embeddable <img> scripts by simply clicking on the AI button once you login:

Then click the "Embed as Image" tag and copy the code into your own site:

That's it! Happy Slateboxxing, y'all.