multi-model-bolt.new : modification open source basée sur Bolt.new, outils de développement full-stack pilotés par l'IA

Introduction générale

multi-model-bolt.new est une application basée sur le modèle Boulon.nouveau Une version modifiée de TogetherAI permet d'utiliser les modèles TogetherAI pour prendre en charge des fonctionnalités telles que le déploiement, la réponse mobile et la saisie vocale. Les utilisateurs peuvent lancer, exécuter, modifier et déployer des applications complètes directement dans le navigateur, sans configuration locale. L'outil s'intègre aux derniers modèles d'IA et aux conteneurs Web de StackBlitz pour offrir un contrôle complet de l'environnement de développement.

Édition Open Source :Boulon original multi-model-bolt.new : modification open source basée sur Bolt.new, outils de développement full-stack pilotés par l'IA

Une refonte de l'open source pour favoriser l'accès à tous les modèles : https://github.com/InnoBridge/bolt.new-any-llm

Quelle est la différence entre Bolt (cette base de code) et Bolt.new ?

• Boulon.nouveau: Ceci provient de StackBlitz.Produits commerciauxAI est un outil de développement hébergé, basé sur un navigateur, qui permet aux utilisateurs de créer, d'exécuter, d'éditer et de déployer des applications web complètes directement dans le navigateur. Il est basé sur Bibliothèque Open Source Bolt construit avec le logiciel StackBlitz API WebContainer Fournir un soutien.
• Bolt (cette base de code): Il s'agit d'une bibliothèque open source qui fournit les moyens de construire l'application Boulon.nouveau les composants de base nécessaires. La base de code contient Boulon l'interface utilisateur et les composants du serveur à l'aide de l'interface Remix Run Construire. En tirant parti de cette base de code et de l'expertise de StackBlitz en matière de API WebContainerVous pouvez créer vos propres outils de développement pilotés par l'IA et des applications complètes qui s'exécutent entièrement dans le navigateur.

Liste des fonctions

• Installer et utiliser les outils et bibliothèques npmSupport de frameworks populaires tels que Vite, Next.js, etc.
• Exécution du serveur Node.jsLe service d'arrière-plan : Exécuter le service d'arrière-plan directement dans le navigateur
• Interagir avec des API tiercesLes services d'aide à la décision : Intégration aisée de services externes
• Déploiement de l'environnement de chat vers l'environnement de productionRationaliser le processus de déploiement
• Partagez votre travail via l'URLFaciliter le travail d'équipe
• contrôle de l'environnementLes modèles d'IA ont un contrôle total sur les systèmes de fichiers, les serveurs de nœuds, les gestionnaires de paquets, les terminaux et les consoles de navigation.
• Réponse mobileConception réactive pour prendre en charge les appareils mobiles
• saisie vocaleLa fonction de saisie vocale a été ajoutée afin d'améliorer l'expérience de l'utilisateur

Utiliser l'aide

Bolt associe la puissance de l'IA à un environnement de développement de type "bac à sable" pour créer une expérience collaborative dans laquelle les assistants et les programmeurs peuvent travailler ensemble pour développer du code. API WebContainer,Claude Sonnet 3.5,Remix répondre en chantant AI SDK.

API WebContainer

Utilisation du boulon Conteneurs Web Exécuter le code généré dans le navigateur.WebContainers fournit un environnement sandbox complet qui utilise la technologie API WebContainer Les WebContainers permettent d'exécuter des applications complètes directement dans le navigateur, en évitant les problèmes de coût et de sécurité liés à l'hébergement d'un agent d'IA dans le nuage. Les WebContainers sont interactifs et modifiables, ce qui permet à l'IA de Bolt d'exécuter le code et de comprendre toutes les modifications apportées par l'utilisateur.

API WebContainer Gratuit pour une utilisation personnelle et les projets open source. Si vous créez une application à usage commercial, renseignez-vous sur notre Détails des prix pour l'utilisation commerciale de l'API WebContainer.

Application Remix

Utilisation du boulon Remix construit avec le Pages CloudFlare répondre en chantant Travailleurs de CloudFlare Déploiement.

Intégration du SDK AI

Utilisation du boulon AI SDK Intégration des modèles d'IA. Actuellement, Bolt prend en charge l'utilisation de Anthropique (utilisé comme expression nominale) Claude Sonnet 3.5. vous pouvez obtenir les informations à partir de la page Console API anthropique Obtenez une clé API à utiliser avec Bolt. Consultez la page Comment Bolt utilise le SDK AI.

pré-requis

Avant de commencer, assurez-vous d'avoir installé les éléments suivants :

• Node.js (v20.15.1)
• pnpm (v9.4.0)

Étapes de l'installation

1. Cloner le dépôt de code (si ce n'est pas déjà fait) :

git clone https://github.com/stackblitz/bolt.new.git

2. Installer la dépendance :

pnpm install

3. Configurer Supabase Auth et Providers :

• Créer un nouveau projet sur Supabase et générer une nouvelle clé anonyme (anon key).
• Ajouter la clé anonyme à la .env.local Documentation.
• Ajouter l'URL de Supabase à .env.local Documentation.
• Configurer les fournisseurs de Supabase (Google, GitHub, etc.).

4. Création du répertoire racine .env.local et ajoutez votre clé API Anthropic :

ANTHROPIC_API_KEY=your_api_key
TOGETHER_API_KEY=your_api_key

# SUPABASE
SUPABASE_URL=your_supabase_url
SUPABASE_ANON_KEY=your_anon_key
# Client Supabase
VITE_SUPABASE_URL=your_supabase_url
VITE_SUPABASE_ANON_KEY=your_anon_key

# NETLIFY
NETLIFY_AUTH_TOKEN=your_auth_token
NETLIFY_CLIENT_SECRET=your_client_secret
VITE_NETLIFY_CLIENT_ID=your_client_id

Facultatif : définir le niveau de débogage :

VITE_LOG_LEVEL=debug

Notes importantes: Veuillez ne pas placer .env.local est soumis au contrôle de version. Ce fichier est inclus dans le fichier .gitignore Au milieu.

Ajout de modèles personnalisés pour Together AI

Ajouter Ensemble Les modèles personnalisés de l'IA, qui peuvent être ajoutés à la base de données de l app/components/chat/ProviderSelector.tsx Documentation.

const togetherModels = [
'meta-llama/Meta-Llama-3.1-405B-Instruct-Turbo',
'meta-llama/Meta-Llama-3.1-70B-Instruct-Turbo',
'mistralai/Mixtral-8x7B-Instruct-v0.1',
'... add more models here ...'
];

Scripts disponibles

• pnpm run devDémarrer le serveur de développement (pour les tests locaux, Chrome Canary est recommandé).
• pnpm run build: Construire le projet.
• pnpm run start: Exécute localement une application construite à l'aide de Wrangler Pages. Ce script utilise l'option bindings.sh Définissez les liens nécessaires pour éviter de dupliquer la configuration des variables d'environnement.
• pnpm run previewLancer localement après la construction du projet pour tester les constructions de l'environnement de production. Notez que le streaming HTTP n'est pas disponible sur le serveur wrangler pages dev peut ne pas fonctionner correctement.
• pnpm test: Exécutez la suite de tests avec Vitest.
• pnpm run typecheck: Exécute la vérification de type TypeScript.
• pnpm run typegenWrangler : Utiliser Wrangler pour générer des types TypeScript.
• pnpm run deployLe projet doit être construit et déployé sur les pages Cloudflare.

exploiter (une ressource)

Pour démarrer le serveur de développement :

pnpm run dev

Ceci démarre le serveur de développement Remix Vite.

test (machines, etc.)

Exécuter la suite de tests :

pnpm test

déploiements

Déployer l'application sur Cloudflare Pages :

pnpm run deploy

Assurez-vous que vous disposez des autorisations nécessaires et que Wrangler a correctement configuré votre compte Cloudflare.

Fonction détaillée du déroulement des opérations

1. Installer et utiliser les outils et bibliothèques npm
   • Lors de la création du projet, sélectionnez les outils et bibliothèques npm nécessaires, tels que Vite, Next.js, etc.
   • Utilisez le gestionnaire de paquets intégré pour installer les dépendances et vous assurer que l'environnement du projet est correctement configuré.
2. Exécution du serveur Node.js
   • Écrire du code back-end dans un éditeur de code qui utilise les fonctionnalités fournies par Node.js.
   • Démarrez le serveur et voyez comment fonctionne le service back-end en temps réel.
3. Interagir avec des API tierces
   • Intégrer dans votre projet des API tierces telles que des interfaces de paiement, des services de cartographie, etc.
   • Simplifiez le processus d'interaction avec les services externes à l'aide des outils de gestion d'API intégrés.
4. Déploiement de l'environnement de chat vers l'environnement de production
   • Saisissez la commande de déploiement dans l'interface de discussion et le système déploiera automatiquement l'application dans l'environnement de production spécifié.
   • Une fois le déploiement terminé, l'URL d'accès à l'application est générée pour faciliter l'accès et les tests.
5. Partagez votre travail via l'URL
   • Génère une URL d'accès au projet une fois que celui-ci est terminé.
   • Partagez des URL avec les membres de votre équipe pour collaborer à un projet et obtenir des informations en retour.
6. contrôle de l'environnement
   • Le modèle IA a le contrôle total de l'environnement de développement, y compris le système de fichiers, le serveur de nœuds, le gestionnaire de paquets, le terminal et la console du navigateur.
   • Les utilisateurs peuvent configurer et gérer des environnements complexes à l'aide de simples commandes.
7. Réponse mobile
   • Le projet prend en charge par défaut la conception réactive pour les appareils mobiles, ce qui garantit un affichage cohérent sur tous les appareils.
   • Les utilisateurs peuvent personnaliser la mise en page et le style adaptés aux mobiles selon leurs besoins.
8. saisie vocale
   • Intégrer la fonction de saisie vocale dans le projet pour améliorer l'expérience d'interaction avec l'utilisateur.
   • Utilisez l'outil de reconnaissance vocale intégré pour convertir la parole en texte en vue d'un traitement ultérieur.