UniqAI/bolt.new-any-llm
1
0
Fork 0
mirror of https://github.com/coleam00/bolt.new-any-llm synced 2024-12-27 22:33:03 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity
gh-pages
bolt.new-any-llm/index.html
github-actions[bot] b9773c0198 Deployed 7afd654 with MkDocs version: 1.6.1
2024-12-20 19:37:37 +00:00

958 lines
41 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="next" href="CONTRIBUTING/">
<link rel="icon" href="assets/images/favicon.png">
<meta name="generator" content="mkdocs-1.6.1, mkdocs-material-9.5.49">
<title>bolt.diy Docs</title>
<link rel="stylesheet" href="assets/stylesheets/main.6f8fc17f.min.css">
<link rel="stylesheet" href="assets/stylesheets/palette.06af60db.min.css">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
<style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
<script>__md_scope=new URL(".",location),__md_hash=e=>[...e].reduce(((e,_)=>(e<<5)-e+_.charCodeAt(0)),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
</head>
<body dir="ltr" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo">
<input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
<input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
<label class="md-overlay" for="__drawer"></label>
<div data-md-component="skip">
<a href="#welcome-to-bolt-diy" class="md-skip">
Skip to content
</a>
</div>
<div data-md-component="announce">
</div>
<header class="md-header" data-md-component="header">
<nav class="md-header__inner md-grid" aria-label="Header">
<a href="." title="bolt.diy Docs" class="md-header__button md-logo" aria-label="bolt.diy Docs" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>
</a>
<label class="md-header__button md-icon" for="__drawer">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>
</label>
<div class="md-header__title" data-md-component="header-title">
<div class="md-header__ellipsis">
<div class="md-header__topic">
<span class="md-ellipsis">
bolt.diy Docs
</span>
</div>
<div class="md-header__topic" data-md-component="header-topic">
<span class="md-ellipsis">
Welcome to bolt diy
</span>
</div>
</div>
</div>
<form class="md-header__option" data-md-component="palette">
<input class="md-option" data-md-color-media="" data-md-color-scheme="default" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="Switch to dark mode" type="radio" name="__palette" id="__palette_0">
<label class="md-header__button md-icon" title="Switch to dark mode" for="__palette_1" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 6H7c-3.31 0-6 2.69-6 6s2.69 6 6 6h10c3.31 0 6-2.69 6-6s-2.69-6-6-6m0 10H7c-2.21 0-4-1.79-4-4s1.79-4 4-4h10c2.21 0 4 1.79 4 4s-1.79 4-4 4M7 9c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"/></svg>
</label>
<input class="md-option" data-md-color-media="" data-md-color-scheme="slate" data-md-color-primary="indigo" data-md-color-accent="indigo" aria-label="Switch to light mode" type="radio" name="__palette" id="__palette_1">
<label class="md-header__button md-icon" title="Switch to light mode" for="__palette_0" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17 7H7a5 5 0 0 0-5 5 5 5 0 0 0 5 5h10a5 5 0 0 0 5-5 5 5 0 0 0-5-5m0 8a3 3 0 0 1-3-3 3 3 0 0 1 3-3 3 3 0 0 1 3 3 3 3 0 0 1-3 3"/></svg>
</label>
</form>
<script>var palette=__md_get("__palette");if(palette&&palette.color){if("(prefers-color-scheme)"===palette.color.media){var media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']");palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent")}for(var[key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
<label class="md-header__button md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
</label>
<div class="md-search" data-md-component="search" role="dialog">
<label class="md-search__overlay" for="__search"></label>
<div class="md-search__inner" role="search">
<form class="md-search__form" name="search">
<input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
<label class="md-search__icon md-icon" for="__search">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.52 6.52 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11z"/></svg>
</label>
<nav class="md-search__options" aria-label="Search">
<button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
</button>
</nav>
<div class="md-search__suggest" data-md-component="search-suggest"></div>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
<div class="md-search-result" data-md-component="search-result">
<div class="md-search-result__meta">
Initializing search
</div>
<ol class="md-search-result__list" role="presentation"></ol>
</div>
</div>
</div>
</div>
</div>
<div class="md-header__source">
<a href="https://github.com/stackblitz-labs/bolt.diy" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
bolt.diy
</div>
</a>
</div>
</nav>
</header>
<div class="md-container" data-md-component="container">
<nav class="md-tabs" aria-label="Tabs" data-md-component="tabs">
<div class="md-grid">
<ul class="md-tabs__list">
<li class="md-tabs__item md-tabs__item--active">
<a href="." class="md-tabs__link">
Welcome to bolt diy
</a>
</li>
<li class="md-tabs__item">
<a href="CONTRIBUTING/" class="md-tabs__link">
Contribution Guidelines
</a>
</li>
<li class="md-tabs__item">
<a href="FAQ/" class="md-tabs__link">
Frequently Asked Questions (FAQ)
</a>
</li>
</ul>
</div>
</nav>
<main class="md-main" data-md-component="main">
<div class="md-main__inner md-grid">
<div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
<div class="md-sidebar__scrollwrap">
<div class="md-sidebar__inner">
<nav class="md-nav md-nav--primary md-nav--lifted md-nav--integrated" aria-label="Navigation" data-md-level="0">
<label class="md-nav__title" for="__drawer">
<a href="." title="bolt.diy Docs" class="md-nav__button md-logo" aria-label="bolt.diy Docs" data-md-component="logo">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 8a3 3 0 0 0 3-3 3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3m0 3.54C9.64 9.35 6.5 8 3 8v11c3.5 0 6.64 1.35 9 3.54 2.36-2.19 5.5-3.54 9-3.54V8c-3.5 0-6.64 1.35-9 3.54"/></svg>
</a>
bolt.diy Docs
</label>
<div class="md-nav__source">
<a href="https://github.com/stackblitz-labs/bolt.diy" title="Go to repository" class="md-source" data-md-component="source">
<div class="md-source__icon md-icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</div>
<div class="md-source__repository">
bolt.diy
</div>
</a>
</div>
<ul class="md-nav__list" data-md-scrollfix>
<li class="md-nav__item md-nav__item--active">
<input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
<label class="md-nav__link md-nav__link--active" for="__toc">
<span class="md-ellipsis">
Welcome to bolt diy
</span>
<span class="md-nav__icon md-icon"></span>
</label>
<a href="." class="md-nav__link md-nav__link--active">
<span class="md-ellipsis">
Welcome to bolt diy
</span>
</a>
<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
<label class="md-nav__title" for="__toc">
<span class="md-nav__icon md-icon"></span>
Table of contents
</label>
<ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
<li class="md-nav__item">
<a href="#table-of-contents" class="md-nav__link">
<span class="md-ellipsis">
Table of Contents
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#join-the-community" class="md-nav__link">
<span class="md-ellipsis">
Join the community!
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#features" class="md-nav__link">
<span class="md-ellipsis">
Features
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#setup" class="md-nav__link">
<span class="md-ellipsis">
Setup
</span>
</a>
<nav class="md-nav" aria-label="Setup">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#prerequisites" class="md-nav__link">
<span class="md-ellipsis">
Prerequisites
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#clone-the-repository" class="md-nav__link">
<span class="md-ellipsis">
Clone the Repository
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#entering-api-keys" class="md-nav__link">
<span class="md-ellipsis">
Entering API Keys
</span>
</a>
<nav class="md-nav" aria-label="Entering API Keys">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#1-set-api-keys-in-the-envlocal-file" class="md-nav__link">
<span class="md-ellipsis">
1. Set API Keys in the .env.local File
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#2-configure-api-keys-directly-in-the-application" class="md-nav__link">
<span class="md-ellipsis">
2. Configure API Keys Directly in the Application
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#run-the-application" class="md-nav__link">
<span class="md-ellipsis">
Run the Application
</span>
</a>
<nav class="md-nav" aria-label="Run the Application">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#option-1-without-docker" class="md-nav__link">
<span class="md-ellipsis">
Option 1: Without Docker
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#option-2-with-docker" class="md-nav__link">
<span class="md-ellipsis">
Option 2: With Docker
</span>
</a>
<nav class="md-nav" aria-label="Option 2: With Docker">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#prerequisites_1" class="md-nav__link">
<span class="md-ellipsis">
Prerequisites
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#steps" class="md-nav__link">
<span class="md-ellipsis">
Steps
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#update-your-local-version-to-the-latest" class="md-nav__link">
<span class="md-ellipsis">
Update Your Local Version to the Latest
</span>
</a>
<nav class="md-nav" aria-label="Update Your Local Version to the Latest">
<ul class="md-nav__list">
<li class="md-nav__item">
<a href="#1-navigate-to-your-project-folder" class="md-nav__link">
<span class="md-ellipsis">
1. Navigate to your project folder
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#2-fetch-the-latest-changes" class="md-nav__link">
<span class="md-ellipsis">
2. Fetch the Latest Changes
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#3-update-dependencies" class="md-nav__link">
<span class="md-ellipsis">
3. Update Dependencies
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#4-rebuild-and-start-the-application" class="md-nav__link">
<span class="md-ellipsis">
4. Rebuild and Start the Application
</span>
</a>
</li>
</ul>
</nav>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="#adding-new-llms" class="md-nav__link">
<span class="md-ellipsis">
Adding New LLMs:
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#available-scripts" class="md-nav__link">
<span class="md-ellipsis">
Available Scripts
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#development" class="md-nav__link">
<span class="md-ellipsis">
Development
</span>
</a>
</li>
<li class="md-nav__item">
<a href="#tips-and-tricks" class="md-nav__link">
<span class="md-ellipsis">
Tips and Tricks
</span>
</a>
</li>
</ul>
</nav>
</li>
<li class="md-nav__item">
<a href="CONTRIBUTING/" class="md-nav__link">
<span class="md-ellipsis">
Contribution Guidelines
</span>
</a>
</li>
<li class="md-nav__item">
<a href="FAQ/" class="md-nav__link">
<span class="md-ellipsis">
Frequently Asked Questions (FAQ)
</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="md-content" data-md-component="content">
<article class="md-content__inner md-typeset">
<h1 id="welcome-to-bolt-diy">Welcome to bolt diy</h1>
<p>bolt.diy allows you to choose the LLM that you use for each prompt! Currently, you can use OpenAI, Anthropic, Ollama, OpenRouter, Gemini, LMStudio, Mistral, xAI, HuggingFace, DeepSeek, or Groq models - and it is easily extended to use any other model supported by the Vercel AI SDK! See the instructions below for running this locally and extending it to include more models.</p>
<h2 id="table-of-contents">Table of Contents</h2>
<ul>
<li><a href="#join-the-community">Join the community!</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#setup">Setup</a></li>
<li><a href="#prerequisites">Prerequisites</a></li>
<li><a href="#clone-the-repository">Clone the Repository</a></li>
<li><a href="#entering-api-keys">Entering API Keys</a><ul>
<li><a href="#1-set-api-keys-in-the-envlocal-file">1. Set API Keys in the <code>.env.local</code> File</a></li>
<li><a href="#2-configure-api-keys-directly-in-the-application">2. Configure API Keys Directly in the Application</a></li>
</ul>
</li>
<li><a href="#run-the-application">Run the Application</a></li>
<li><a href="#option-1-without-docker">Option 1: Without Docker</a></li>
<li><a href="#option-2-with-docker">Option 2: With Docker</a></li>
<li><a href="#update-your-local-version-to-the-latest">Update Your Local Version to the Latest</a></li>
<li><a href="#adding-new-llms">Adding New LLMs</a></li>
<li><a href="#available-scripts">Available Scripts</a></li>
<li><a href="#development">Development</a></li>
<li><a href="#tips-and-tricks">Tips and Tricks</a></li>
</ul>
<hr />
<h2 id="join-the-community">Join the community!</h2>
<p><a href="https://thinktank.ottomator.ai">Join the community!</a></p>
<hr />
<h2 id="features">Features</h2>
<ul>
<li><strong>AI-powered full-stack web development</strong> directly in your browser.</li>
<li><strong>Support for multiple LLMs</strong> with an extensible architecture to integrate additional models.</li>
<li><strong>Attach images to prompts</strong> for better contextual understanding.</li>
<li><strong>Integrated terminal</strong> to view output of LLM-run commands.</li>
<li><strong>Revert code to earlier versions</strong> for easier debugging and quicker changes.</li>
<li><strong>Download projects as ZIP</strong> for easy portability.</li>
<li><strong>Integration-ready Docker support</strong> for a hassle-free setup.</li>
</ul>
<hr />
<h2 id="setup">Setup</h2>
<p>If you're new to installing software from GitHub, don't worry! If you encounter any issues, feel free to submit an "issue" using the provided links or improve this documentation by forking the repository, editing the instructions, and submitting a pull request. The following instruction will help you get the stable branch up and running on your local machine in no time. </p>
<h3 id="prerequisites">Prerequisites</h3>
<ol>
<li><strong>Install Git</strong>: <a href="https://git-scm.com/downloads">Download Git</a> </li>
<li>
<p><strong>Install Node.js</strong>: <a href="https://nodejs.org/en/download/">Download Node.js</a> </p>
</li>
<li>
<p>After installation, the Node.js path is usually added to your system automatically. To verify: </p>
<ul>
<li><strong>Windows</strong>: Search for "Edit the system environment variables," click "Environment Variables," and check if <code>Node.js</code> is in the <code>Path</code> variable. </li>
<li><strong>Mac/Linux</strong>: Open a terminal and run:<br />
<div class="highlight"><pre><span></span><code><a id="__codelineno-0-1" name="__codelineno-0-1" href="#__codelineno-0-1"></a><span class="nb">echo</span><span class="w"> </span><span class="nv">$PATH</span><span class="w"> </span>
</code></pre></div>
Look for <code>/usr/local/bin</code> in the output. </li>
</ul>
</li>
</ol>
<h3 id="clone-the-repository">Clone the Repository</h3>
<p>Alternatively, you can download the latest version of the project directly from the <a href="https://github.com/stackblitz-labs/bolt.diy/releases/latest">Releases Page</a>. Simply download the .zip file, extract it, and proceed with the setup instructions below. If you are comfertiable using git then run the command below.</p>
<p>Clone the repository using Git: </p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-1-1" name="__codelineno-1-1" href="#__codelineno-1-1"></a>git<span class="w"> </span>clone<span class="w"> </span>-b<span class="w"> </span>stable<span class="w"> </span>https://github.com/stackblitz-labs/bolt.diy<span class="w"> </span>
</code></pre></div>
<hr />
<h3 id="entering-api-keys">Entering API Keys</h3>
<p>There are two ways to configure your API keys in bolt.diy:</p>
<h4 id="1-set-api-keys-in-the-envlocal-file">1. Set API Keys in the <code>.env.local</code> File</h4>
<p>When setting up the application, you will need to add your API keys for the LLMs you wish to use. You can do this by renaming the <code>.env.example</code> file to <code>.env.local</code> and adding your API keys there. </p>
<ul>
<li>On <strong>Mac</strong>, you can find the file at <code>[your name]/bolt.diy/.env.example</code>.</li>
<li>On <strong>Windows/Linux</strong>, the path will be similar.</li>
</ul>
<p>If you can't see the file, it's likely because hidden files are not being shown. On <strong>Mac</strong>, open a Terminal window and enter the following command to show hidden files:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-2-1" name="__codelineno-2-1" href="#__codelineno-2-1"></a>defaults<span class="w"> </span>write<span class="w"> </span>com.apple.finder<span class="w"> </span>AppleShowAllFiles<span class="w"> </span>YES
</code></pre></div>
<p>Make sure to add your API keys for each provider you want to use, for example:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-3-1" name="__codelineno-3-1" href="#__codelineno-3-1"></a>GROQ_API_KEY=XXX
<a id="__codelineno-3-2" name="__codelineno-3-2" href="#__codelineno-3-2"></a>OPENAI_API_KEY=XXX
<a id="__codelineno-3-3" name="__codelineno-3-3" href="#__codelineno-3-3"></a>ANTHROPIC_API_KEY=XXX
</code></pre></div>
<p>Once you've set your keys, you can proceed with running the app. You will set these keys up during the initial setup, and you can revisit and update them later after the app is running.</p>
<p><strong>Note</strong>: Never commit your <code>.env.local</code> file to version control. It’s already included in the <code>.gitignore</code>.</p>
<h4 id="2-configure-api-keys-directly-in-the-application">2. Configure API Keys Directly in the Application</h4>
<p>Alternatively, you can configure your API keys directly in the application once it's running. To do this:</p>
<ol>
<li>Launch the application and navigate to the provider selection dropdown.</li>
<li>Select the provider you wish to configure.</li>
<li>Click the pencil icon next to the selected provider.</li>
<li>Enter your API key in the provided field.</li>
</ol>
<p>This method allows you to easily add or update your keys without needing to modify files directly.</p>
<p>Once you've configured your keys, the application will be ready to use the selected LLMs.</p>
<hr />
<h2 id="run-the-application">Run the Application</h2>
<h3 id="option-1-without-docker">Option 1: Without Docker</h3>
<ol>
<li>
<p><strong>Install Dependencies</strong>:<br />
<div class="highlight"><pre><span></span><code><a id="__codelineno-4-1" name="__codelineno-4-1" href="#__codelineno-4-1"></a>pnpm<span class="w"> </span>install<span class="w"> </span>
</code></pre></div>
If <code>pnpm</code> is not installed, install it using:<br />
<div class="highlight"><pre><span></span><code><a id="__codelineno-5-1" name="__codelineno-5-1" href="#__codelineno-5-1"></a>sudo<span class="w"> </span>npm<span class="w"> </span>install<span class="w"> </span>-g<span class="w"> </span>pnpm<span class="w"> </span>
</code></pre></div></p>
</li>
<li>
<p><strong>Start the Application</strong>:<br />
<div class="highlight"><pre><span></span><code><a id="__codelineno-6-1" name="__codelineno-6-1" href="#__codelineno-6-1"></a>pnpm<span class="w"> </span>run<span class="w"> </span>dev<span class="w"> </span>
</code></pre></div>
This will start the Remix Vite development server. You will need Google Chrome Canary to run this locally if you use Chrome! It's an easy install and a good browser for web development anyway. </p>
</li>
</ol>
<h3 id="option-2-with-docker">Option 2: With Docker</h3>
<h4 id="prerequisites_1">Prerequisites</h4>
<ul>
<li>Ensure Git, Node.js, and Docker are installed: <a href="https://www.docker.com/">Download Docker</a> </li>
</ul>
<h4 id="steps">Steps</h4>
<ol>
<li><strong>Build the Docker Image</strong>: </li>
</ol>
<p>Use the provided NPM scripts:<br />
<div class="highlight"><pre><span></span><code><a id="__codelineno-7-1" name="__codelineno-7-1" href="#__codelineno-7-1"></a>npm<span class="w"> </span>run<span class="w"> </span>dockerbuild<span class="w"> </span>
</code></pre></div></p>
<p>Alternatively, use Docker commands directly:<br />
<div class="highlight"><pre><span></span><code><a id="__codelineno-8-1" name="__codelineno-8-1" href="#__codelineno-8-1"></a>docker<span class="w"> </span>build<span class="w"> </span>.<span class="w"> </span>--target<span class="w"> </span>bolt-ai-development
</code></pre></div></p>
<ol>
<li>
<p><strong>Run the Container</strong>:<br />
Use Docker Compose profiles to manage environments:<br />
<div class="highlight"><pre><span></span><code><a id="__codelineno-9-1" name="__codelineno-9-1" href="#__codelineno-9-1"></a>docker-compose<span class="w"> </span>--profile<span class="w"> </span>development<span class="w"> </span>up<span class="w"> </span>
</code></pre></div></p>
</li>
<li>
<p>With the development profile, changes to your code will automatically reflect in the running container (hot reloading). </p>
</li>
</ol>
<hr />
<h3 id="update-your-local-version-to-the-latest">Update Your Local Version to the Latest</h3>
<p>To keep your local version of bolt.diy up to date with the latest changes, follow these steps for your operating system:</p>
<h4 id="1-navigate-to-your-project-folder">1. <strong>Navigate to your project folder</strong></h4>
<p>Navigate to the directory where you cloned the repository and open a terminal:</p>
<h4 id="2-fetch-the-latest-changes">2. <strong>Fetch the Latest Changes</strong></h4>
<p>Use Git to pull the latest changes from the main repository:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-10-1" name="__codelineno-10-1" href="#__codelineno-10-1"></a>git<span class="w"> </span>pull<span class="w"> </span>origin<span class="w"> </span>main
</code></pre></div>
<h4 id="3-update-dependencies">3. <strong>Update Dependencies</strong></h4>
<p>After pulling the latest changes, update the project dependencies by running the following command:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-11-1" name="__codelineno-11-1" href="#__codelineno-11-1"></a>pnpm<span class="w"> </span>install
</code></pre></div>
<h4 id="4-rebuild-and-start-the-application">4. <strong>Rebuild and Start the Application</strong></h4>
<ul>
<li>
<p><strong>If using Docker</strong>, ensure you rebuild the Docker image to avoid using a cached version:<br />
<div class="highlight"><pre><span></span><code><a id="__codelineno-12-1" name="__codelineno-12-1" href="#__codelineno-12-1"></a>docker-compose<span class="w"> </span>--profile<span class="w"> </span>development<span class="w"> </span>up<span class="w"> </span>--build<span class="w"> </span>
</code></pre></div></p>
</li>
<li>
<p><strong>If not using Docker</strong>, you can start the application as usual with:<br />
<div class="highlight"><pre><span></span><code><a id="__codelineno-13-1" name="__codelineno-13-1" href="#__codelineno-13-1"></a>pnpm<span class="w"> </span>run<span class="w"> </span>dev<span class="w"> </span>
</code></pre></div></p>
</li>
</ul>
<p>This ensures that you're running the latest version of bolt.diy and can take advantage of all the newest features and bug fixes. </p>
<hr />
<h2 id="adding-new-llms">Adding New LLMs:</h2>
<p>To make new LLMs available to use in this version of bolt.diy, head on over to <code>app/utils/constants.ts</code> and find the constant MODEL_LIST. Each element in this array is an object that has the model ID for the name (get this from the provider's API documentation), a label for the frontend model dropdown, and the provider. </p>
<p>By default, Anthropic, OpenAI, Groq, and Ollama are implemented as providers, but the YouTube video for this repo covers how to extend this to work with more providers if you wish!</p>
<p>When you add a new model to the MODEL_LIST array, it will immediately be available to use when you run the app locally or reload it. For Ollama models, make sure you have the model installed already before trying to use it here!</p>
<hr />
<h2 id="available-scripts">Available Scripts</h2>
<ul>
<li><code>pnpm run dev</code>: Starts the development server.</li>
<li><code>pnpm run build</code>: Builds the project.</li>
<li><code>pnpm run start</code>: Runs the built application locally using Wrangler Pages. This script uses <code>bindings.sh</code> to set up necessary bindings so you don't have to duplicate environment variables.</li>
<li><code>pnpm run preview</code>: Builds the project and then starts it locally, useful for testing the production build. Note, HTTP streaming currently doesn't work as expected with <code>wrangler pages dev</code>.</li>
<li><code>pnpm test</code>: Runs the test suite using Vitest.</li>
<li><code>pnpm run typecheck</code>: Runs TypeScript type checking.</li>
<li><code>pnpm run typegen</code>: Generates TypeScript types using Wrangler.</li>
<li><code>pnpm run deploy</code>: Builds the project and deploys it to Cloudflare Pages.</li>
</ul>
<hr />
<h2 id="development">Development</h2>
<p>To start the development server:</p>
<div class="highlight"><pre><span></span><code><a id="__codelineno-14-1" name="__codelineno-14-1" href="#__codelineno-14-1"></a>pnpm<span class="w"> </span>run<span class="w"> </span>dev
</code></pre></div>
<p>This will start the Remix Vite development server. You will need Google Chrome Canary to run this locally if you use Chrome! It's an easy install and a good browser for web development anyway.</p>
<hr />
<h2 id="tips-and-tricks">Tips and Tricks</h2>
<p>Here are some tips to get the most out of bolt.diy:</p>
<ul>
<li>
<p><strong>Be specific about your stack</strong>: If you want to use specific frameworks or libraries (like Astro, Tailwind, ShadCN, or any other popular JavaScript framework), mention them in your initial prompt to ensure Bolt scaffolds the project accordingly.</p>
</li>
<li>
<p><strong>Use the enhance prompt icon</strong>: Before sending your prompt, try clicking the 'enhance' icon to have the AI model help you refine your prompt, then edit the results before submitting.</p>
</li>
<li>
<p><strong>Scaffold the basics first, then add features</strong>: Make sure the basic structure of your application is in place before diving into more advanced functionality. This helps Bolt understand the foundation of your project and ensure everything is wired up right before building out more advanced functionality.</p>
</li>
<li>
<p><strong>Batch simple instructions</strong>: Save time by combining simple instructions into one message. For example, you can ask Bolt to change the color scheme, add mobile responsiveness, and restart the dev server, all in one go saving you time and reducing API credit consumption significantly.</p>
</li>
</ul>
</article>
</div>
<script>var tabs=__md_get("__tabs");if(Array.isArray(tabs))e:for(var set of document.querySelectorAll(".tabbed-set")){var labels=set.querySelector(".tabbed-labels");for(var tab of tabs)for(var label of labels.getElementsByTagName("label"))if(label.innerText.trim()===tab){var input=document.getElementById(label.htmlFor);input.checked=!0;continue e}}</script>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13 20h-2V8l-5.5 5.5-1.42-1.42L12 4.16l7.92 7.92-1.42 1.42L13 8z"/></svg>
Back to top
</button>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
</div>
<div class="md-social">
<a href="https://github.com/stackblitz-labs/bolt.diy" target="_blank" rel="noopener" title="bolt.diy" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9s4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2"/></svg>
</a>
<a href="https://thinktank.ottomator.ai/" target="_blank" rel="noopener" title="bolt.diy Discourse" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M225.9 32C103.3 32 0 130.5 0 252.1 0 256 .1 480 .1 480l225.8-.2c122.7 0 222.1-102.3 222.1-223.9S348.6 32 225.9 32M224 384c-19.4 0-37.9-4.3-54.4-12.1L88.5 392l22.9-75c-9.8-18.1-15.4-38.9-15.4-61 0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128"/></svg>
</a>
<a href="https://x.com/bolt_diy" target="_blank" rel="noopener" title="bolt.diy on X" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8l164.9-188.5L26.8 48h145.6l100.5 132.9zm-24.8 373.8h39.1L151.1 88h-42z"/></svg>
</a>
<a href="https://bsky.app/profile/bolt.diy" target="_blank" rel="noopener" title="bolt.diy on Bluesky" class="md-social__link">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.7.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M111.8 62.2C170.2 105.9 233 194.7 256 242.4c23-47.6 85.8-136.4 144.2-180.2 42.1-31.6 110.3-56 110.3 21.8 0 15.5-8.9 130.5-14.1 149.2-18.2 64.8-84.4 81.4-143.3 71.3C456 322 482.2 380 425.6 438c-107.4 110.2-154.3-27.6-166.3-62.9-1.7-4.9-2.6-7.8-3.3-7.8s-1.6 3-3.3 7.8c-12 35.3-59 173.1-166.3 62.9-56.5-58-30.4-116 72.5-133.5C100 314.6 33.8 298 15.7 233.1 10.4 214.4 1.5 99.4 1.5 83.9c0-77.8 68.2-53.4 110.3-21.8z"/></svg>
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"base": ".", "features": ["navigation.tabs", "navigation.sections", "toc.follow", "toc.integrate", "navigation.top", "search.suggest", "search.highlight", "content.tabs.link", "content.code.annotation", "content.code.copy"], "search": "assets/javascripts/workers/search.6ce7567c.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
<script src="assets/javascripts/bundle.88dd0f4e.min.js"></script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink