Firebase Studio의 Firebase MCP

1. 개요

이 Codelab에서는 Firebase Studio에서 Firebase MCP 서버와 함께 앱 프로토타이핑 에이전트를 사용하여 Firebase 실시간 데이터베이스를 사용하는 풀 스택 웹 앱을 만듭니다.

최종 앱의 애니메이션 GIF

학습할 내용

  • App Prototyping agent를 사용하여 정적 웹 앱 생성
  • Firebase MCP 서버 설정
  • Firebase MCP를 사용하여 Firebase 실시간 데이터베이스 추가

필요한 사항

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

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

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

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

3. Firebase Studio에서 Firebase MCP 설정

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

  1. Firebase Studio에서 스튜디오 코드 보기 아이콘코드로 전환을 클릭하여 코드 뷰를 엽니다.
  2. 터미널 (Shift+Ctrl+C)에서 다음 명령어를 실행하여 화면에 표시된 안내에 따라 Firebase 계정에 로그인하고 모든 기본 옵션을 그대로 둡니다.
    firebase login --no-localhost
    
  3. 탐색기 (Ctrl+Shift+E)에서 .idx 폴더를 마우스 오른쪽 버튼으로 클릭하고 새 파일을 선택합니다. 파일 이름을 mcp.json로 지정하고 Enter 키를 누릅니다.
  4. 서버 구성을 .idx/mcp.json에 추가합니다.
    {
        "mcpServers": {
            "firebase": {
                "command": "npx",
                "args": [
                    "-y",
                    "firebase-tools@latest",
                    "experimental:mcp"
                ]
            }
        }
    }
    
    Firebase MCP 서버에 연결되어 있는지 확인합니다. 'Gemini'가 올바른 채널로 선택된 상태로 출력 패널에 비슷한 로그 항목이 표시됩니다.Gemini 로그의 MCPManager

4. Firebase MCP를 사용하여 Firebase 실시간 데이터베이스 추가

목표 1: 앱에 Firebase 추가

  1. 프로토타이퍼로 전환 채팅 인터페이스에서 에이전트에게 프로젝트를 만들어 달라고 요청합니다.
    Create a Firebase project for my app.
    
    상담사가 Firebase MCP 도구 firebase_create_project를 호출해야 합니다.Gemini API 키를 얻기 위해 자동 생성 옵션을 사용하는 동안 Firebase 프로젝트를 이미 만든 경우 이 단계를 건너뛰세요. 화면 왼쪽 상단의 작업공간 이름 옆에 프로젝트 ID가 표시됩니다. 또는 상담사에게 프로젝트를 나열해 달라고 요청하고 사용할 프로젝트를 기록합니다.
    List my Firebase projects
    
    에이전트가 Firebase MCP 도구 firebase_list_projects를 호출할 것으로 예상합니다.
  2. 에이전트에게 이 프로젝트에 연결해 달라고 요청합니다.
    Connect my app to my project `spinsync-3y3c6`.
    
    활성 프로젝트를 설정하는 .firebaserc 파일이 표시되는지 확인합니다. 그렇지 않은 경우 에이전트에게 Firebase 환경을 업데이트해 달라고 요청하세요.
    Update my Firebase environment to use this project.
    
    에이전트가 Firebase MCP 도구 firebase_update_environment를 호출할 것으로 예상합니다 . 하지만 상담사가 도구를 호출하지 않고 이 작업을 완료할 수도 있습니다.마지막으로 Firebase 환경에 올바른 활성 프로젝트와 인증된 사용자가 있는지 확인합니다.
    Show me my current Firebase environment.
    
    에이전트가 Firebase MCP 도구 firebase_get_environment를 호출할 것으로 예상합니다.
  3. 상담사에게 Firebase 프로젝트에 웹 앱을 만들어 달라고 요청합니다.
    Create a web app in my active Firebase project.
    
    상담사가 firebase_create_app 도구를 호출하고 앱 ID를 반환할 것으로 예상합니다. 에이전트가 이를 수행하지 못하면 아이콘을 클릭하여 다시 시도하거나 안내에 따라 Firebase Console에서 단계를 완료하세요.
    Use the App ID to get the SDK configuration and add to my app.
    
    에이전트가 도구 firebase_get_sdk_config를 호출하고 Firebase 구성으로 코드를 업데이트할 것으로 예상됩니다.에이전트가 작업 완료를 선언한 후 API 키와 기타 구성이 src/lib/firebase.ts에 표시되면 앱을 안전하게 유지하기 위해 이를 이동해 달라고 요청하세요.
    Secure my code by moving my Firebase config to the `.env` file.
    

목표 2: Firebase 실시간 데이터베이스 추가

  1. 계속 사용하거나 Prototyper로 전환합니다. 채팅 인터페이스에서 에이전트에게 프로젝트에 Firebase 실시간 데이터베이스를 설정해 달라고 요청합니다.
    Set up Firebase Realtime Database in my active project. Give anyone
    read and write access.
    
    상담이 끝날 때 파일 변경의 일환으로 에이전트가 Firebase MCP 도구 firebase_init를 호출하고 database.rules.json에 보안 규칙을 생성할 것으로 예상됩니다.
    {
        "rules": {
            ".read": true,
            ".write": true
        }
    }
    
    여기에서 모든 사용자에게 데이터베이스에 대한 읽기 및 쓰기 액세스 권한을 부여합니다. 이 Codelab 외에서는 항상 데이터베이스를 보호해야 합니다. 문서에서 이 주제에 대해 자세히 알아보세요.
  2. 코드로 전환 터미널 (Shift+Ctrl+C)에서 Firebase 실시간 데이터베이스를 초기화합니다.
    firebase init database
    
    화면에 표시된 안내를 따르고 기본 옵션을 그대로 둡니다.그런 다음 데이터베이스 인스턴스의 보안 규칙을 배포합니다.
    firebase deploy --only database
    
  3. 프로토타이퍼로 전환 사용자 입력에 기본 데이터베이스 인스턴스를 사용하도록 에이전트에게 요청합니다.
    Use my default Realtime Database instance for user entries.
    
    앱을 데이터베이스 인스턴스에 연결하도록 에이전트가 나머지 소스 코드를 업데이트합니다.

목표 3: 테스트해 보기

  1. 선택기 휠에 새 항목을 몇 개 만들고 Firebase Console의 Firebase 실시간 데이터베이스 페이지에 표시되는지 확인합니다.

Firebase Console의 Firebase 실시간 데이터베이스

5. 결론

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

자세히 알아보기