이 페이지는 Cloud Translation API를 통해 번역되었습니다.

Firebase Studio의 Firebase MCP

1. 개요

이 Codelab에서는 Firebase Studio에서 Firebase MCP 서버와 함께 앱 프로토타입 제작 에이전트를 사용하여 Firestore를 사용하는 풀 스택 웹 앱을 만듭니다.

최종 앱의 애니메이션 GIF

학습할 내용

App Prototyping agent를 사용하여 정적 웹 앱 생성
Firebase MCP 서버 설정
Firebase MCP를 사용하여 Firestore 추가

필요한 사항

원하는 브라우저(예: Chrome)
Firebase 프로젝트를 만들고 관리할 Google 계정

2. App Prototyping agent를 사용하여 앱 생성

앱 프로토타이핑 에이전트는 Firebase의 Gemini를 사용하여 앱을 빌드합니다. 동일한 프롬프트를 사용하더라도 결과는 다를 수 있습니다. 막히는 부분이 있으면 이 Codelab 전반의 여러 체크포인트에서 실습을 진행할 수 있도록 워크스페이스에 추가할 수 있는 파일 세트가 제공됩니다.

Google 계정에 로그인하고 Google 개발자 프로그램에 가입한 후 Firebase Studio를 엽니다.
AI로 앱 프로토타입 제작 필드에 앱에 대한 설명을 입력합니다.
```
An app for a picker wheel that allows custom input.
```
프롬프트 개선을 클릭합니다. 개선된 프롬프트를 검토합니다.
AI로 프로토타입 제작을 클릭합니다.
추천 앱 청사진을 검토합니다. 맞춤설정을 클릭하여 수정합니다.
저장을 클릭합니다.
청사진에 업데이트가 반영되면 이 앱에 프로토타입 제작을 클릭합니다.
블루프린트에 AI 요소가 포함되어 있으면 에이전트가 Gemini Gemini 키를 묻는 메시지를 표시합니다. 자체 Gemini API 키를 추가하거나 자동 생성을 클릭하여 Gemini API 키를 생성합니다. 자동 생성을 클릭하면 Firebase 스튜디오에서 Firebase 프로젝트를 만들고 Gemini API 키를 생성합니다.
앱 프로토타이핑 에이전트는 청사진을 사용하여 앱의 첫 번째 버전을 만듭니다. 완료되면 Gemini 채팅 인터페이스와 함께 앱 미리보기가 표시됩니다. 잠시 시간을 내어 앱을 검토하고 테스트하세요. 오류가 발생하면 채팅에서 오류 수정을 클릭하여 상담사가 자체 오류를 수정할 수 있도록 허용하세요.

3. Firebase Studio에서 Firebase MCP 설정

Firebase MCP 서버는 에이전트가 호출하여 Firebase 인증, Cloud Firestore, Firebase Data Connect를 비롯한 Firebase 서비스에서 데이터를 설정, 관리, 가져올 수 있는 도구를 제공하여 앱 프로토타이핑 에이전트의 기능을 확장합니다. 설정 방법은 다음과 같습니다.

Firebase Studio에서 코드로 전환을 클릭하여 코드 뷰를 엽니다.
터미널 (Shift+Ctrl+C)에서 다음 명령어를 실행하여 화면에 표시된 안내에 따라 Firebase 계정에 로그인하고 모든 기본 옵션을 그대로 둡니다.
```
firebase login --no-localhost
```
탐색기 (Ctrl+Shift+E)에서 .idx 폴더를 마우스 오른쪽 버튼으로 클릭하고 새 파일을 선택합니다. 파일 이름을 mcp.json로 지정하고 Enter 키를 누릅니다.

서버 구성을 .idx/mcp.json에 추가합니다.

{
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}

Firebase MCP 서버에 연결되어 있는지 확인합니다. 'Gemini'가 올바른 채널로 선택된 상태로 출력 패널에 비슷한 로그 항목이 표시됩니다. Gemini 로그의 MCPManager

4. Firebase MCP를 사용하여 Firestore 추가

목표 1: 앱에 Firebase 추가

프로토타이퍼로 전환 채팅 인터페이스에서 에이전트에게 Firebase 프로젝트를 만들어 달라고 요청합니다.
```
Create a Firebase project.
```
자동 생성 옵션을 사용하여 Gemini API 키를 가져오는 동안 Firebase 프로젝트를 이미 만든 경우 이 단계를 건너뛰세요. 화면 왼쪽 상단의 작업공간 이름 옆에 프로젝트 ID가 표시됩니다. 또는 상담사에게 프로젝트를 나열해 달라고 요청하고 사용할 프로젝트를 기록합니다.
```
List my Firebase projects.
```
에이전트가 Firebase MCP 도구 firebase_list_projects를 호출할 것으로 예상합니다.
에이전트에게 로컬 개발에 Firebase 프로젝트를 사용해 달라고 요청합니다.
```
Use `spinsync-3y3c6` as my Firebase project in my local environment.
```
기본 Firebase 프로젝트를 설정하는 .firebaserc 파일이 표시되는지 확인합니다. 이 파일은 Firebase CLI에 사용할 Firebase 프로젝트를 알려줍니다. 이 파일이 표시되지 않으면 이 파일을 다시 요청하세요.
상담사에게 Firebase 프로젝트에 웹 앱을 만들어 달라고 요청합니다.
```
Create a web app in my Firebase project.
```
에이전트가 도구 firebase_create_app을 호출해야 합니다. 에이전트가 이 작업을 수행하지 못하면 다시 시도하거나 이 안내에 따라 Firebase Console에서 단계를 완료하세요.에이전트가 firebase_get_sdk_config 도구를 호출하고 프로젝트를 Firebase 웹 앱에 연결하는 데 필요한 파일을 만들 수 있습니다. 그렇지 않은 경우 그렇게 하도록 프롬프트를 표시하세요.
```
Add my Firebase SDK configuration to my app.
```
에이전트는 API 키와 기타 구성을 src/lib/firebase.ts에 직접 넣는 경우가 많습니다. 앱 보안을 위해 애플리케이션 코드에서 이동해 달라고 요청하세요.
```
Secure my code by moving my Firebase config to my `.env` file.
```

목표 2: Firestore 추가

코드로 전환 채팅 인터페이스에서 에이전트에게 앱에서 Firestore를 사용해 달라고 요청합니다.
```
Use Firestore for user entries. Give anyone read and write access.
```
에이전트가 사용자 항목에 로컬 저장소 대신 Firestore를 사용하도록 소스 코드를 업데이트하고 Firestore 보안 규칙을 생성할 것으로 예상됩니다. Firebase MCP 도구 firebase_init를 호출하거나 터미널에서 firebase init 명령어를 실행하여 Firestore를 초기화하라는 메시지가 표시될 수 있습니다. 어떤 경우든 계속하기 전에 다음 콘텐츠가 포함된 firestore.rules 파일이 표시되는지 확인하세요.
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
```
여기에서 모든 사용자에게 데이터베이스에 대한 읽기 및 쓰기 액세스 권한을 부여합니다. 이 Codelab 외부에서는 항상 데이터베이스를 보호해야 합니다. 문서에서 이 주제에 대해 자세히 알아보세요.
터미널 (Shift+Ctrl+C)에서 상담사가 이전에 메시지를 표시하지 않은 경우 Firestore를 초기화합니다.
```
firebase init firestore
```
화면에 표시된 안내를 따르고 기본 옵션을 그대로 둡니다. 이전 단계의 보안 규칙을 덮어쓰지 마세요.그런 다음 데이터베이스 인스턴스의 보안 규칙을 배포합니다.
```
firebase deploy --only firestore
```
이렇게 하면 Firestore 데이터베이스 인스턴스가 프로비저닝됩니다.

목표 3: 테스트해 보기

앱을 새로고침하고 선택기 휠에서 항목을 만들고 삭제한 후 Firebase Console의 Firestore 페이지에서 이러한 업데이트를 확인합니다.

스튜디오 및 콘솔의 앱

5. 결론

수고하셨습니다. Firebase MCP를 사용하여 App Prototyping agent로 풀 스택 웹 앱을 만들었습니다. Firebase MCP 서버에서 제공하는 다른 도구를 사용해 보고 앱에서 할 수 있는 작업을 확장해 보세요.