Bootstrap Studio

# AI Assistant

Bootstrap Studio features an advanced AI Assistant, powered by ChatGPT. It allows you to edit your design by writing free-form text instructions. With it you can generate and translate content, make edits and build entire layouts from scratch.

You can access the Assistant by pressing the Assistant button in the main toolbar, or from the File menu.

AI Assistant Dialog

# Setup

The Assistant uses your OpenAI API key and makes requests directly from your Bootstrap Studio copy to the OpenAI API. In order to acquire an API key, you need to create an OpenAI account (opens new window). Then, navigate to the API keys page (opens new window) and click the Create new secret key button. Paste the generated key in the OpenAI API Key field in the AI Assistant dialog and you're all set.

Notes

  • You don't need to have a monthly subscription to ChatGPT. You can generate API keys irrespective of your plan.
  • API keys are billed based on usage, with each token sent and received through the API contributing to the monthly bill.
  • If you are on the ChatGPT free plan, you need to add a payment method in OpenAI in order to use the API.

# Choosing a model

Bootstrap Studio supports the following Open AI models

  • GPT 3.5 Turbo - fast and good enough for most use cases. Cheap per token.
  • GPT 4 - slow, smarter and more expensive per token.

You can easily switch between models from the Assistant dialog and you can try which works better for your particular use case.

# Usage

If you have gone through the setup, using the assistant in practice is straightforward. You just need to select an element on your page and write your instructions (also referred to as a "prompt") which describe how you wish to have the element modified.

Some prompt examples:

  • Generate three columns with cards
  • Translate this text into French
  • Turn these list items into an accordion
  • Rewrite the content to be about pet food
  • Wrap each sentence of this text in a separate card

# Potential Errors

If something goes wrong with your request to OpenAI's API, the Assistant will report an error. Here are some which you are most likely to encounter.

  • Exceeded token limit. Bootstrap Studio sends the HTML of the selected component alongside your prompt. If no component is selected, the app assumes you wish to modify the entire page and sends the content of the <body> tag. This may exceed OpenAI's token limit and you will see an error informing you of this case. Select a smaller element.
  • Payment errors. If you see payment errors, this means you haven't finished your Open AI account setup, or there are problems with your payment method. Refer to their website and help docs (opens new window) on how to add a debit/credit card. Note that you don't need a ChatGPT premium subscription, the free plan works as well.
  • General API errors. The OpenAI API can be down or facing difficulties. Retry your request after a few seconds.
  • Assistant refuses to help. At times ChatGPT can be temperamental or prude. Try rewording your prompt or clearing problematic text from the selected element (since it is sent alongside the prompt).

← Working With Your Team →