Mistral AI 소개 프로젝트를 로컬에서 실행하기

이 페이지를 사용하여 추출한 Mistral AI 소개 프로젝트를 컴퓨터에서 실행할 수 있습니다. Scrimba 전용 API 키 조회 방식을 Vite에 맞게 수정하고, 프로젝트를 시작한 뒤 브라우저 콘솔에서 함수 호출 결과를 확인합니다. 여기서의 키 처리 방식은 Chef Claude를 로컬에서 실행하기의 패턴과 같으므로, 두 페이지는 서로 다른 제공자를 위해 같은 문제를 해결합니다.

먼저 준비할 것

지원되는 LTS 버전의 Node.js를 설치하세요. Node 24를 권장하며, npm이 함께 제공됩니다.

Node와 npm이 설치되어 있는지 확인하세요:

bash

$ node --version
v24.18.0
$ npm --version
11.18.0

Mistral API 키도 필요합니다. 키가 없다면 Mistral의 Studio 키 설정을 따라 키를 만들고, 표시될 때 복사하세요. 이 페이지 뒷부분에서 로컬 환경 파일에 추가할 것입니다.

Juno먼저 준비할 것 npm이 포함된 Node.js의 LTS 버전을 설치하고 Mistral API 키를 만드세요. Studio가 키를 표시할 때 바로 복사해야 합니다. 그때가 전체 값을 볼 수 있는 유일한 시간이거든요. 저도 그 대화상자를 너무 빨리 닫아서 두 번째 키를 만들어야 한 적이 있습니다!

프로젝트 폴더 열기

package.json을 포함하는 추출된 폴더에서 터미널을 열으세요:

bash

$ cd path-to-your-downloaded-project

Juno프로젝트 폴더 열기package.json을 포함하는 추출된 폴더에서 작업하고, 모든 npm 명령을 그 폴더에서 실행하세요. 나중에 만들 환경 파일도 같은 폴더에 있어야 합니다. 이 단계에서 설정이 실패하는 가장 흔한 이유는 잘못된 폴더에서 명령을 실행하는 것이며, 한 가지 명령으로 어느 폴더에 있는지 확인할 수 있습니다.

Vite에서 API 키 작동하게 만들기

다운로드한 index.js는 Scrimba의 환경 문법으로 키를 읽습니다:

const client = new MistralClient(process.env.MISTRAL_API_KEY)

표준 Vite 브라우저 프로젝트는 process.env 값을 제공하지 않습니다. 이 줄을 다음과 같이 변경하세요:

const client = new MistralClient(import.meta.env.VITE_MISTRAL_API_KEY)

package.json 옆에 .env를 만드세요:

dotenv

VITE_MISTRAL_API_KEY=your-mistral-api-key-here

그 옆에 .gitignore를 만들고 다음을 추가하세요:

txt

.env
node_modules/

VITE_ 접두사는 Vite가 특수하게 접두사가 붙은 환경 변수만 브라우저 코드에 노출하기 때문에 필수입니다. 실수로 키를 Git에 추가하는 것은 파일을 삭제해도 되돌릴 수 없습니다. 값이 저장소 기록에 남아 있기 때문입니다. Git 안내서에서 이러한 광범위한 습관을 다룹니다. 파일 무시하기 및 좋은 습관.

이 키는 브라우저에서 볼 수 있습니다

VITE_ 접두사는 의도적으로 API 키를 프론트엔드 번들에 넣습니다. 로컬 학습용으로만 임시 제한된 키를 사용하세요. 이 버전을 배포하거나 공유하지 말고, .env를 커밋하지 마세요. 프로덕션 애플리케이션은 키를 서버에 유지하는 백엔드 또는 서버리스 함수가 필요합니다.

JunoVite에서 API 키 작동하게 만들기 이전 키 조회를 변경하고 임시 키를 .env에 넣은 뒤 그 파일을 Git에서 제외하세요. 브라우저가 여전히 이 키를 읽을 수 있으므로, 나중에 삭제해도 괜찮은 키를 사용하세요. 이런 노출은 설정 오류가 아니라 프론트엔드 전용 프로젝트의 제한입니다.

프로젝트 설치 및 실행

다운로드된 종속성을 설치하고 Vite를 시작하세요:

bash

$ npm install
$ npm start

Vite가 출력하는 정확한 Local URL을 열으세요. 보통 http://localhost:5173/입니다. 함수 호출 강의에서 브라우저의 개발자 도구를 열고 Console을 선택하세요. 거기서 반환된 Mistral 응답이 보이는 성공 결과입니다. 강의는 그 결과를 페이지에서 렌더링하지 않습니다.

.env를 변경한 후 Vite를 다시 시작하세요. Ctrl+C로 중지하세요.

Juno프로젝트 설치 및 실행npm install을 실행한 후 npm start를 실행하고 출력된 Local URL을 열으세요. 그 다음 브라우저 Console을 열어야 합니다. 함수 호출 강의가 거기에 답변을 출력하기 때문입니다. 빈 페이지처럼 보이는 것은 실패가 아니라 예상된 결과입니다.

문제 해결

process is not defined: Scrimba 스타일의 환경 읽기가 여전히 index.js에 있습니다. 위의 import.meta.env.VITE_MISTRAL_API_KEY 형식으로 교체하고 Vite를 다시 시작하세요.

키가 undefined이거나 인증이 실패합니다: 정확한 VITE_ 변수 이름을 확인하고, .env가 package.json 옆에 있는지 확인한 뒤 프로젝트를 다시 시작하세요. 키가 여전히 Mistral 계정에서 활성화되어 있는지 확인하세요.

모델을 사용할 수 없거나 SDK 요청이 실패합니다: 다운로드된 ZIP은 이전 Mistral SDK를 고정하고 mistral-large-latest를 요청합니다. 제공자 SDK와 모델 카탈로그는 변합니다. index.js의 모델 ID를 Mistral 문서의 나열된 모델과 비교하고 ID를 변경하세요. 고정된 SDK 버전을 먼저 변경하기 전에 ID를 변경하세요. 이름이 바뀐 모델이 더 흔한 원인이기 때문입니다.

페이지에 아무것도 나타나지 않습니다: 브라우저 콘솔을 열으세요. 대표적인 함수 호출 강의는 최종 응답을 페이지에서 렌더링하지 않고 거기에 기록합니다.

이 프로젝트를 발행하고 싶다면: 이 프론트엔드 전용 버전을 발행하지 마세요. 먼저 Mistral 호출과 자격증명을 백엔드로 이동하세요.

Juno문제 해결VITE_ 이름, .env가 있는 위치, 모델 ID, 브라우저 Console을 확인한 후 다시 시작하세요. 여러 가지를 한 번에 바꾸지 말고 하나씩 검토하세요. 그러나 이 버전이 컴퓨터에서 얼마나 잘 실행되든 발행하지 마세요.

Mistral AI 소개 프로젝트를 로컬에서 실행하기 ​

먼저 준비할 것 ​

프로젝트 폴더 열기 ​

Vite에서 API 키 작동하게 만들기 ​

프로젝트 설치 및 실행 ​

문제 해결 ​

Mistral AI 소개 프로젝트를 로컬에서 실행하기

먼저 준비할 것

프로젝트 폴더 열기

Vite에서 API 키 작동하게 만들기

프로젝트 설치 및 실행

문제 해결