diff --git a/.env.example b/.env.example index 5baa3d4a..6f2f5f5a 100644 --- a/.env.example +++ b/.env.example @@ -32,7 +32,8 @@ OPEN_ROUTER_API_KEY= GOOGLE_GENERATIVE_AI_API_KEY= # You only need this environment variable set if you want to use oLLAMA models -# EXAMPLE http://localhost:11434 +# DONT USE http://localhost:11434 due to IPV6 issues +# USE EXAMPLE http://127.0.0.1:11434 OLLAMA_API_BASE_URL= # You only need this environment variable set if you want to use OpenAI Like models @@ -50,6 +51,12 @@ OPENAI_LIKE_API_KEY= # Get your Together API Key TOGETHER_API_KEY= +# You only need this environment variable set if you want to use Hyperbolic models +#Get your Hyperbolics API Key at https://app.hyperbolic.xyz/settings +#baseURL="https://api.hyperbolic.xyz/v1/chat/completions" +HYPERBOLIC_API_KEY= +HYPERBOLIC_API_BASE_URL= + # Get your Mistral API Key by following these instructions - # https://console.mistral.ai/api-keys/ # You only need this environment variable set if you want to use Mistral models @@ -62,7 +69,8 @@ COHERE_API_KEY= # Get LMStudio Base URL from LM Studio Developer Console # Make sure to enable CORS -# Example: http://localhost:1234 +# DONT USE http://localhost:1234 due to IPV6 issues +# Example: http://127.0.0.1:1234 LMSTUDIO_API_BASE_URL= # Get your xAI API key diff --git a/.github/scripts/generate-changelog.sh b/.github/scripts/generate-changelog.sh new file mode 100755 index 00000000..fd84ee4f --- /dev/null +++ b/.github/scripts/generate-changelog.sh @@ -0,0 +1,261 @@ +#!/usr/bin/env bash + +# Ensure we're running in bash +if [ -z "$BASH_VERSION" ]; then + echo "This script requires bash. Please run with: bash $0" >&2 + exit 1 +fi + +# Ensure we're using bash 4.0 or later for associative arrays +if ((BASH_VERSINFO[0] < 4)); then + echo "This script requires bash version 4 or later" >&2 + echo "Current bash version: $BASH_VERSION" >&2 + exit 1 +fi + +# Set default values for required environment variables if not in GitHub Actions +if [ -z "$GITHUB_ACTIONS" ]; then + : "${GITHUB_SERVER_URL:=https://github.com}" + : "${GITHUB_REPOSITORY:=stackblitz-labs/bolt.diy}" + : "${GITHUB_OUTPUT:=/tmp/github_output}" + touch "$GITHUB_OUTPUT" + + # Running locally + echo "Running locally - checking for upstream remote..." + MAIN_REMOTE="origin" + if git remote -v | grep -q "upstream"; then + MAIN_REMOTE="upstream" + fi + MAIN_BRANCH="main" # or "master" depending on your repository + + # Ensure we have latest tags + git fetch ${MAIN_REMOTE} --tags + + # Use the remote reference for git log + GITLOG_REF="${MAIN_REMOTE}/${MAIN_BRANCH}" +else + # Running in GitHub Actions + GITLOG_REF="HEAD" +fi + +# Get the latest tag +LATEST_TAG=$(git describe --tags --abbrev=0 2>/dev/null || echo "") + +# Start changelog file +echo "# πŸš€ Release v${NEW_VERSION}" > changelog.md +echo "" >> changelog.md +echo "## What's Changed 🌟" >> changelog.md +echo "" >> changelog.md + +if [ -z "$LATEST_TAG" ]; then + echo "### πŸŽ‰ First Release" >> changelog.md + echo "" >> changelog.md + echo "Exciting times! This marks our first release. Thanks to everyone who contributed! πŸ™Œ" >> changelog.md + echo "" >> changelog.md + COMPARE_BASE="$(git rev-list --max-parents=0 HEAD)" +else + echo "### πŸ”„ Changes since $LATEST_TAG" >> changelog.md + echo "" >> changelog.md + COMPARE_BASE="$LATEST_TAG" +fi + +# Function to extract conventional commit type and associated emoji +get_commit_type() { + local msg="$1" + if [[ $msg =~ ^feat(\(.+\))?:|^feature(\(.+\))?: ]]; then echo "✨ Features" + elif [[ $msg =~ ^fix(\(.+\))?: ]]; then echo "πŸ› Bug Fixes" + elif [[ $msg =~ ^docs(\(.+\))?: ]]; then echo "πŸ“š Documentation" + elif [[ $msg =~ ^style(\(.+\))?: ]]; then echo "πŸ’Ž Styles" + elif [[ $msg =~ ^refactor(\(.+\))?: ]]; then echo "♻️ Code Refactoring" + elif [[ $msg =~ ^perf(\(.+\))?: ]]; then echo "⚑ Performance Improvements" + elif [[ $msg =~ ^test(\(.+\))?: ]]; then echo "πŸ§ͺ Tests" + elif [[ $msg =~ ^build(\(.+\))?: ]]; then echo "πŸ› οΈ Build System" + elif [[ $msg =~ ^ci(\(.+\))?: ]]; then echo "βš™οΈ CI" + elif [[ $msg =~ ^chore(\(.+\))?: ]]; then echo "" # Skip chore commits + else echo "πŸ” Other Changes" # Default category with emoji + fi +} + +# Initialize associative arrays +declare -A CATEGORIES +declare -A COMMITS_BY_CATEGORY +declare -A ALL_AUTHORS +declare -A NEW_CONTRIBUTORS + +# Get all historical authors before the compare base +while IFS= read -r author; do + ALL_AUTHORS["$author"]=1 +done < <(git log "${COMPARE_BASE}" --pretty=format:"%ae" | sort -u) + +# Process all commits since last tag +while IFS= read -r commit_line; do + if [[ ! $commit_line =~ ^[a-f0-9]+\| ]]; then + echo "WARNING: Skipping invalid commit line format: $commit_line" >&2 + continue + fi + + HASH=$(echo "$commit_line" | cut -d'|' -f1) + COMMIT_MSG=$(echo "$commit_line" | cut -d'|' -f2) + BODY=$(echo "$commit_line" | cut -d'|' -f3) + # Skip if hash doesn't match the expected format + if [[ ! $HASH =~ ^[a-f0-9]{40}$ ]]; then + continue + fi + + HASH=$(echo "$commit_line" | cut -d'|' -f1) + COMMIT_MSG=$(echo "$commit_line" | cut -d'|' -f2) + BODY=$(echo "$commit_line" | cut -d'|' -f3) + + + # Validate hash format + if [[ ! $HASH =~ ^[a-f0-9]{40}$ ]]; then + echo "WARNING: Invalid commit hash format: $HASH" >&2 + continue + fi + + # Check if it's a merge commit + if [[ $COMMIT_MSG =~ Merge\ pull\ request\ #([0-9]+) ]]; then + # echo "Processing as merge commit" >&2 + PR_NUM="${BASH_REMATCH[1]}" + + # Extract the PR title from the merge commit body + PR_TITLE=$(echo "$BODY" | grep -v "^Merge pull request" | head -n 1) + + # Only process if it follows conventional commit format + CATEGORY=$(get_commit_type "$PR_TITLE") + + if [ -n "$CATEGORY" ]; then # Only process if it's a conventional commit + # Get PR author's GitHub username + GITHUB_USERNAME=$(gh pr view "$PR_NUM" --json author --jq '.author.login') + + if [ -n "$GITHUB_USERNAME" ]; then + # Check if this is a first-time contributor + AUTHOR_EMAIL=$(git show -s --format='%ae' "$HASH") + if [ -z "${ALL_AUTHORS[$AUTHOR_EMAIL]}" ]; then + NEW_CONTRIBUTORS["$GITHUB_USERNAME"]=1 + ALL_AUTHORS["$AUTHOR_EMAIL"]=1 + fi + + CATEGORIES["$CATEGORY"]=1 + COMMITS_BY_CATEGORY["$CATEGORY"]+="* ${PR_TITLE#*: } ([#$PR_NUM](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/$PR_NUM)) by [@$GITHUB_USERNAME](https://github.com/$GITHUB_USERNAME)"$'\n' + else + COMMITS_BY_CATEGORY["$CATEGORY"]+="* ${PR_TITLE#*: } ([#$PR_NUM](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/$PR_NUM))"$'\n' + fi + fi + # Check if it's a squash merge by looking for (#NUMBER) pattern + elif [[ $COMMIT_MSG =~ \(#([0-9]+)\) ]]; then + # echo "Processing as squash commit" >&2 + PR_NUM="${BASH_REMATCH[1]}" + + # Only process if it follows conventional commit format + CATEGORY=$(get_commit_type "$COMMIT_MSG") + + if [ -n "$CATEGORY" ]; then # Only process if it's a conventional commit + # Get PR author's GitHub username + GITHUB_USERNAME=$(gh pr view "$PR_NUM" --json author --jq '.author.login') + + if [ -n "$GITHUB_USERNAME" ]; then + # Check if this is a first-time contributor + AUTHOR_EMAIL=$(git show -s --format='%ae' "$HASH") + if [ -z "${ALL_AUTHORS[$AUTHOR_EMAIL]}" ]; then + NEW_CONTRIBUTORS["$GITHUB_USERNAME"]=1 + ALL_AUTHORS["$AUTHOR_EMAIL"]=1 + fi + + CATEGORIES["$CATEGORY"]=1 + COMMIT_TITLE=${COMMIT_MSG%% (#*} # Remove the PR number suffix + COMMIT_TITLE=${COMMIT_TITLE#*: } # Remove the type prefix + COMMITS_BY_CATEGORY["$CATEGORY"]+="* $COMMIT_TITLE ([#$PR_NUM](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/$PR_NUM)) by [@$GITHUB_USERNAME](https://github.com/$GITHUB_USERNAME)"$'\n' + else + COMMIT_TITLE=${COMMIT_MSG%% (#*} # Remove the PR number suffix + COMMIT_TITLE=${COMMIT_TITLE#*: } # Remove the type prefix + COMMITS_BY_CATEGORY["$CATEGORY"]+="* $COMMIT_TITLE ([#$PR_NUM](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/$PR_NUM))"$'\n' + fi + fi + + else + # echo "Processing as regular commit" >&2 + # Process conventional commits without PR numbers + CATEGORY=$(get_commit_type "$COMMIT_MSG") + + if [ -n "$CATEGORY" ]; then # Only process if it's a conventional commit + # Get commit author info + AUTHOR_EMAIL=$(git show -s --format='%ae' "$HASH") + + # Try to get GitHub username using gh api + if [ -n "$GITHUB_ACTIONS" ] || command -v gh >/dev/null 2>&1; then + GITHUB_USERNAME=$(gh api "/repos/${GITHUB_REPOSITORY}/commits/${HASH}" --jq '.author.login' 2>/dev/null) + fi + + if [ -n "$GITHUB_USERNAME" ]; then + # If we got GitHub username, use it + if [ -z "${ALL_AUTHORS[$AUTHOR_EMAIL]}" ]; then + NEW_CONTRIBUTORS["$GITHUB_USERNAME"]=1 + ALL_AUTHORS["$AUTHOR_EMAIL"]=1 + fi + + CATEGORIES["$CATEGORY"]=1 + COMMIT_TITLE=${COMMIT_MSG#*: } # Remove the type prefix + COMMITS_BY_CATEGORY["$CATEGORY"]+="* $COMMIT_TITLE (${HASH:0:7}) by [@$GITHUB_USERNAME](https://github.com/$GITHUB_USERNAME)"$'\n' + else + # Fallback to git author name if no GitHub username found + AUTHOR_NAME=$(git show -s --format='%an' "$HASH") + + if [ -z "${ALL_AUTHORS[$AUTHOR_EMAIL]}" ]; then + NEW_CONTRIBUTORS["$AUTHOR_NAME"]=1 + ALL_AUTHORS["$AUTHOR_EMAIL"]=1 + fi + + CATEGORIES["$CATEGORY"]=1 + COMMIT_TITLE=${COMMIT_MSG#*: } # Remove the type prefix + COMMITS_BY_CATEGORY["$CATEGORY"]+="* $COMMIT_TITLE (${HASH:0:7}) by $AUTHOR_NAME"$'\n' + fi + fi + fi + +done < <(git log "${COMPARE_BASE}..${GITLOG_REF}" --pretty=format:"%H|%s|%b" --reverse --first-parent) + +# Write categorized commits to changelog with their emojis +for category in "✨ Features" "πŸ› Bug Fixes" "πŸ“š Documentation" "πŸ’Ž Styles" "♻️ Code Refactoring" "⚑ Performance Improvements" "πŸ§ͺ Tests" "πŸ› οΈ Build System" "βš™οΈ CI" "πŸ” Other Changes"; do + if [ -n "${COMMITS_BY_CATEGORY[$category]}" ]; then + echo "### $category" >> changelog.md + echo "" >> changelog.md + echo "${COMMITS_BY_CATEGORY[$category]}" >> changelog.md + echo "" >> changelog.md + fi +done + +# Add first-time contributors section if there are any +if [ ${#NEW_CONTRIBUTORS[@]} -gt 0 ]; then + echo "## ✨ First-time Contributors" >> changelog.md + echo "" >> changelog.md + echo "A huge thank you to our amazing new contributors! Your first contribution marks the start of an exciting journey! 🌟" >> changelog.md + echo "" >> changelog.md + # Use readarray to sort the keys + readarray -t sorted_contributors < <(printf '%s\n' "${!NEW_CONTRIBUTORS[@]}" | sort) + for github_username in "${sorted_contributors[@]}"; do + echo "* 🌟 [@$github_username](https://github.com/$github_username)" >> changelog.md + done + echo "" >> changelog.md +fi + +# Add compare link if not first release +if [ -n "$LATEST_TAG" ]; then + echo "## πŸ“ˆ Stats" >> changelog.md + echo "" >> changelog.md + echo "**Full Changelog**: [\`$LATEST_TAG..v${NEW_VERSION}\`](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/compare/$LATEST_TAG...v${NEW_VERSION})" >> changelog.md +fi + +# Output the changelog content +CHANGELOG_CONTENT=$(cat changelog.md) +{ + echo "content<> "$GITHUB_OUTPUT" + +# Also print to stdout for local testing +echo "Generated changelog:" +echo "===================" +cat changelog.md +echo "===================" \ No newline at end of file diff --git a/.github/workflows/commit.yaml b/.github/workflows/commit.yaml deleted file mode 100644 index 9d88605c..00000000 --- a/.github/workflows/commit.yaml +++ /dev/null @@ -1,39 +0,0 @@ -name: Update Commit Hash File - -on: - push: - branches: - - main - -permissions: - contents: write - -jobs: - update-commit: - if: contains(github.event.head_commit.message, '#release') != true - runs-on: ubuntu-latest - - steps: - - name: Checkout the code - uses: actions/checkout@v3 - - - name: Setup Node.js - uses: actions/setup-node@v4 - with: - node-version: '20' - - name: Get the latest commit hash - run: | - echo "COMMIT_HASH=$(git rev-parse HEAD)" >> $GITHUB_ENV - echo "CURRENT_VERSION=$(node -p "require('./package.json').version")" >> $GITHUB_ENV - - - name: Update commit file - run: | - echo "{ \"commit\": \"$COMMIT_HASH\", \"version\": \"$CURRENT_VERSION\" }" > app/commit.json - - - name: Commit and push the update - run: | - git config --global user.name "github-actions[bot]" - git config --global user.email "github-actions[bot]@users.noreply.github.com" - git add app/commit.json - git commit -m "chore: update commit hash to $COMMIT_HASH" - git push \ No newline at end of file diff --git a/.github/workflows/docs.yaml b/.github/workflows/docs.yaml index ceff5084..0691be2f 100644 --- a/.github/workflows/docs.yaml +++ b/.github/workflows/docs.yaml @@ -4,6 +4,8 @@ on: push: branches: - main + paths: + - 'docs/**' # This will only trigger the workflow when files in docs directory change permissions: contents: write jobs: diff --git a/.github/workflows/update-stable.yml b/.github/workflows/update-stable.yml index bcb0ad95..b1944876 100644 --- a/.github/workflows/update-stable.yml +++ b/.github/workflows/update-stable.yml @@ -80,83 +80,15 @@ jobs: NEW_VERSION=${{ steps.bump_version.outputs.new_version }} pnpm version $NEW_VERSION --no-git-tag-version --allow-same-version + + - name: Prepare changelog script + run: chmod +x .github/scripts/generate-changelog.sh + - name: Generate Changelog id: changelog - run: | - # Get the latest tag - LATEST_TAG=$(git describe --tags --abbrev=0 2>/dev/null || echo "") - - # Start changelog file - echo "# Release v${{ steps.bump_version.outputs.new_version }}" > changelog.md - echo "" >> changelog.md - - if [ -z "$LATEST_TAG" ]; then - echo "### πŸŽ‰ First Release" >> changelog.md - echo "" >> changelog.md - COMPARE_BASE="$(git rev-list --max-parents=0 HEAD)" - else - echo "### πŸ”„ Changes since $LATEST_TAG" >> changelog.md - echo "" >> changelog.md - COMPARE_BASE="$LATEST_TAG" - fi - - # Function to extract conventional commit type - get_commit_type() { - if [[ $1 =~ ^feat:|^feature: ]]; then echo "✨ Features"; - elif [[ $1 =~ ^fix: ]]; then echo "πŸ› Bug Fixes"; - elif [[ $1 =~ ^docs: ]]; then echo "πŸ“š Documentation"; - elif [[ $1 =~ ^style: ]]; then echo "πŸ’Ž Styles"; - elif [[ $1 =~ ^refactor: ]]; then echo "♻️ Code Refactoring"; - elif [[ $1 =~ ^perf: ]]; then echo "⚑️ Performance Improvements"; - elif [[ $1 =~ ^test: ]]; then echo "βœ… Tests"; - elif [[ $1 =~ ^build: ]]; then echo "πŸ› οΈ Build System"; - elif [[ $1 =~ ^ci: ]]; then echo "βš™οΈ CI"; - elif [[ $1 =~ ^chore: ]]; then echo "πŸ”§ Chores"; - else echo "πŸ” Other Changes"; - fi - } - - # Generate categorized changelog - declare -A CATEGORIES - declare -A COMMITS_BY_CATEGORY - - # Get commits since last tag or all commits if no tag exists - while IFS= read -r commit_line; do - HASH=$(echo "$commit_line" | cut -d'|' -f1) - MSG=$(echo "$commit_line" | cut -d'|' -f2) - PR_NUM=$(echo "$commit_line" | cut -d'|' -f3) - - CATEGORY=$(get_commit_type "$MSG") - CATEGORIES["$CATEGORY"]=1 - - # Format commit message with PR link if available - if [ -n "$PR_NUM" ]; then - COMMITS_BY_CATEGORY["$CATEGORY"]+="- ${MSG#*: } ([#$PR_NUM](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/pull/$PR_NUM))"$'\n' - else - COMMITS_BY_CATEGORY["$CATEGORY"]+="- ${MSG#*: }"$'\n' - fi - done < <(git log "${COMPARE_BASE}..HEAD" --pretty=format:"%H|%s|%(trailers:key=PR-Number,valueonly)" --reverse) - - # Write categorized commits to changelog - for category in "✨ Features" "πŸ› Bug Fixes" "πŸ“š Documentation" "πŸ’Ž Styles" "♻️ Code Refactoring" "⚑️ Performance Improvements" "βœ… Tests" "πŸ› οΈ Build System" "βš™οΈ CI" "πŸ”§ Chores" "πŸ” Other Changes"; do - if [ -n "${COMMITS_BY_CATEGORY[$category]}" ]; then - echo "#### $category" >> changelog.md - echo "" >> changelog.md - echo "${COMMITS_BY_CATEGORY[$category]}" >> changelog.md - echo "" >> changelog.md - fi - done - - # Add compare link if not first release - if [ -n "$LATEST_TAG" ]; then - echo "**Full Changelog**: [\`$LATEST_TAG..v${{ steps.bump_version.outputs.new_version }}\`](${GITHUB_SERVER_URL}/${GITHUB_REPOSITORY}/compare/$LATEST_TAG...v${{ steps.bump_version.outputs.new_version }})" >> changelog.md - fi - - # Save changelog content for the release - CHANGELOG_CONTENT=$(cat changelog.md) - echo "content<> $GITHUB_OUTPUT - echo "$CHANGELOG_CONTENT" >> $GITHUB_OUTPUT - echo "EOF" >> $GITHUB_OUTPUT + env: + NEW_VERSION: ${{ steps.bump_version.outputs.new_version }} + run: .github/scripts/generate-changelog.sh - name: Get the latest commit hash and version tag run: | @@ -166,8 +98,7 @@ jobs: - name: Commit and Tag Release run: | git pull - echo "{ \"commit\": \"$COMMIT_HASH\", \"version\": \"$NEW_VERSION\" }" > app/commit.json - git add package.json pnpm-lock.yaml changelog.md app/commit.json + git add package.json pnpm-lock.yaml changelog.md git commit -m "chore: release version ${{ steps.bump_version.outputs.new_version }}" git tag "v${{ steps.bump_version.outputs.new_version }}" git push diff --git a/.husky/pre-commit b/.husky/pre-commit index b95e00d5..5f5c2b9e 100644 --- a/.husky/pre-commit +++ b/.husky/pre-commit @@ -29,15 +29,4 @@ if ! pnpm lint; then exit 1 fi -# Update commit.json with the latest commit hash -echo "Updating commit.json with the latest commit hash..." -COMMIT_HASH=$(git rev-parse HEAD) -if [ $? -ne 0 ]; then - echo "❌ Failed to get commit hash. Ensure you are in a git repository." - exit 1 -fi - -echo "{ \"commit\": \"$COMMIT_HASH\" }" > app/commit.json -git add app/commit.json - echo "πŸ‘ All checks passed! Committing changes..." diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index bdb02ff1..3a8d5be8 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,217 +1,219 @@ -# Contributing to bolt.diy +# Contribution Guidelines -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. +Welcome! This guide provides all the details you need to contribute effectively to the project. Thank you for helping us make **bolt.diy** a better tool for developers worldwide. πŸ’‘ + +--- ## πŸ“‹ Table of Contents -- [Code of Conduct](#code-of-conduct) -- [How Can I Contribute?](#how-can-i-contribute) -- [Pull Request Guidelines](#pull-request-guidelines) -- [Coding Standards](#coding-standards) -- [Development Setup](#development-setup) -- [Deploymnt with Docker](#docker-deployment-documentation) -- [Project Structure](#project-structure) -## Code of Conduct +1. [Code of Conduct](#code-of-conduct) +2. [How Can I Contribute?](#how-can-i-contribute) +3. [Pull Request Guidelines](#pull-request-guidelines) +4. [Coding Standards](#coding-standards) +5. [Development Setup](#development-setup) +6. [Testing](#testing) +7. [Deployment](#deployment) +8. [Docker Deployment](#docker-deployment) +9. [VS Code Dev Containers Integration](#vs-code-dev-containers-integration) -This project and everyone participating in it is governed by our Code of Conduct. By participating, you are expected to uphold this code. Please report unacceptable behavior to the project maintainers. +--- -## How Can I Contribute? +## πŸ›‘οΈ Code of Conduct -### 🐞 Reporting Bugs and Feature Requests -- Check the issue tracker to avoid duplicates -- Use the issue templates when available -- Include as much relevant information as possible -- For bugs, add steps to reproduce the issue +This project is governed by our **Code of Conduct**. By participating, you agree to uphold this code. Report unacceptable behavior to the project maintainers. -### πŸ”§ Code Contributions -1. Fork the repository -2. Create a new branch for your feature/fix -3. Write your code -4. Submit a pull request +--- -### ✨ Becoming a Core Contributor -We're looking for dedicated contributors to help maintain and grow this project. If you're interested in becoming a core contributor, please fill out our [Contributor Application Form](https://forms.gle/TBSteXSDCtBDwr5m7). +## πŸ› οΈ How Can I Contribute? -## Pull Request Guidelines +### 1️⃣ Reporting Bugs or Feature Requests +- Check the [issue tracker](#) to avoid duplicates. +- Use issue templates (if available). +- Provide detailed, relevant information and steps to reproduce bugs. -### πŸ“ PR Checklist -- [ ] Branch from the main branch -- [ ] Update documentation if needed -- [ ] Manually verify all new functionality works as expected -- [ ] Keep PRs focused and atomic +### 2️⃣ Code Contributions +1. Fork the repository. +2. Create a feature or fix branch. +3. Write and test your code. +4. Submit a pull request (PR). -### πŸ‘€ Review Process -1. Manually test the changes -2. At least one maintainer review required -3. Address all review comments -4. Maintain clean commit history +### 3️⃣ Join as a Core Contributor +Interested in maintaining and growing the project? Fill out our [Contributor Application Form](https://forms.gle/TBSteXSDCtBDwr5m7). -## Coding Standards +--- -### πŸ’» General Guidelines -- Follow existing code style -- Comment complex logic -- Keep functions focused and small -- Use meaningful variable names -- Lint your code. This repo contains a pre-commit-hook that will verify your code is linted properly, -so set up your IDE to do that for you! +## βœ… Pull Request Guidelines -## Development Setup +### PR Checklist +- Branch from the **main** branch. +- Update documentation, if needed. +- Test all functionality manually. +- Focus on one feature/bug per PR. -### πŸ”„ Initial Setup -1. Clone the repository: -```bash -git clone https://github.com/coleam00/bolt.new-any-llm.git -``` +### Review Process +1. Manual testing by reviewers. +2. At least one maintainer review required. +3. Address review comments. +4. Maintain a clean commit history. -2. Install dependencies: -```bash -pnpm install -``` +--- -3. Set up environment variables: - - Rename `.env.example` to `.env.local` - - Add your LLM API keys (only set the ones you plan to use): -```bash -GROQ_API_KEY=XXX -HuggingFace_API_KEY=XXX -OPENAI_API_KEY=XXX -ANTHROPIC_API_KEY=XXX -... -``` - - Optionally set debug level: -```bash -VITE_LOG_LEVEL=debug -``` +## πŸ“ Coding Standards - - Optionally set context size: -```bash -DEFAULT_NUM_CTX=32768 -``` +### General Guidelines +- Follow existing code style. +- Comment complex logic. +- Keep functions small and focused. +- Use meaningful variable names. -Some Example Context Values for the qwen2.5-coder:32b models are. - -* DEFAULT_NUM_CTX=32768 - Consumes 36GB of VRAM -* DEFAULT_NUM_CTX=24576 - Consumes 32GB of VRAM -* DEFAULT_NUM_CTX=12288 - Consumes 26GB of VRAM -* DEFAULT_NUM_CTX=6144 - Consumes 24GB of VRAM +--- -**Important**: Never commit your `.env.local` file to version control. It's already included in .gitignore. +## πŸ–₯️ Development Setup -### πŸš€ Running the Development Server +### 1️⃣ Initial Setup +- Clone the repository: + ```bash + git clone https://github.com/stackblitz-labs/bolt.diy.git + ``` +- Install dependencies: + ```bash + pnpm install + ``` +- Set up environment variables: + 1. Rename `.env.example` to `.env.local`. + 2. Add your API keys: + ```bash + GROQ_API_KEY=XXX + HuggingFace_API_KEY=XXX + OPENAI_API_KEY=XXX + ... + ``` + 3. Optionally set: + - Debug level: `VITE_LOG_LEVEL=debug` + - Context size: `DEFAULT_NUM_CTX=32768` + +**Note**: Never commit your `.env.local` file to version control. It’s already in `.gitignore`. + +### 2️⃣ Run Development Server ```bash pnpm run dev ``` +**Tip**: Use **Google Chrome Canary** for local testing. -**Note**: 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. +--- -## Testing - -Run the test suite with: +## πŸ§ͺ Testing +Run the test suite with: ```bash pnpm test ``` -## Deployment +--- -To deploy the application to Cloudflare Pages: +## πŸš€ Deployment +### Deploy to Cloudflare Pages ```bash pnpm run deploy ``` +Ensure you have required permissions and that Wrangler is configured. -Make sure you have the necessary permissions and Wrangler is correctly configured for your Cloudflare account. +--- -# Docker Deployment Documentation +## 🐳 Docker Deployment -This guide outlines various methods for building and deploying the application using Docker. +This section outlines the methods for deploying the application using Docker. The processes for **Development** and **Production** are provided separately for clarity. -## Build Methods +--- -### 1. Using Helper Scripts +### πŸ§‘β€πŸ’» Development Environment -NPM scripts are provided for convenient building: +#### Build Options +**Option 1: Helper Scripts** ```bash # Development build npm run dockerbuild +``` +**Option 2: Direct Docker Build Command** +```bash +docker build . --target bolt-ai-development +``` + +**Option 3: Docker Compose Profile** +```bash +docker-compose --profile development up +``` + +#### Running the Development Container +```bash +docker run -p 5173:5173 --env-file .env.local bolt-ai:development +``` + +--- + +### 🏭 Production Environment + +#### Build Options + +**Option 1: Helper Scripts** +```bash # Production build npm run dockerbuild:prod ``` -### 2. Direct Docker Build Commands - -You can use Docker's target feature to specify the build environment: - +**Option 2: Direct Docker Build Command** ```bash -# Development build -docker build . --target bolt-ai-development - -# Production build docker build . --target bolt-ai-production ``` -### 3. Docker Compose with Profiles - -Use Docker Compose profiles to manage different environments: - +**Option 3: Docker Compose Profile** ```bash -# Development environment -docker-compose --profile development up - -# Production environment docker-compose --profile production up ``` -## Running the Application - -After building using any of the methods above, run the container with: - +#### Running the Production Container ```bash -# Development -docker run -p 5173:5173 --env-file .env.local bolt-ai:development - -# Production docker run -p 5173:5173 --env-file .env.local bolt-ai:production ``` -## Deployment with Coolify +--- -[Coolify](https://github.com/coollabsio/coolify) provides a straightforward deployment process: +### Coolify Deployment -1. Import your Git repository as a new project -2. Select your target environment (development/production) -3. Choose "Docker Compose" as the Build Pack -4. Configure deployment domains -5. Set the custom start command: +For an easy deployment process, use [Coolify](https://github.com/coollabsio/coolify): +1. Import your Git repository into Coolify. +2. Choose **Docker Compose** as the build pack. +3. Configure environment variables (e.g., API keys). +4. Set the start command: ```bash docker compose --profile production up ``` -6. Configure environment variables - - Add necessary AI API keys - - Adjust other environment variables as needed -7. Deploy the application -## VS Code Integration +--- -The `docker-compose.yaml` configuration is compatible with VS Code dev containers: +## πŸ› οΈ VS Code Dev Containers Integration -1. Open the command palette in VS Code -2. Select the dev container configuration -3. Choose the "development" profile from the context menu +The `docker-compose.yaml` configuration is compatible with **VS Code Dev Containers**, making it easy to set up a development environment directly in Visual Studio Code. -## Environment Files +### Steps to Use Dev Containers -Ensure you have the appropriate `.env.local` file configured before running the containers. This file should contain: -- API keys -- Environment-specific configurations -- Other required environment variables +1. Open the command palette in VS Code (`Ctrl+Shift+P` or `Cmd+Shift+P` on macOS). +2. Select **Dev Containers: Reopen in Container**. +3. Choose the **development** profile when prompted. +4. VS Code will rebuild the container and open it with the pre-configured environment. -## Notes +--- -- Port 5173 is exposed and mapped for both development and production environments -- Environment variables are loaded from `.env.local` -- Different profiles (development/production) can be used for different deployment scenarios -- The configuration supports both local development and production deployment +## πŸ”‘ Environment Variables + +Ensure `.env.local` is configured correctly with: +- API keys. +- Context-specific configurations. + +Example for the `DEFAULT_NUM_CTX` variable: +```bash +DEFAULT_NUM_CTX=24576 # Uses 32GB VRAM +``` \ No newline at end of file diff --git a/FAQ.md b/FAQ.md index ecd4158f..a09fae88 100644 --- a/FAQ.md +++ b/FAQ.md @@ -1,47 +1,91 @@ -[![bolt.diy: AI-Powered Full-Stack Web Development in the Browser](./public/social_preview_index.jpg)](https://bolt.diy) +# Frequently Asked Questions (FAQ) -# bolt.diy +
+What are the best models for bolt.diy? -## FAQ +For the best experience with bolt.diy, we recommend using the following models: -### How do I get the best results with bolt.diy? +- **Claude 3.5 Sonnet (old)**: Best overall coder, providing excellent results across all use cases +- **Gemini 2.0 Flash**: Exceptional speed while maintaining good performance +- **GPT-4o**: Strong alternative to Claude 3.5 Sonnet with comparable capabilities +- **DeepSeekCoder V2 236b**: Best open source model (available through OpenRouter, DeepSeek API, or self-hosted) +- **Qwen 2.5 Coder 32b**: Best model for self-hosting with reasonable hardware requirements -- **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. +**Note**: Models with less than 7b parameters typically lack the capability to properly interact with bolt! +
-- **Use the enhance prompt icon**: 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. +
+How do I get the best results with bolt.diy? -- **Scaffold the basics first, then add features**: Make sure the basic structure of your application is in place before diving into more advanced functionality. This helps Bolt.diy understand the foundation of your project and ensure everything is wired up right before building out more advanced functionality. +- **Be specific about your stack**: + 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. -- **Batch simple instructions**: Save time by combining simple instructions into one message. For example, you can ask Bolt.diy 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. +- **Use the enhance prompt icon**: + Before sending your prompt, click the *enhance* icon to let the AI refine your prompt. You can edit the suggested improvements before submitting. -### Why are there so many open issues/pull requests? +- **Scaffold the basics first, then add features**: + 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. -bolt.diy was started simply to showcase how to edit an open source project and to do something cool with local LLMs on my (@ColeMedin) YouTube channel! However, it quickly grew into a massive community project that I am working hard to keep up with the demand of by forming a team of maintainers and getting as many people involved as I can. That effort is going well and all of our maintainers are ABSOLUTE rockstars, but it still takes time to organize everything so we can efficiently get through all the issues and PRs. But rest assured, we are working hard and even working on some partnerships behind the scenes to really help this project take off! +- **Batch simple instructions**: + Combine simple tasks into a single prompt to save time and reduce API credit consumption. For example: + *"Change the color scheme, add mobile responsiveness, and restart the dev server."* +
-### How do local LLMs fair compared to larger models like Claude 3.5 Sonnet for bolt.diy/bolt.new? +
+How do I contribute to bolt.diy? -As much as the gap is quickly closing between open source and massive close source models, you’re still going to get the best results with the very large models like GPT-4o, Claude 3.5 Sonnet, and DeepSeek Coder V2 236b. This is one of the big tasks we have at hand - figuring out how to prompt better, use agents, and improve the platform as a whole to make it work better for even the smaller local LLMs! +Check out our [Contribution Guide](CONTRIBUTING.md) for more details on how to get involved! +
-### I'm getting the error: "There was an error processing this request" +
+What are the future plans for bolt.diy? -If you see this error within bolt.diy, that is just the application telling you there is a problem at a high level, and this could mean a number of different things. To find the actual error, please check BOTH the terminal where you started the application (with Docker or pnpm) and the developer console in the browser. For most browsers, you can access the developer console by pressing F12 or right clicking anywhere in the browser and selecting β€œInspect”. Then go to the β€œconsole” tab in the top right. +Visit our [Roadmap](https://roadmap.sh/r/ottodev-roadmap-2ovzo) for the latest updates. +New features and improvements are on the way! +
-### I'm getting the error: "x-api-key header missing" +
+Why are there so many open issues/pull requests? -We have seen this error a couple times and for some reason just restarting the Docker container has fixed it. This seems to be Ollama specific. Another thing to try is try to run bolt.diy with Docker or pnpm, whichever you didn’t run first. We are still on the hunt for why this happens once and a while! +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! -### I'm getting a blank preview when bolt.diy runs my app! +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. +
-We promise you that we are constantly testing new PRs coming into bolt.diy and the preview is core functionality, so the application is not broken! When you get a blank preview or don’t get a preview, this is generally because the LLM hallucinated bad code or incorrect commands. We are working on making this more transparent so it is obvious. Sometimes the error will appear in developer console too so check that as well. +
+How do local LLMs compare to larger models like Claude 3.5 Sonnet for bolt.diy? -### How to add a LLM: +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. +
-To make new LLMs available to use in this version of bolt.new, 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. +
+Common Errors and Troubleshooting -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! +### **"There was an error processing this request"** +This generic error message means something went wrong. Check both: +- The terminal (if you started the app with Docker or `pnpm`). +- The developer console in your browser (press `F12` or right-click > *Inspect*, then go to the *Console* tab). -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! +### **"x-api-key header missing"** +This error is sometimes resolved by restarting the Docker container. +If that doesn't work, try switching from Docker to `pnpm` or vice versa. We're actively investigating this issue. -### Everything works but the results are bad +### **Blank preview when running the app** +A blank preview often occurs due to hallucinated bad code or incorrect commands. +To troubleshoot: +- Check the developer console for errors. +- Remember, previews are core functionality, so the app isn't broken! We're working on making these errors more transparent. -This goes to the point above about how local LLMs are getting very powerful but you still are going to see better (sometimes much better) results with the largest LLMs like GPT-4o, Claude 3.5 Sonnet, and DeepSeek Coder V2 236b. If you are using smaller LLMs like Qwen-2.5-Coder, consider it more experimental and educational at this point. It can build smaller applications really well, which is super impressive for a local LLM, but for larger scale applications you want to use the larger LLMs still! +### **"Everything works, but the results are bad"** +Local LLMs like Qwen-2.5-Coder are powerful for small applications but still experimental for larger projects. For better results, consider using larger models like GPT-4o, Claude 3.5 Sonnet, or DeepSeek Coder V2 236b. + +### **"Received structured exception #0xc0000005: access violation"** +If you are getting this, you are probably on Windows. The fix is generally to update the [Visual C++ Redistributable](https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?view=msvc-170) + +### **"Miniflare or Wrangler errors in Windows"** +You will need to make sure you have the latest version of Visual Studio C++ installed (14.40.33816), more information here https://github.com/stackblitz-labs/bolt.diy/issues/19. +
+ +--- + +Got more questions? Feel free to reach out or open an issue in our GitHub repo! diff --git a/README.md b/README.md index 84235f8c..c50f4277 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,32 @@ -[![bolt.diy: AI-Powered Full-Stack Web Development in the Browser](./public/social_preview_index.jpg)](https://bolt.diy) - # bolt.diy (Previously oTToDev) +[![bolt.diy: AI-Powered Full-Stack Web Development in the Browser](./public/social_preview_index.jpg)](https://bolt.diy) Welcome to bolt.diy, the official open source version of Bolt.new (previously known as oTToDev and bolt.new ANY LLM), which 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. -Check the [bolt.diy Docs](https://stackblitz-labs.github.io/bolt.diy/) for more information. This documentation is still being updated after the transfer. +Check the [bolt.diy Docs](https://stackblitz-labs.github.io/bolt.diy/) for more information. + +We have also launched an experimental agent called the "bolt.diy Expert" that can answer common questions about bolt.diy. Find it here on the [oTTomator Live Agent Studio](https://studio.ottomator.ai/). bolt.diy was originally started by [Cole Medin](https://www.youtube.com/@ColeMedin) but has quickly grown into a massive community effort to build the BEST open source AI coding assistant! -## Join the community for bolt.diy! +## Table of Contents -https://thinktank.ottomator.ai +- [Join the Community](#join-the-community) +- [Requested Additions](#requested-additions) +- [Features](#features) +- [Setup](#setup) +- [Run the Application](#run-the-application) +- [Available Scripts](#available-scripts) +- [Contributing](#contributing) +- [Roadmap](#roadmap) +- [FAQ](#faq) + +## Join the community + +[Join the bolt.diy community here, in the thinktank on ottomator.ai!](https://thinktank.ottomator.ai) -## Requested Additions - Feel Free to Contribute! +## Requested Additions - βœ… OpenRouter Integration (@coleam00) - βœ… Gemini Integration (@jonathands) @@ -48,6 +61,9 @@ https://thinktank.ottomator.ai - βœ… PromptLibrary to have different variations of prompts for different use cases (@thecodacus) - βœ… Detect package.json and commands to auto install & run preview for folder and git import (@wonderwhy-er) - βœ… Selection tool to target changes visually (@emcconnell) +- βœ… Detect terminal Errors and ask bolt to fix it (@thecodacus) +- βœ… Detect preview Errors and ask bolt to fix it (@wonderwhy-er) +- βœ… Add Starter Template Options (@thecodacus) - ⬜ **HIGH PRIORITY** - Prevent bolt from rewriting files as often (file locking and diffs) - ⬜ **HIGH PRIORITY** - Better prompting for smaller LLMs (code window sometimes doesn't start) - ⬜ **HIGH PRIORITY** - Run agents in the backend as opposed to a single model call @@ -57,10 +73,10 @@ https://thinktank.ottomator.ai - ⬜ Upload documents for knowledge - UI design templates, a code base to reference coding style, etc. - ⬜ Voice prompting - ⬜ Azure Open AI API Integration -- ⬜ Perplexity Integration +- βœ… Perplexity Integration (@meetpateltech) - ⬜ Vertex AI Integration -## bolt.diy Features +## Features - **AI-powered full-stack web development** directly in your browser. - **Support for multiple LLMs** with an extensible architecture to integrate additional models. @@ -70,141 +86,212 @@ https://thinktank.ottomator.ai - **Download projects as ZIP** for easy portability. - **Integration-ready Docker support** for a hassle-free setup. -## Setup bolt.diy +## Setup 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. -### Prerequisites +Let's get you up and running with the stable version of Bolt.DIY! -1. **Install Git**: [Download Git](https://git-scm.com/downloads) -2. **Install Node.js**: [Download Node.js](https://nodejs.org/en/download/) +## Quick Download - - After installation, the Node.js path is usually added to your system automatically. To verify: - - **Windows**: Search for "Edit the system environment variables," click "Environment Variables," and check if `Node.js` is in the `Path` variable. - - **Mac/Linux**: Open a terminal and run: - ```bash - echo $PATH - ``` - Look for `/usr/local/bin` in the output. +[![Download Latest Release](https://img.shields.io/github/v/release/stackblitz-labs/bolt.diy?label=Download%20Bolt&sort=semver)](https://github.com/stackblitz-labs/bolt.diy/releases/latest) ← Click here to go the the latest release version! -### Clone the Repository +- Next **click source.zip** -Clone the repository using Git: -```bash -git clone -b stable https://github.com/stackblitz-labs/bolt.diy -``` -### (Optional) Configure Environment Variables -Most environment variables can be configured directly through the settings menu of the application. However, if you need to manually configure them: +## Prerequisites -1. Rename `.env.example` to `.env.local`. -2. Add your LLM API keys. For example: +Before you begin, you'll need to install two important pieces of software: -```env -GROQ_API_KEY=YOUR_GROQ_API_KEY -OPENAI_API_KEY=YOUR_OPENAI_API_KEY -ANTHROPIC_API_KEY=YOUR_ANTHROPIC_API_KEY -``` +### Install Node.js -**Note**: Ollama does not require an API key as it runs locally. +Node.js is required to run the application. -3. Optionally, set additional configurations: +1. Visit the [Node.js Download Page](https://nodejs.org/en/download/) +2. Download the "LTS" (Long Term Support) version for your operating system +3. Run the installer, accepting the default settings +4. Verify Node.js is properly installed: + - **For Windows Users**: + 1. Press `Windows + R` + 2. Type "sysdm.cpl" and press Enter + 3. Go to "Advanced" tab β†’ "Environment Variables" + 4. Check if `Node.js` appears in the "Path" variable + - **For Mac/Linux Users**: + 1. Open Terminal + 2. Type this command: + ```bash + echo $PATH + ``` + 3. Look for `/usr/local/bin` in the output -```env -# Debugging -VITE_LOG_LEVEL=debug +## Running the Application -# Ollama settings (example: 8K context, localhost port 11434) -OLLAMA_API_BASE_URL=http://localhost:11434 -DEFAULT_NUM_CTX=8192 -``` +You have two options for running Bolt.DIY: directly on your machine or using Docker. -**Important**: Do not commit your `.env.local` file to version control. This file is already included in `.gitignore`. - ---- - -## Run the Application - -### Option 1: Without Docker - -1. **Install Dependencies**: - ```bash - pnpm install - ``` - If `pnpm` is not installed, install it using: - ```bash - sudo npm install -g pnpm - ``` - -2. **Start the Application**: - ```bash - pnpm run dev - ``` - 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. - -### Option 2: With Docker - -#### Prerequisites -- Ensure Git, Node.js, and Docker are installed: [Download Docker](https://www.docker.com/) - -#### Steps - -1. **Build the Docker Image**: - - Use the provided NPM scripts: - ```bash - npm run dockerbuild # Development build - npm run dockerbuild:prod # Production build - ``` - - Alternatively, use Docker commands directly: - ```bash - docker build . --target bolt-ai-development # Development build - docker build . --target bolt-ai-production # Production build - ``` - -2. **Run the Container**: - Use Docker Compose profiles to manage environments: - ```bash - docker-compose --profile development up # Development - docker-compose --profile production up # Production - ``` - - - With the development profile, changes to your code will automatically reflect in the running container (hot reloading). - ---- - -### Update Your Local Version to the Latest - -To keep your local version of bolt.diy up to date with the latest changes, follow these steps for your operating system: - -#### 1. **Navigate to your project folder** - Navigate to the directory where you cloned the repository and open a terminal: - -#### 2. **Fetch the Latest Changes** - Use Git to pull the latest changes from the main repository: +### Option 1: Direct Installation (Recommended for Beginners) +1. **Install Package Manager (pnpm)**: ```bash - git pull origin main + npm install -g pnpm ``` -#### 3. **Update Dependencies** - After pulling the latest changes, update the project dependencies by running the following command: - +2. **Install Project Dependencies**: ```bash pnpm install ``` -#### 4. **Run the Application** - Once the updates are complete, you can start the application again with: - +3. **Start the Application**: ```bash pnpm run dev ``` -This ensures that you're running the latest version of bolt.diy and can take advantage of all the newest features and bug fixes. + **Important Note**: If you're using Google Chrome, you'll need Chrome Canary for local development. [Download it here](https://www.google.com/chrome/canary/) + +### Option 2: Using Docker + +This option requires some familiarity with Docker but provides a more isolated environment. + +#### Additional Prerequisite +- Install Docker: [Download Docker](https://www.docker.com/) + +#### Steps: + +1. **Build the Docker Image**: + ```bash + # Using npm script: + npm run dockerbuild + + # OR using direct Docker command: + docker build . --target bolt-ai-development + ``` + +2. **Run the Container**: + ```bash + docker-compose --profile development up + ``` + + + + +## Configuring API Keys and Providers + +### Adding Your API Keys + +Setting up your API keys in Bolt.DIY is straightforward: + +1. Open the home page (main interface) +2. Select your desired provider from the dropdown menu +3. Click the pencil (edit) icon +4. Enter your API key in the secure input field + +![API Key Configuration Interface](./docs/images/api-key-ui-section.png) + +### Configuring Custom Base URLs + +For providers that support custom base URLs (such as Ollama or LM Studio), follow these steps: + +1. Click the settings icon in the sidebar to open the settings menu + ![Settings Button Location](./docs/images/bolt-settings-button.png) + +2. Navigate to the "Providers" tab +3. Search for your provider using the search bar +4. Enter your custom base URL in the designated field + ![Provider Base URL Configuration](./docs/images/provider-base-url.png) + +> **Note**: Custom base URLs are particularly useful when running local instances of AI models or using custom API endpoints. + +### Supported Providers +- Ollama +- LM Studio +- OpenAILike + +## Setup Using Git (For Developers only) + +This method is recommended for developers who want to: +- Contribute to the project +- Stay updated with the latest changes +- Switch between different versions +- Create custom modifications + +#### Prerequisites +1. Install Git: [Download Git](https://git-scm.com/downloads) + +#### Initial Setup + +1. **Clone the Repository**: + ```bash + # Using HTTPS + git clone https://github.com/stackblitz-labs/bolt.diy.git + ``` + +2. **Navigate to Project Directory**: + ```bash + cd bolt.diy + ``` + +3. **Switch to the Main Branch**: + ```bash + git checkout main + ``` +4. **Install Dependencies**: + ```bash + pnpm install + ``` + +5. **Start the Development Server**: + ```bash + pnpm run dev + ``` + +#### Staying Updated + +To get the latest changes from the repository: + +1. **Save Your Local Changes** (if any): + ```bash + git stash + ``` + +2. **Pull Latest Updates**: + ```bash + git pull origin main + ``` + +3. **Update Dependencies**: + ```bash + pnpm install + ``` + +4. **Restore Your Local Changes** (if any): + ```bash + git stash pop + ``` + +#### Troubleshooting Git Setup + +If you encounter issues: + +1. **Clean Installation**: + ```bash + # Remove node modules and lock files + rm -rf node_modules pnpm-lock.yaml + + # Clear pnpm cache + pnpm store prune + + # Reinstall dependencies + pnpm install + ``` + +2. **Reset Local Changes**: + ```bash + # Discard all local changes + git reset --hard origin/main + ``` + +Remember to always commit your local changes or stash them before pulling updates to avoid conflicts. --- @@ -236,4 +323,4 @@ Explore upcoming features and priorities on our [Roadmap](https://roadmap.sh/r/o ## FAQ -For answers to common questions, visit our [FAQ Page](FAQ.md). +For answers to common questions, issues, and to see a list of recommended models, visit our [FAQ Page](FAQ.md). diff --git a/app/commit.json b/app/commit.json deleted file mode 100644 index b9c669a7..00000000 --- a/app/commit.json +++ /dev/null @@ -1 +0,0 @@ -{ "commit": "eb6d4353565be31c6e20bfca2c5aea29e4f45b6d", "version": "0.0.3" } diff --git a/app/components/chat/APIKeyManager.tsx b/app/components/chat/APIKeyManager.tsx index 28847bc1..d4020486 100644 --- a/app/components/chat/APIKeyManager.tsx +++ b/app/components/chat/APIKeyManager.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react'; import { IconButton } from '~/components/ui/IconButton'; import type { ProviderInfo } from '~/types/model'; +import Cookies from 'js-cookie'; interface APIKeyManagerProps { provider: ProviderInfo; @@ -10,6 +11,23 @@ interface APIKeyManagerProps { labelForGetApiKey?: string; } +const apiKeyMemoizeCache: { [k: string]: Record } = {}; + +export function getApiKeysFromCookies() { + const storedApiKeys = Cookies.get('apiKeys'); + let parsedKeys = {}; + + if (storedApiKeys) { + parsedKeys = apiKeyMemoizeCache[storedApiKeys]; + + if (!parsedKeys) { + parsedKeys = apiKeyMemoizeCache[storedApiKeys] = JSON.parse(storedApiKeys); + } + } + + return parsedKeys; +} + // eslint-disable-next-line @typescript-eslint/naming-convention export const APIKeyManager: React.FC = ({ provider, apiKey, setApiKey }) => { const [isEditing, setIsEditing] = useState(false); diff --git a/app/components/chat/BaseChat.tsx b/app/components/chat/BaseChat.tsx index 2084cbb3..7e82b358 100644 --- a/app/components/chat/BaseChat.tsx +++ b/app/components/chat/BaseChat.tsx @@ -3,7 +3,7 @@ * Preventing TS checks with files presented in the video for a better presentation. */ import type { Message } from 'ai'; -import React, { type RefCallback, useEffect, useState } from 'react'; +import React, { type RefCallback, useCallback, useEffect, useState } from 'react'; import { ClientOnly } from 'remix-utils/client-only'; import { Menu } from '~/components/sidebar/Menu.client'; import { IconButton } from '~/components/ui/IconButton'; @@ -12,7 +12,7 @@ import { classNames } from '~/utils/classNames'; import { MODEL_LIST, PROVIDER_LIST, initializeModelList } from '~/utils/constants'; import { Messages } from './Messages.client'; import { SendButton } from './SendButton.client'; -import { APIKeyManager } from './APIKeyManager'; +import { APIKeyManager, getApiKeysFromCookies } from './APIKeyManager'; import Cookies from 'js-cookie'; import * as Tooltip from '@radix-ui/react-tooltip'; @@ -28,6 +28,10 @@ import { SpeechRecognitionButton } from '~/components/chat/SpeechRecognition'; import type { IProviderSetting, ProviderInfo } from '~/types/model'; import { ScreenshotStateManager } from './ScreenshotStateManager'; import { toast } from 'react-toastify'; +import StarterTemplates from './StarterTemplates'; +import type { ActionAlert } from '~/types/actions'; +import ChatAlert from './ChatAlert'; +import { LLMManager } from '~/lib/modules/llm/manager'; const TEXTAREA_MIN_HEIGHT = 76; @@ -58,6 +62,8 @@ interface BaseChatProps { setUploadedFiles?: (files: File[]) => void; imageDataList?: string[]; setImageDataList?: (dataList: string[]) => void; + actionAlert?: ActionAlert; + clearAlert?: () => void; } export const BaseChat = React.forwardRef( @@ -89,53 +95,21 @@ export const BaseChat = React.forwardRef( imageDataList = [], setImageDataList, messages, + actionAlert, + clearAlert, }, ref, ) => { const TEXTAREA_MAX_HEIGHT = chatStarted ? 400 : 200; - const [apiKeys, setApiKeys] = useState>(() => { - const savedKeys = Cookies.get('apiKeys'); - - if (savedKeys) { - try { - return JSON.parse(savedKeys); - } catch (error) { - console.error('Failed to parse API keys from cookies:', error); - return {}; - } - } - - return {}; - }); + const [apiKeys, setApiKeys] = useState>(getApiKeysFromCookies()); const [modelList, setModelList] = useState(MODEL_LIST); const [isModelSettingsCollapsed, setIsModelSettingsCollapsed] = useState(false); const [isListening, setIsListening] = useState(false); const [recognition, setRecognition] = useState(null); const [transcript, setTranscript] = useState(''); + const [isModelLoading, setIsModelLoading] = useState('all'); - useEffect(() => { - console.log(transcript); - }, [transcript]); - - useEffect(() => { - // Load API keys from cookies on component mount - try { - const storedApiKeys = Cookies.get('apiKeys'); - - if (storedApiKeys) { - const parsedKeys = JSON.parse(storedApiKeys); - - if (typeof parsedKeys === 'object' && parsedKeys !== null) { - setApiKeys(parsedKeys); - } - } - } catch (error) { - console.error('Error loading API keys from cookies:', error); - - // Clear invalid cookie data - Cookies.remove('apiKeys'); - } - + const getProviderSettings = useCallback(() => { let providerSettings: Record | undefined = undefined; try { @@ -155,10 +129,13 @@ export const BaseChat = React.forwardRef( Cookies.remove('providers'); } - initializeModelList(providerSettings).then((modelList) => { - setModelList(modelList); - }); + return providerSettings; + }, []); + useEffect(() => { + console.log(transcript); + }, [transcript]); + useEffect(() => { if (typeof window !== 'undefined' && ('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)) { const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); @@ -190,6 +167,65 @@ export const BaseChat = React.forwardRef( } }, []); + useEffect(() => { + if (typeof window !== 'undefined') { + const providerSettings = getProviderSettings(); + let parsedApiKeys: Record | undefined = {}; + + try { + parsedApiKeys = getApiKeysFromCookies(); + setApiKeys(parsedApiKeys); + } catch (error) { + console.error('Error loading API keys from cookies:', error); + + // Clear invalid cookie data + Cookies.remove('apiKeys'); + } + setIsModelLoading('all'); + initializeModelList({ apiKeys: parsedApiKeys, providerSettings }) + .then((modelList) => { + // console.log('Model List: ', modelList); + setModelList(modelList); + }) + .catch((error) => { + console.error('Error initializing model list:', error); + }) + .finally(() => { + setIsModelLoading(undefined); + }); + } + }, [providerList]); + + const onApiKeysChange = async (providerName: string, apiKey: string) => { + const newApiKeys = { ...apiKeys, [providerName]: apiKey }; + setApiKeys(newApiKeys); + Cookies.set('apiKeys', JSON.stringify(newApiKeys)); + + const provider = LLMManager.getInstance(import.meta.env || process.env || {}).getProvider(providerName); + + if (provider && provider.getDynamicModels) { + setIsModelLoading(providerName); + + try { + const providerSettings = getProviderSettings(); + const staticModels = provider.staticModels; + const dynamicModels = await provider.getDynamicModels( + newApiKeys, + providerSettings, + import.meta.env || process.env || {}, + ); + + setModelList((preModels) => { + const filteredOutPreModels = preModels.filter((x) => x.provider !== providerName); + return [...filteredOutPreModels, ...staticModels, ...dynamicModels]; + }); + } catch (error) { + console.error('Error loading dynamic models:', error); + } + setIsModelLoading(undefined); + } + }; + const startListening = () => { if (recognition) { recognition.start(); @@ -313,245 +349,272 @@ export const BaseChat = React.forwardRef( }}
- - - - - - - - - - - - - - - - - - -
-
- - {(providerList || []).length > 0 && provider && ( - { - const newApiKeys = { ...apiKeys, [provider.name]: key }; - setApiKeys(newApiKeys); - Cookies.set('apiKeys', JSON.stringify(newApiKeys)); - }} - /> - )} -
-
- { - setUploadedFiles?.(uploadedFiles.filter((_, i) => i !== index)); - setImageDataList?.(imageDataList.filter((_, i) => i !== index)); - }} - /> - - {() => ( - + {actionAlert && ( + clearAlert?.()} + postMessage={(message) => { + sendMessage?.({} as any, message); + clearAlert?.(); + }} /> )} - +
-