multi-model-bolt.new: AI 기반 풀스택 개발 도구인 Bolt.new에 기반한 오픈 소스 수정 버전

일반 소개

multi-model-bolt.new는 다음을 기반으로 하는 애플리케이션입니다. Bolt.new TogetherAI의 수정된 버전을 사용하면 배포, 모바일 응답 및 음성 입력과 같은 기능을 지원하는 TogetherAI 모델을 사용할 수 있습니다. 사용자는 로컬 설정 없이 브라우저에서 직접 풀스택 애플리케이션을 프롬프트, 실행, 편집, 배포할 수 있습니다. 이 도구는 최신 AI 모델 및 StackBlitz의 WebContainer와 통합되어 개발 환경을 완벽하게 제어할 수 있습니다.

오픈 소스 에디션:볼트 오리지널 multi-model-bolt.new: AI 기반 풀스택 개발 도구인 Bolt.new에 기반한 오픈 소스 수정 버전

모든 모델에 대한 액세스를 지원하기 위한 오픈 소스 개편: https://github.com/InnoBridge/bolt.new-any-llm

Bolt(이 코드 베이스)와 Bolt.new의 차이점은 무엇인가요?

• Bolt.new스택블리츠에서 가져온 자료입니다.상업용 제품AI는 사용자가 브라우저에서 직접 풀스택 웹 애플리케이션을 프롬프트, 실행, 편집 및 배포할 수 있는 호스팅된 브라우저 기반 AI 개발 도구입니다. 다음을 기반으로 합니다. Bolt 오픈 소스 라이브러리 스택블리츠의 웹 컨테이너 API 지원을 제공하세요.
• 볼트(이 코드 베이스)오픈 소스 라이브러리입니다. Bolt.new 필수 핵심 컴포넌트입니다. 코드 베이스에는 다음이 포함됩니다. 볼트 사용자 인터페이스 및 서버 구성 요소를 사용하여 리믹스 실행 빌드. 이 코드 베이스와 스택블리츠의 웹 컨테이너 API브라우저에서 완전히 실행되는 나만의 AI 기반 개발 도구와 풀스택 애플리케이션을 만들 수 있습니다.

기능 목록

• npm 도구 및 라이브러리 설치 및 실행하기Vite, Next.js 등과 같은 인기 프레임워크 지원
• Node.js 서버 실행: 브라우저에서 직접 백엔드 서비스 실행
• 타사 API와 상호 작용하기: 외부 서비스의 손쉬운 통합
• 채팅에서 프로덕션 환경으로 배포배포 프로세스 간소화
• URL을 통해 작업물 공유팀워크 촉진
• 환경 제어AI 모델은 파일 시스템, 노드 서버, 패키지 관리자, 터미널 및 브라우저 콘솔을 완벽하게 제어할 수 있습니다.
• 모바일 응답모바일 기기를 지원하는 반응형 디자인
• 음성 입력사용자 경험 향상을 위한 음성 입력 기능 추가

도움말 사용

Bolt는 AI의 강력한 기능을 샌드박스 개발 환경과 결합하여 어시스턴트와 프로그래머가 함께 코드를 개발할 수 있는 협업 환경을 제공합니다. 웹 컨테이너 API및클로드 소네트 3.5및리믹스 노래로 응답 AI SDK.

웹 컨테이너 API

볼트 사용 웹 컨테이너 생성된 코드를 브라우저에서 실행합니다.WebContainer는 풀스택 샌드박스 환경을 제공합니다. 웹 컨테이너 API 웹 컨테이너를 사용하면 풀스택 애플리케이션을 브라우저에서 직접 실행할 수 있으므로 클라우드에서 AI 에이전트를 호스팅하는 데 드는 비용과 보안 문제를 피할 수 있습니다. 웹 컨테이너는 대화형이며 편집이 가능하므로 Bolt의 AI가 코드를 실행하고 사용자가 변경한 사항을 이해할 수 있습니다.

웹 컨테이너 API 개인용 및 오픈 소스 프로젝트는 무료입니다. 상업적 용도의 애플리케이션을 개발하는 경우, 다음 내용을 자세히 알아보세요. WebContainer API의 상업적 사용에 대한 가격 세부 정보.

리믹스 애플리케이션

볼트 사용 리믹스 로 구성된 CloudFlare 페이지 노래로 응답 CloudFlare 워커 배포.

AI SDK 통합

볼트 사용 AI SDK AI 모델 통합. 현재 Bolt는 다음의 사용을 지원합니다. 인류학 (명목식 형태로 사용됨) Claude 소네트 3.5에서 정보를 얻을 수 있습니다. 인트로픽 API 콘솔 Bolt에서 사용할 API 키를 받으세요. 자세한 내용은 Bolt가 AI SDK를 사용하는 방법.

사전 요구 사항

시작하기 전에 다음을 설치했는지 확인하세요:

• Node.js(v20.15.1)
• PNPM(V9.4.0)

설정 단계

1. 코드 리포지토리를 복제합니다(아직 복제하지 않은 경우):

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

2. 종속성을 설치합니다:

pnpm install

3. Supabase 인증 및 공급자를 설정합니다:

• Supabase에서 새 프로젝트를 만들고 새 익명 키(익명 키)를 생성합니다.
• 익명 키를 .env.local 문서화.
• 다음에 Supabase URL을 추가합니다. .env.local 문서화.
• Supabase 공급자(Google, GitHub 등)를 구성합니다.

4. 루트 디렉터리 만들기 .env.local 파일을 열고 Anthropic API 키를 추가합니다:

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

선택 사항: 디버그 수준을 설정합니다:

VITE_LOG_LEVEL=debug

중요 참고 사항배치하지 마세요 .env.local 파일은 버전 관리에 커밋됩니다. 이 파일은 .gitignore 가운데.

Together AI를 위한 사용자 지정 모델 추가

추가하려면 함께 AI의 사용자 지정 모델에 추가할 수 있는 app/components/chat/ProviderSelector.tsx 문서화.

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 ...'
];

사용 가능한 스크립트

• pnpm run dev개발 서버를 시작합니다(로컬 테스트의 경우 Chrome Canary를 권장합니다).
• pnpm run build: 프로젝트를 빌드합니다.
• pnpm run start: 랭글러 페이지를 사용하여 빌드된 애플리케이션을 로컬에서 실행합니다. 이 스크립트는 bindings.sh 환경 변수의 구성이 중복되지 않도록 필요한 바인딩을 설정하세요.
• pnpm run preview프로덕션 환경 빌드 테스트를 위해 프로젝트를 빌드한 후 로컬에서 시작하세요. HTTP 스트리밍을 사용할 수 없습니다. wrangler pages dev 가 제대로 작동하지 않을 수 있습니다.
• pnpm test: Vitest로 테스트 스위트를 실행합니다.
• pnpm run typecheck: TypeScript 유형 검사를 실행합니다.
• pnpm run typegen랭글러를 사용하여 타입스크립트 유형을 생성합니다.
• pnpm run deploy: 프로젝트를 빌드하고 Cloudflare 페이지에 배포합니다.

익스플로잇(리소스)

개발 서버를 시작하려면 다음과 같이 하세요:

pnpm run dev

그러면 리믹스 바이테 개발 서버가 시작됩니다.

테스트(기계 등)

테스트 스위트를 실행합니다:

pnpm test

배포

Cloudflare 페이지에 애플리케이션을 배포합니다:

pnpm run deploy

필요한 권한이 있고 랭글러가 Cloudflare 계정을 올바르게 구성했는지 확인하세요.

세부 기능 작동 흐름

1. npm 도구 및 라이브러리 설치 및 실행하기
   • 프로젝트 생성 시 Vite, Next.js 등과 같은 필요한 npm 도구 및 라이브러리를 선택합니다.
   • 기본 제공 패키지 관리자를 사용하여 종속 요소를 설치하고 프로젝트 환경이 올바르게 구성되었는지 확인하세요.
2. Node.js 서버 실행
   • Node.js에서 제공하는 기능을 사용하는 코드 편집기에서 백엔드 코드를 작성하세요.
   • 서버를 시작하고 백엔드 서비스가 실시간으로 어떻게 작동하는지 확인하세요.
3. 타사 API와 상호 작용하기
   • 결제 인터페이스, 지도 서비스 등의 타사 API를 프로젝트에 통합하세요.
   • 기본 제공 API 관리 도구를 사용하여 외부 서비스와 상호 작용하는 프로세스를 간소화하세요.
4. 채팅에서 프로덕션 환경으로 배포
   • 채팅 인터페이스에 배포 명령을 입력하면 시스템이 지정된 프로덕션 환경에 애플리케이션을 자동으로 배포합니다.
   • 배포가 완료되면 애플리케이션에 대한 액세스 URL이 생성되어 쉽게 액세스하고 테스트할 수 있습니다.
5. URL을 통해 작업물 공유
   • 프로젝트가 완료된 후 프로젝트에 대한 액세스 URL을 생성합니다.
   • 프로젝트 협업 및 피드백을 위해 팀원들과 URL을 공유하세요.
6. 환경 제어
   • AI 모델은 파일 시스템, 노드 서버, 패키지 관리자, 터미널 및 브라우저 콘솔을 포함한 개발 환경을 완벽하게 제어할 수 있습니다.
   • 사용자는 간단한 명령어로 복잡한 환경 구성 및 관리를 완료할 수 있습니다.
7. 모바일 응답
   • 이 프로젝트는 기본적으로 모바일 디바이스용 반응형 디자인을 지원하여 여러 디바이스에서 일관된 디스플레이를 보장합니다.
   • 사용자는 필요에 따라 모바일 반응형 레이아웃과 스타일을 사용자 지정할 수 있습니다.
8. 음성 입력
   • 프로젝트에 음성 입력 기능을 통합하여 사용자 인터랙션 경험을 향상하세요.
   • 내장된 음성 인식 도구를 사용하여 음성을 텍스트로 변환하여 후속 처리를 할 수 있습니다.