codacus commited on
Commit
19a3a03
·
2 Parent(s): 1f513ac 02621e3

Merge branch 'main' into system-prompt-variations-local

Browse files
app/commit.json CHANGED
@@ -1 +1 @@
1
- { "commit": "87a90718d31bd8ec501cb32f863efd26156fb1e2" }
 
1
+ { "commit": "1f513accc9fcb2c7e63c6608da93525c858abbf6" }
app/components/settings/debug/DebugTab.tsx CHANGED
@@ -28,14 +28,21 @@ interface IProviderConfig {
28
  name: string;
29
  settings: {
30
  enabled: boolean;
 
31
  };
32
  }
33
 
 
 
 
 
34
  const LOCAL_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
35
  const versionHash = commit.commit;
36
  const GITHUB_URLS = {
37
  original: 'https://api.github.com/repos/stackblitz-labs/bolt.diy/commits/main',
38
  fork: 'https://api.github.com/repos/Stijnus/bolt.new-any-llm/commits/main',
 
 
39
  };
40
 
41
  function getSystemInfo(): SystemInfo {
@@ -200,7 +207,7 @@ const checkProviderStatus = async (url: string | null, providerName: string): Pr
200
  };
201
 
202
  export default function DebugTab() {
203
- const { providers } = useSettings();
204
  const [activeProviders, setActiveProviders] = useState<ProviderStatus[]>([]);
205
  const [updateMessage, setUpdateMessage] = useState<string>('');
206
  const [systemInfo] = useState<SystemInfo>(getSystemInfo());
@@ -213,29 +220,31 @@ export default function DebugTab() {
213
 
214
  try {
215
  const entries = Object.entries(providers) as [string, IProviderConfig][];
216
- const statuses = entries
217
- .filter(([, provider]) => LOCAL_PROVIDERS.includes(provider.name))
218
- .map(async ([, provider]) => {
219
- const envVarName =
220
- provider.name.toLowerCase() === 'ollama'
221
- ? 'OLLAMA_API_BASE_URL'
222
- : provider.name.toLowerCase() === 'lmstudio'
223
- ? 'LMSTUDIO_API_BASE_URL'
224
- : `REACT_APP_${provider.name.toUpperCase()}_URL`;
225
-
226
- // Access environment variables through import.meta.env
227
- const url = import.meta.env[envVarName] || null;
228
- console.log(`[Debug] Using URL for ${provider.name}:`, url, `(from ${envVarName})`);
229
-
230
- const status = await checkProviderStatus(url, provider.name);
231
-
232
- return {
233
- ...status,
234
- enabled: provider.settings.enabled ?? false,
235
- };
236
- });
237
-
238
- Promise.all(statuses).then(setActiveProviders);
 
 
239
  } catch (error) {
240
  console.error('[Debug] Failed to update provider statuses:', error);
241
  }
@@ -258,32 +267,27 @@ export default function DebugTab() {
258
  setIsCheckingUpdate(true);
259
  setUpdateMessage('Checking for updates...');
260
 
261
- const [originalResponse, forkResponse] = await Promise.all([
262
- fetch(GITHUB_URLS.original),
263
- fetch(GITHUB_URLS.fork),
264
- ]);
265
 
266
- if (!originalResponse.ok || !forkResponse.ok) {
267
- throw new Error('Failed to fetch repository information');
268
- }
269
 
270
- const [originalData, forkData] = await Promise.all([
271
- originalResponse.json() as Promise<{ sha: string }>,
272
- forkResponse.json() as Promise<{ sha: string }>,
273
- ]);
274
 
275
- const originalCommitHash = originalData.sha;
276
- const forkCommitHash = forkData.sha;
277
- const isForked = versionHash === forkCommitHash && forkCommitHash !== originalCommitHash;
278
 
279
- if (originalCommitHash !== versionHash) {
280
  setUpdateMessage(
281
- `Update available from original repository!\n` +
282
- `Current: ${versionHash.slice(0, 7)}${isForked ? ' (forked)' : ''}\n` +
283
- `Latest: ${originalCommitHash.slice(0, 7)}`,
284
  );
285
  } else {
286
- setUpdateMessage('You are on the latest version from the original repository');
287
  }
288
  } catch (error) {
289
  setUpdateMessage('Failed to check for updates');
@@ -291,7 +295,7 @@ export default function DebugTab() {
291
  } finally {
292
  setIsCheckingUpdate(false);
293
  }
294
- }, [isCheckingUpdate]);
295
 
296
  const handleCopyToClipboard = useCallback(() => {
297
  const debugInfo = {
@@ -306,14 +310,17 @@ export default function DebugTab() {
306
  responseTime: provider.responseTime,
307
  url: provider.url,
308
  })),
309
- Version: versionHash,
 
 
 
310
  Timestamp: new Date().toISOString(),
311
  };
312
 
313
  navigator.clipboard.writeText(JSON.stringify(debugInfo, null, 2)).then(() => {
314
  toast.success('Debug information copied to clipboard!');
315
  });
316
- }, [activeProviders, systemInfo]);
317
 
318
  return (
319
  <div className="p-4 space-y-6">
 
28
  name: string;
29
  settings: {
30
  enabled: boolean;
31
+ baseUrl?: string;
32
  };
33
  }
34
 
35
+ interface CommitData {
36
+ commit: string;
37
+ }
38
+
39
  const LOCAL_PROVIDERS = ['Ollama', 'LMStudio', 'OpenAILike'];
40
  const versionHash = commit.commit;
41
  const GITHUB_URLS = {
42
  original: 'https://api.github.com/repos/stackblitz-labs/bolt.diy/commits/main',
43
  fork: 'https://api.github.com/repos/Stijnus/bolt.new-any-llm/commits/main',
44
+ commitJson: (branch: string) =>
45
+ `https://raw.githubusercontent.com/stackblitz-labs/bolt.diy/${branch}/app/commit.json`,
46
  };
47
 
48
  function getSystemInfo(): SystemInfo {
 
207
  };
208
 
209
  export default function DebugTab() {
210
+ const { providers, isLatestBranch } = useSettings();
211
  const [activeProviders, setActiveProviders] = useState<ProviderStatus[]>([]);
212
  const [updateMessage, setUpdateMessage] = useState<string>('');
213
  const [systemInfo] = useState<SystemInfo>(getSystemInfo());
 
220
 
221
  try {
222
  const entries = Object.entries(providers) as [string, IProviderConfig][];
223
+ const statuses = await Promise.all(
224
+ entries
225
+ .filter(([, provider]) => LOCAL_PROVIDERS.includes(provider.name))
226
+ .map(async ([, provider]) => {
227
+ const envVarName =
228
+ provider.name.toLowerCase() === 'ollama'
229
+ ? 'OLLAMA_API_BASE_URL'
230
+ : provider.name.toLowerCase() === 'lmstudio'
231
+ ? 'LMSTUDIO_API_BASE_URL'
232
+ : `REACT_APP_${provider.name.toUpperCase()}_URL`;
233
+
234
+ // Access environment variables through import.meta.env
235
+ const url = import.meta.env[envVarName] || provider.settings.baseUrl || null; // Ensure baseUrl is used
236
+ console.log(`[Debug] Using URL for ${provider.name}:`, url, `(from ${envVarName})`);
237
+
238
+ const status = await checkProviderStatus(url, provider.name);
239
+
240
+ return {
241
+ ...status,
242
+ enabled: provider.settings.enabled ?? false,
243
+ };
244
+ }),
245
+ );
246
+
247
+ setActiveProviders(statuses);
248
  } catch (error) {
249
  console.error('[Debug] Failed to update provider statuses:', error);
250
  }
 
267
  setIsCheckingUpdate(true);
268
  setUpdateMessage('Checking for updates...');
269
 
270
+ const branchToCheck = isLatestBranch ? 'main' : 'stable';
271
+ console.log(`[Debug] Checking for updates against ${branchToCheck} branch`);
 
 
272
 
273
+ const localCommitResponse = await fetch(GITHUB_URLS.commitJson(branchToCheck));
 
 
274
 
275
+ if (!localCommitResponse.ok) {
276
+ throw new Error('Failed to fetch local commit info');
277
+ }
 
278
 
279
+ const localCommitData = (await localCommitResponse.json()) as CommitData;
280
+ const remoteCommitHash = localCommitData.commit;
281
+ const currentCommitHash = versionHash;
282
 
283
+ if (remoteCommitHash !== currentCommitHash) {
284
  setUpdateMessage(
285
+ `Update available from ${branchToCheck} branch!\n` +
286
+ `Current: ${currentCommitHash.slice(0, 7)}\n` +
287
+ `Latest: ${remoteCommitHash.slice(0, 7)}`,
288
  );
289
  } else {
290
+ setUpdateMessage(`You are on the latest version from the ${branchToCheck} branch`);
291
  }
292
  } catch (error) {
293
  setUpdateMessage('Failed to check for updates');
 
295
  } finally {
296
  setIsCheckingUpdate(false);
297
  }
298
+ }, [isCheckingUpdate, isLatestBranch]);
299
 
300
  const handleCopyToClipboard = useCallback(() => {
301
  const debugInfo = {
 
310
  responseTime: provider.responseTime,
311
  url: provider.url,
312
  })),
313
+ Version: {
314
+ hash: versionHash.slice(0, 7),
315
+ branch: isLatestBranch ? 'main' : 'stable',
316
+ },
317
  Timestamp: new Date().toISOString(),
318
  };
319
 
320
  navigator.clipboard.writeText(JSON.stringify(debugInfo, null, 2)).then(() => {
321
  toast.success('Debug information copied to clipboard!');
322
  });
323
+ }, [activeProviders, systemInfo, isLatestBranch]);
324
 
325
  return (
326
  <div className="p-4 space-y-6">
app/components/settings/features/FeaturesTab.tsx CHANGED
@@ -4,8 +4,18 @@ import { PromptLibrary } from '~/lib/common/prompt-library';
4
  import { useSettings } from '~/lib/hooks/useSettings';
5
 
6
  export default function FeaturesTab() {
7
- const { debug, enableDebugMode, isLocalModel, enableLocalModels, enableEventLogs, promptId, setPromptId } =
8
- useSettings();
 
 
 
 
 
 
 
 
 
 
9
  const handleToggle = (enabled: boolean) => {
10
  enableDebugMode(enabled);
11
  enableEventLogs(enabled);
@@ -15,9 +25,20 @@ export default function FeaturesTab() {
15
  <div className="p-4 bg-bolt-elements-bg-depth-2 border border-bolt-elements-borderColor rounded-lg mb-4">
16
  <div className="mb-6">
17
  <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Optional Features</h3>
18
- <div className="flex items-center justify-between mb-2">
19
- <span className="text-bolt-elements-textPrimary">Debug Features</span>
20
- <Switch className="ml-auto" checked={debug} onCheckedChange={handleToggle} />
 
 
 
 
 
 
 
 
 
 
 
21
  </div>
22
  </div>
23
 
 
4
  import { useSettings } from '~/lib/hooks/useSettings';
5
 
6
  export default function FeaturesTab() {
7
+ const {
8
+ debug,
9
+ enableDebugMode,
10
+ isLocalModel,
11
+ enableLocalModels,
12
+ enableEventLogs,
13
+ isLatestBranch,
14
+ enableLatestBranch,
15
+ promptId,
16
+ setPromptId,
17
+ } = useSettings();
18
+
19
  const handleToggle = (enabled: boolean) => {
20
  enableDebugMode(enabled);
21
  enableEventLogs(enabled);
 
25
  <div className="p-4 bg-bolt-elements-bg-depth-2 border border-bolt-elements-borderColor rounded-lg mb-4">
26
  <div className="mb-6">
27
  <h3 className="text-lg font-medium text-bolt-elements-textPrimary mb-4">Optional Features</h3>
28
+ <div className="space-y-4">
29
+ <div className="flex items-center justify-between">
30
+ <span className="text-bolt-elements-textPrimary">Debug Features</span>
31
+ <Switch className="ml-auto" checked={debug} onCheckedChange={handleToggle} />
32
+ </div>
33
+ <div className="flex items-center justify-between">
34
+ <div>
35
+ <span className="text-bolt-elements-textPrimary">Use Main Branch</span>
36
+ <p className="text-sm text-bolt-elements-textSecondary">
37
+ Check for updates against the main branch instead of stable
38
+ </p>
39
+ </div>
40
+ <Switch className="ml-auto" checked={isLatestBranch} onCheckedChange={enableLatestBranch} />
41
+ </div>
42
  </div>
43
  </div>
44
 
app/lib/hooks/useSettings.tsx CHANGED
@@ -6,11 +6,17 @@ import {
6
  LOCAL_PROVIDERS,
7
  promptStore,
8
  providersStore,
 
9
  } from '~/lib/stores/settings';
10
  import { useCallback, useEffect, useState } from 'react';
11
  import Cookies from 'js-cookie';
12
  import type { IProviderSetting, ProviderInfo } from '~/types/model';
13
  import { logStore } from '~/lib/stores/logs'; // assuming logStore is imported from this location
 
 
 
 
 
14
 
15
  export function useSettings() {
16
  const providers = useStore(providersStore);
@@ -18,8 +24,30 @@ export function useSettings() {
18
  const eventLogs = useStore(isEventLogsEnabled);
19
  const promptId = useStore(promptStore);
20
  const isLocalModel = useStore(isLocalModelsEnabled);
 
21
  const [activeProviders, setActiveProviders] = useState<ProviderInfo[]>([]);
22
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
23
  // reading values from cookies on mount
24
  useEffect(() => {
25
  const savedProviders = Cookies.get('providers');
@@ -68,6 +96,20 @@ export function useSettings() {
68
  if (promptId) {
69
  promptStore.set(promptId);
70
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
71
  }, []);
72
 
73
  // writing values to cookies on change
@@ -123,6 +165,11 @@ export function useSettings() {
123
  promptStore.set(promptId);
124
  Cookies.set('promptId', promptId);
125
  }, []);
 
 
 
 
 
126
 
127
  return {
128
  providers,
@@ -136,5 +183,7 @@ export function useSettings() {
136
  enableLocalModels,
137
  promptId,
138
  setPromptId,
 
 
139
  };
140
  }
 
6
  LOCAL_PROVIDERS,
7
  promptStore,
8
  providersStore,
9
+ latestBranchStore,
10
  } from '~/lib/stores/settings';
11
  import { useCallback, useEffect, useState } from 'react';
12
  import Cookies from 'js-cookie';
13
  import type { IProviderSetting, ProviderInfo } from '~/types/model';
14
  import { logStore } from '~/lib/stores/logs'; // assuming logStore is imported from this location
15
+ import commit from '~/commit.json';
16
+
17
+ interface CommitData {
18
+ commit: string;
19
+ }
20
 
21
  export function useSettings() {
22
  const providers = useStore(providersStore);
 
24
  const eventLogs = useStore(isEventLogsEnabled);
25
  const promptId = useStore(promptStore);
26
  const isLocalModel = useStore(isLocalModelsEnabled);
27
+ const isLatestBranch = useStore(latestBranchStore);
28
  const [activeProviders, setActiveProviders] = useState<ProviderInfo[]>([]);
29
 
30
+ // Function to check if we're on stable version
31
+ const checkIsStableVersion = async () => {
32
+ try {
33
+ const stableResponse = await fetch(
34
+ 'https://raw.githubusercontent.com/stackblitz-labs/bolt.diy/stable/app/commit.json',
35
+ );
36
+
37
+ if (!stableResponse.ok) {
38
+ console.warn('Failed to fetch stable commit info');
39
+ return false;
40
+ }
41
+
42
+ const stableData = (await stableResponse.json()) as CommitData;
43
+
44
+ return commit.commit === stableData.commit;
45
+ } catch (error) {
46
+ console.warn('Error checking stable version:', error);
47
+ return false;
48
+ }
49
+ };
50
+
51
  // reading values from cookies on mount
52
  useEffect(() => {
53
  const savedProviders = Cookies.get('providers');
 
96
  if (promptId) {
97
  promptStore.set(promptId);
98
  }
99
+
100
+ // load latest branch setting from cookies or determine based on version
101
+ const savedLatestBranch = Cookies.get('isLatestBranch');
102
+
103
+ if (savedLatestBranch === undefined) {
104
+ // If setting hasn't been set by user, check version
105
+ checkIsStableVersion().then((isStable) => {
106
+ const shouldUseLatest = !isStable;
107
+ latestBranchStore.set(shouldUseLatest);
108
+ Cookies.set('isLatestBranch', String(shouldUseLatest));
109
+ });
110
+ } else {
111
+ latestBranchStore.set(savedLatestBranch === 'true');
112
+ }
113
  }, []);
114
 
115
  // writing values to cookies on change
 
165
  promptStore.set(promptId);
166
  Cookies.set('promptId', promptId);
167
  }, []);
168
+ const enableLatestBranch = useCallback((enabled: boolean) => {
169
+ latestBranchStore.set(enabled);
170
+ logStore.logSystem(`Main branch updates ${enabled ? 'enabled' : 'disabled'}`);
171
+ Cookies.set('isLatestBranch', String(enabled));
172
+ }, []);
173
 
174
  return {
175
  providers,
 
183
  enableLocalModels,
184
  promptId,
185
  setPromptId,
186
+ isLatestBranch,
187
+ enableLatestBranch,
188
  };
189
  }
app/lib/stores/settings.ts CHANGED
@@ -48,3 +48,5 @@ export const isEventLogsEnabled = atom(false);
48
  export const isLocalModelsEnabled = atom(true);
49
 
50
  export const promptStore = atom<string>('default');
 
 
 
48
  export const isLocalModelsEnabled = atom(true);
49
 
50
  export const promptStore = atom<string>('default');
51
+
52
+ export const latestBranchStore = atom(false);
app/utils/constants.ts CHANGED
@@ -499,8 +499,6 @@ async function getLMStudioModels(_apiKeys?: Record<string, string>, settings?: I
499
  }));
500
  } catch (e: any) {
501
  logStore.logError('Failed to get LMStudio models', e, { baseUrl: settings?.baseUrl });
502
- logger.warn('Failed to get LMStudio models: ', e.message || '');
503
-
504
  return [];
505
  }
506
  }
 
499
  }));
500
  } catch (e: any) {
501
  logStore.logError('Failed to get LMStudio models', e, { baseUrl: settings?.baseUrl });
 
 
502
  return [];
503
  }
504
  }
docs/docs/CONTRIBUTING.md CHANGED
@@ -1,11 +1,5 @@
1
  # Contribution Guidelines
2
 
3
- ## DEFAULT_NUM_CTX
4
-
5
- The `DEFAULT_NUM_CTX` environment variable can be used to limit the maximum number of context values used by the qwen2.5-coder model. For example, to limit the context to 24576 values (which uses 32GB of VRAM), set `DEFAULT_NUM_CTX=24576` in your `.env.local` file.
6
-
7
- First off, thank you for considering contributing to Bolt.diy! This fork aims to expand the capabilities of the original project by integrating multiple LLM providers and enhancing functionality. Every contribution helps make Bolt.diy a better tool for developers worldwide.
8
-
9
  ## 📋 Table of Contents
10
  - [Code of Conduct](#code-of-conduct)
11
  - [How Can I Contribute?](#how-can-i-contribute)
@@ -210,6 +204,12 @@ Ensure you have the appropriate `.env.local` file configured before running the
210
  - Environment-specific configurations
211
  - Other required environment variables
212
 
 
 
 
 
 
 
213
  ## Notes
214
 
215
  - Port 5173 is exposed and mapped for both development and production environments
 
1
  # Contribution Guidelines
2
 
 
 
 
 
 
 
3
  ## 📋 Table of Contents
4
  - [Code of Conduct](#code-of-conduct)
5
  - [How Can I Contribute?](#how-can-i-contribute)
 
204
  - Environment-specific configurations
205
  - Other required environment variables
206
 
207
+ ## DEFAULT_NUM_CTX
208
+
209
+ The `DEFAULT_NUM_CTX` environment variable can be used to limit the maximum number of context values used by the qwen2.5-coder model. For example, to limit the context to 24576 values (which uses 32GB of VRAM), set `DEFAULT_NUM_CTX=24576` in your `.env.local` file.
210
+
211
+ First off, thank you for considering contributing to bolt.diy! This fork aims to expand the capabilities of the original project by integrating multiple LLM providers and enhancing functionality. Every contribution helps make bolt.diy a better tool for developers worldwide.
212
+
213
  ## Notes
214
 
215
  - Port 5173 is exposed and mapped for both development and production environments
docs/docs/FAQ.md CHANGED
@@ -1,15 +1,15 @@
1
  # Frequently Asked Questions (FAQ)
2
 
3
- ## How do I get the best results with Bolt.diy?
4
 
5
  - **Be specific about your stack**:
6
- Mention the frameworks or libraries you want to use (e.g., Astro, Tailwind, ShadCN) in your initial prompt. This ensures that Bolt.diy scaffolds the project according to your preferences.
7
 
8
  - **Use the enhance prompt icon**:
9
  Before sending your prompt, click the *enhance* icon to let the AI refine your prompt. You can edit the suggested improvements before submitting.
10
 
11
  - **Scaffold the basics first, then add features**:
12
- Ensure the foundational structure of your application is in place before introducing advanced functionality. This helps Bolt.diy establish a solid base to build on.
13
 
14
  - **Batch simple instructions**:
15
  Combine simple tasks into a single prompt to save time and reduce API credit consumption. For example:
@@ -17,14 +17,14 @@
17
 
18
  ---
19
 
20
- ## How do I contribute to Bolt.diy?
21
 
22
  Check out our [Contribution Guide](CONTRIBUTING.md) for more details on how to get involved!
23
 
24
  ---
25
 
26
 
27
- ## What are the future plans for Bolt.diy?
28
 
29
  Visit our [Roadmap](https://roadmap.sh/r/ottodev-roadmap-2ovzo) for the latest updates.
30
  New features and improvements are on the way!
@@ -33,13 +33,13 @@ New features and improvements are on the way!
33
 
34
  ## Why are there so many open issues/pull requests?
35
 
36
- Bolt.diy began as a small showcase project on @ColeMedin's YouTube channel to explore editing open-source projects with local LLMs. However, it quickly grew into a massive community effort!
37
 
38
  We’re forming a team of maintainers to manage demand and streamline issue resolution. The maintainers are rockstars, and we’re also exploring partnerships to help the project thrive.
39
 
40
  ---
41
 
42
- ## How do local LLMs compare to larger models like Claude 3.5 Sonnet for Bolt.diy?
43
 
44
  While local LLMs are improving rapidly, larger models like GPT-4o, Claude 3.5 Sonnet, and DeepSeek Coder V2 236b still offer the best results for complex applications. Our ongoing focus is to improve prompts, agents, and the platform to better support smaller local LLMs.
45
 
@@ -73,4 +73,4 @@ Local LLMs like Qwen-2.5-Coder are powerful for small applications but still exp
73
 
74
  ---
75
 
76
- Got more questions? Feel free to reach out or open an issue in our GitHub repo!
 
1
  # Frequently Asked Questions (FAQ)
2
 
3
+ ## How do I get the best results with bolt.diy?
4
 
5
  - **Be specific about your stack**:
6
+ Mention the frameworks or libraries you want to use (e.g., Astro, Tailwind, ShadCN) in your initial prompt. This ensures that bolt.diy scaffolds the project according to your preferences.
7
 
8
  - **Use the enhance prompt icon**:
9
  Before sending your prompt, click the *enhance* icon to let the AI refine your prompt. You can edit the suggested improvements before submitting.
10
 
11
  - **Scaffold the basics first, then add features**:
12
+ Ensure the foundational structure of your application is in place before introducing advanced functionality. This helps bolt.diy establish a solid base to build on.
13
 
14
  - **Batch simple instructions**:
15
  Combine simple tasks into a single prompt to save time and reduce API credit consumption. For example:
 
17
 
18
  ---
19
 
20
+ ## How do I contribute to bolt.diy?
21
 
22
  Check out our [Contribution Guide](CONTRIBUTING.md) for more details on how to get involved!
23
 
24
  ---
25
 
26
 
27
+ ## What are the future plans for bolt.diy?
28
 
29
  Visit our [Roadmap](https://roadmap.sh/r/ottodev-roadmap-2ovzo) for the latest updates.
30
  New features and improvements are on the way!
 
33
 
34
  ## Why are there so many open issues/pull requests?
35
 
36
+ bolt.diy began as a small showcase project on @ColeMedin's YouTube channel to explore editing open-source projects with local LLMs. However, it quickly grew into a massive community effort!
37
 
38
  We’re forming a team of maintainers to manage demand and streamline issue resolution. The maintainers are rockstars, and we’re also exploring partnerships to help the project thrive.
39
 
40
  ---
41
 
42
+ ## How do local LLMs compare to larger models like Claude 3.5 Sonnet for bolt.diy?
43
 
44
  While local LLMs are improving rapidly, larger models like GPT-4o, Claude 3.5 Sonnet, and DeepSeek Coder V2 236b still offer the best results for complex applications. Our ongoing focus is to improve prompts, agents, and the platform to better support smaller local LLMs.
45
 
 
73
 
74
  ---
75
 
76
+ Got more questions? Feel free to reach out or open an issue in our GitHub repo!
docs/docs/index.md CHANGED
@@ -1,28 +1,28 @@
1
- # Welcome to Bolt DIY
2
- 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.
3
 
4
  Join the community!
5
 
6
  https://thinktank.ottomator.ai
7
 
8
- ## Whats Bolt.diy
9
 
10
- Bolt.diy is an AI-powered web development agent that allows you to prompt, run, edit, and deploy full-stack applications directly from your browser—no local setup required. If you're here to build your own AI-powered web dev agent using the Bolt open source codebase, [click here to get started!](./CONTRIBUTING.md)
11
 
12
- ## What Makes Bolt.diy Different
13
 
14
- Claude, v0, etc are incredible- but you can't install packages, run backends, or edit code. That’s where Bolt.diy stands out:
15
 
16
- - **Full-Stack in the Browser**: Bolt.diy integrates cutting-edge AI models with an in-browser development environment powered by **StackBlitz’s WebContainers**. This allows you to:
17
  - Install and run npm tools and libraries (like Vite, Next.js, and more)
18
  - Run Node.js servers
19
  - Interact with third-party APIs
20
  - Deploy to production from chat
21
  - Share your work via a URL
22
 
23
- - **AI with Environment Control**: Unlike traditional dev environments where the AI can only assist in code generation, Bolt.diy gives AI models **complete control** over the entire environment including the filesystem, node server, package manager, terminal, and browser console. This empowers AI agents to handle the whole app lifecycle—from creation to deployment.
24
 
25
- Whether you’re an experienced developer, a PM, or a designer, Bolt.diy allows you to easily build production-grade full-stack applications.
26
 
27
  For developers interested in building their own AI-powered development tools with WebContainers, check out the open-source Bolt codebase in this repo!
28
 
@@ -150,7 +150,7 @@ pnpm run dev
150
 
151
  ## Adding New LLMs:
152
 
153
- To make new LLMs available to use in this version of Bolt.diy, head on over to `app/utils/constants.ts` 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.
154
 
155
  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!
156
 
@@ -179,7 +179,7 @@ This will start the Remix Vite development server. You will need Google Chrome C
179
 
180
  ## Tips and Tricks
181
 
182
- Here are some tips to get the most out of Bolt.diy:
183
 
184
  - **Be specific about your stack**: 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.
185
 
 
1
+ # Welcome to bolt diy
2
+ 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.
3
 
4
  Join the community!
5
 
6
  https://thinktank.ottomator.ai
7
 
8
+ ## Whats bolt.diy
9
 
10
+ bolt.diy is an AI-powered web development agent that allows you to prompt, run, edit, and deploy full-stack applications directly from your browser—no local setup required. If you're here to build your own AI-powered web dev agent using the Bolt open source codebase, [click here to get started!](./CONTRIBUTING.md)
11
 
12
+ ## What Makes bolt.diy Different
13
 
14
+ Claude, v0, etc are incredible- but you can't install packages, run backends, or edit code. That’s where bolt.diy stands out:
15
 
16
+ - **Full-Stack in the Browser**: bolt.diy integrates cutting-edge AI models with an in-browser development environment powered by **StackBlitz’s WebContainers**. This allows you to:
17
  - Install and run npm tools and libraries (like Vite, Next.js, and more)
18
  - Run Node.js servers
19
  - Interact with third-party APIs
20
  - Deploy to production from chat
21
  - Share your work via a URL
22
 
23
+ - **AI with Environment Control**: Unlike traditional dev environments where the AI can only assist in code generation, bolt.diy gives AI models **complete control** over the entire environment including the filesystem, node server, package manager, terminal, and browser console. This empowers AI agents to handle the whole app lifecycle—from creation to deployment.
24
 
25
+ Whether you’re an experienced developer, a PM, or a designer, bolt.diy allows you to easily build production-grade full-stack applications.
26
 
27
  For developers interested in building their own AI-powered development tools with WebContainers, check out the open-source Bolt codebase in this repo!
28
 
 
150
 
151
  ## Adding New LLMs:
152
 
153
+ To make new LLMs available to use in this version of bolt.diy, head on over to `app/utils/constants.ts` 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.
154
 
155
  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!
156
 
 
179
 
180
  ## Tips and Tricks
181
 
182
+ Here are some tips to get the most out of bolt.diy:
183
 
184
  - **Be specific about your stack**: 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.
185
 
docs/mkdocs.yml CHANGED
@@ -1,4 +1,4 @@
1
- site_name: Bolt.diy Docs
2
  site_dir: ../site
3
  theme:
4
  name: material
@@ -31,7 +31,7 @@ theme:
31
  repo: fontawesome/brands/github
32
  # logo: assets/logo.png
33
  # favicon: assets/logo.png
34
- repo_name: Bolt.diy
35
  repo_url: https://github.com/stackblitz-labs/bolt.diy
36
  edit_uri: ""
37
 
@@ -40,16 +40,16 @@ extra:
40
  social:
41
  - icon: fontawesome/brands/github
42
  link: https://github.com/stackblitz-labs/bolt.diy
43
- name: Bolt.diy
44
  - icon: fontawesome/brands/discourse
45
  link: https://thinktank.ottomator.ai/
46
- name: Bolt.diy Discourse
47
  - icon: fontawesome/brands/x-twitter
48
  link: https://x.com/bolt_diy
49
- name: Bolt.diy on X
50
  - icon: fontawesome/brands/bluesky
51
  link: https://bsky.app/profile/bolt.diy
52
- name: Bolt.diy on Bluesky
53
 
54
 
55
 
 
1
+ site_name: bolt.diy Docs
2
  site_dir: ../site
3
  theme:
4
  name: material
 
31
  repo: fontawesome/brands/github
32
  # logo: assets/logo.png
33
  # favicon: assets/logo.png
34
+ repo_name: bolt.diy
35
  repo_url: https://github.com/stackblitz-labs/bolt.diy
36
  edit_uri: ""
37
 
 
40
  social:
41
  - icon: fontawesome/brands/github
42
  link: https://github.com/stackblitz-labs/bolt.diy
43
+ name: bolt.diy
44
  - icon: fontawesome/brands/discourse
45
  link: https://thinktank.ottomator.ai/
46
+ name: bolt.diy Discourse
47
  - icon: fontawesome/brands/x-twitter
48
  link: https://x.com/bolt_diy
49
+ name: bolt.diy on X
50
  - icon: fontawesome/brands/bluesky
51
  link: https://bsky.app/profile/bolt.diy
52
+ name: bolt.diy on Bluesky
53
 
54
 
55
 
public/favicon.ico ADDED
vite.config.ts CHANGED
@@ -19,7 +19,8 @@ export default defineConfig((config) => {
19
  future: {
20
  v3_fetcherPersist: true,
21
  v3_relativeSplatPath: true,
22
- v3_throwAbortReason: true
 
23
  },
24
  }),
25
  UnoCSS(),
 
19
  future: {
20
  v3_fetcherPersist: true,
21
  v3_relativeSplatPath: true,
22
+ v3_throwAbortReason: true,
23
+ v3_lazyRouteDiscovery: true
24
  },
25
  }),
26
  UnoCSS(),