Merge branch 'main' into system-prompt-variations-local
Browse files- app/commit.json +1 -1
- app/components/settings/debug/DebugTab.tsx +53 -46
- app/components/settings/features/FeaturesTab.tsx +26 -5
- app/lib/hooks/useSettings.tsx +49 -0
- app/lib/stores/settings.ts +2 -0
- app/utils/constants.ts +0 -2
- docs/docs/CONTRIBUTING.md +6 -6
- docs/docs/FAQ.md +8 -8
- docs/docs/index.md +11 -11
- docs/mkdocs.yml +6 -6
- public/favicon.ico +0 -0
- vite.config.ts +2 -1
app/commit.json
CHANGED
@@ -1 +1 @@
|
|
1 |
-
{ "commit": "
|
|
|
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 =
|
217 |
-
|
218 |
-
|
219 |
-
|
220 |
-
|
221 |
-
|
222 |
-
|
223 |
-
|
224 |
-
|
225 |
-
|
226 |
-
|
227 |
-
|
228 |
-
|
229 |
-
|
230 |
-
|
231 |
-
|
232 |
-
|
233 |
-
|
234 |
-
|
235 |
-
|
236 |
-
|
237 |
-
|
238 |
-
|
|
|
|
|
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
|
262 |
-
|
263 |
-
fetch(GITHUB_URLS.fork),
|
264 |
-
]);
|
265 |
|
266 |
-
|
267 |
-
throw new Error('Failed to fetch repository information');
|
268 |
-
}
|
269 |
|
270 |
-
|
271 |
-
|
272 |
-
|
273 |
-
]);
|
274 |
|
275 |
-
const
|
276 |
-
const
|
277 |
-
const
|
278 |
|
279 |
-
if (
|
280 |
setUpdateMessage(
|
281 |
-
`Update available from
|
282 |
-
`Current: ${
|
283 |
-
`Latest: ${
|
284 |
);
|
285 |
} else {
|
286 |
-
setUpdateMessage(
|
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:
|
|
|
|
|
|
|
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 {
|
8 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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="
|
19 |
-
<
|
20 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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
|
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
|
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
|
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
|
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
|
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 |
-
|
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
|
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
|
2 |
-
|
3 |
|
4 |
Join the community!
|
5 |
|
6 |
https://thinktank.ottomator.ai
|
7 |
|
8 |
-
## Whats
|
9 |
|
10 |
-
|
11 |
|
12 |
-
## What Makes
|
13 |
|
14 |
-
Claude, v0, etc are incredible- but you can't install packages, run backends, or edit code. That’s where
|
15 |
|
16 |
-
- **Full-Stack in the Browser**:
|
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,
|
24 |
|
25 |
-
Whether you’re an experienced developer, a PM, or a designer,
|
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
|
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
|
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:
|
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:
|
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:
|
44 |
- icon: fontawesome/brands/discourse
|
45 |
link: https://thinktank.ottomator.ai/
|
46 |
-
name:
|
47 |
- icon: fontawesome/brands/x-twitter
|
48 |
link: https://x.com/bolt_diy
|
49 |
-
name:
|
50 |
- icon: fontawesome/brands/bluesky
|
51 |
link: https://bsky.app/profile/bolt.diy
|
52 |
-
name:
|
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(),
|