AI Assistant

Bootstrap Studio features an advanced AI Assistant which can help you with designing your site, writing code and generating images. You communicate with it through a familiar chat interface. Just tell it what you wish to do, and it will plan and execute your request.

1. Setup

Bootstrap Studio does not come with its own AI model built in. Instead it communicates with a model provider via API calls. The following providers are supported:

• OpenAI (opens new window)
• Google (opens new window)
• Anthropic (opens new window)
• OpenRouter (opens new window)
• Local models running with Ollama (opens new window) or llama.cpp (opens new window)

You configure these providers in Bootstrap Studio and paste your API keys. You can configure multiple providers at the same time, and switch between them from the assistant panel.

Notes

• API keys are stored securely in your Bootstrap Studio copy. They are fully local and are never sent to our servers.
• The app executes API calls directly against the model provider via HTTPS, they are not proxied through our backend.

With a Free API Key

The AI platforms mentioned above charge per token, but there are options for obtaining free keys which are sufficient to power Bootstrap Studio's Assistant.

As of this writing, you can obtain free AI API keys in the following ways:

• Google AI Studio (opens new window) gives you a free API key for many of the Gemini models. Just visit this page (opens new window) and generate your free key. It gives you access to the models mentioned in the Free Tier on their pricing page (opens new window).
• Free OpenRouter models with tool support (opens new window) are another option. Just copy a model id and follow the Custom Model setup instructions below.

The disadvantage of these free options is that the providers will retain your data and use it for training. This may or may not be a problem, depending on your use case. Also keep in mind that these providers may change their policy at any time and discontinue their free tiers.

After getting your API key, open the Manage Models dialog. This can be done from Cloud > Manage AI Models in the Bootstrap Studio application menu, or by clicking the gear icon in the Assistant panel.

In the Providers tab, you can enter your free Google key. For a free OpenRouter key, you will need to switch to the Custom tab and configure it there (scroll further down this article to see instructions for custom models).

Now you're ready to use the assistant.

With a Paid API Key

If the free key above is not an option for you, or you if you need higher limits, you will need to get a paid key. This involves signing up for an account at OpenAI, Google, Anthropic or OpenRouter, and setting up billing.

After this, open the Manage Models dialog. This can be done from Cloud > Manage AI Models in the Bootstrap Studio application menu, or by clicking the gear icon in the Assistant panel.

In the Providers tab, you can enter your API key for OpenAI, Google or Anthropic. Entering a key will display the provider's models in the model selection list in the Assistant panel:

You can have more than one provider configured at the same time, and switch between them at any point when working with the Assistant.

Notes

• You don't need to have a monthly subscription to ChatGPT, Anthropic or Gemini. 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 enter a Google or OpenAI API key, you will have access to both their text and image models, and the assistant will be able to generate images if you ask it. Note that Anthropic doesn't offer image generation as of this writing.
• If a new model is released, but we still don't have it listed, you can configure it as a Custom Model instead.

Configure a Custom AI Model

The second tab of the Manage AI Models dialog lets you enter custom AI configuration, model ids and API endpoints.

To configure a new model, press the Add Model button.

Here you need to enter a model id, Provider (this determines the API format/convention), base URL for the API and API key. You can obtain these from the docs of the relevant provider.

Notes

• Bootstrap Studio already ships with a list of models offered by OpenAI, Anthropic and Google. You don't need to configure their models in this tab; it is sufficient to add your API key in the Providers tab, and Bootstrap Studio will display all the models that it knows about in the model selection list in the Assistant.
• However if OpenAI/Google/Anthropic launch a new model and we don't have it in our list, you can configure it as a custom model to get access without waiting for us to release an update.
• When connecting OpenRouter, pick models which support tool calls (opens new window). The Bootstrap Studio assistant requires them to work.
• Write in our forum (opens new window) if you run into issues while configuring your custom model.

Here are some of the things you can do on this tab:

• Connect OpenRouter and use one of the hundreds of models available there, like the Grok series, Qwen, DeepSeek, Kimi, GLM and many others. Just copy the model id from its OpenRouter page and add your OpenRouter API key.
• Configure custom providers which follow the OpenAI responses API.
• Connect a locally running AI model or proxy service. See the next section for more info.

After adding your model, select it in the model selection list in the Assistant panel to chat with it.

Configure a Local AI Model

If you have a well-specced computer, running a local model is another option. You can follow the quick start guides of Ollama (opens new window), Llama.cpp (opens new window) or compatible projects. The requirement is that they need to start a local HTTP server on your machine with an Ollama compatible API.

If you have a default setup with a locally running ollama, you basically only need to select the Ollama entry in the dropdown and provide the model id. Leave the other fields blank, Bootstrap Studio will use the default settings.

Note

The model you are running must support tool calls since the Bootstrap Studio Assistant relies on them to work. You can find local models that support tool calls here (opens new window).

2. Using the Assistant

If you have gone through the setup, using the assistant in practice is straightforward. Just chat with it and tell it what you want it to do. It can read files in your design, plan changes and propose edits. You can accept or decline those edits, and have full undo/redo history.

The assistant can see which components you have selected, and you can refer to them in your prompt. Here are some examples for things you can ask your assistant to do:

• Turn this list into an accordion
• Build a 3 column section with responsive layout
• Create a new blog post similar to this page
• Make these columns mobile friendly.
• Give SEO suggestions for this page.
• Add a new section to this page which lists the benefits of our product.

Toggling Auto Apply

By default the assistant applies all proposed code changes automatically. You can "Undo" to revert them. But if you wish to have tighter control on what the assistant does, you can turn off the Auto Apply option in the gear menu.

This will keep code changes as proposals which you can apply by pressing a button.

Generating Images

If you enter a Google or OpenAI key, you will have access to their image models, and you can ask the assistant to generate an image. You switch the active image model in the model selection list:

And ask it to generate an image:

If you like the result, you can add the generated image to your design by clicking the Add to Design button. This will open the image optimization tool so you can achieve a smaller file size.

Note

You can freely mix and match text and image models. For example you can pick an image model from Google and a text model from OpenAI. The text model simply calls the image model as a tool when you ask for image generation in the chat.

Context Window

AI models have limits on how much text/tokens they can keep in memory. If you exceed this, the model will start generating gibberish, or the model provider might throw an error. Also, long conversations with a lot of messages in context will burn through more tokens, so it's a good practice to clear the conversation often.

The Bootstrap Studio Assistant tracks the tokens used in the conversation, and if you reach 80% of the context length, it will display a warning that invites you to clear the chat. This is purely informational, the app won't block you from continuing the conversation.

To change when the warning is displayed, you can click the gear icon and choose a new context warning value:

To see how much of your context you've used in the current conversation, you can open the Usage menu:

The first section shows that we've used 3% of our context window so far. Clearing the chat will reset it to zero. The second section shows that we've used 12.5k tokens with the Claude Sonnet model since Bootstrap Studio started.

Note

Bootstrap Studio sets the warning to 128K tokens by default, which is a safe baseline since all modern models support at least this much. Some models like Gemini support up to 1M tokens. Increase the limit as you see fit.

Estimating Costs

The app shows you your current token usage in the Usage menu.

However the app has no way to estimate your actual costs, since pricing varies between providers and changes frequently. If you are using a paid API key, check your provider's website periodically to monitor your usage and billing.

Most providers also let you set spending limits on their dashboards, which is a good way to avoid unexpected charges.

3. Potential Errors

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

• Image generation errors If you use a free Gemini key, image generation may fail since Google restricts image generation only to billed users. This means you will need to add a payment method to your Google Cloud project. A free alternative is to use the Gemini or Chatgpt websites and generate your images there, and import the file in Bootstrap Studio.
• Exceeded token limit. The assistant may decide to read a large number of pages and exceed its token window. You will need to clear the conversation and start over. Try instructing the assistant to work only on a specific page instead of modifying your entire website.
• 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.