Flutter Inspector MCP Server

by Arenukvern
Verified

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Integrations

  • Interfaces with Dart VM Service Protocol to access Flutter/Dart process information, retrieve version details, and monitor various event streams for debugging Flutter applications.

  • Connects to a Flutter app's debug mode to extract data about widget trees, render trees, layer trees, and semantics, enabling AI tools to provide context-aware assistance for Flutter app development.

AI 기반 개발을 위한 Flutter Inspector MCP 서버

GitHub 저장소

🔍 Flutter 앱을 Cursor, Claude, Cline과 같은 AI 코딩 어시스턴트와 연결하는 강력한 MCP(Model Context Protocol) 서버입니다.

⚠️ 이 프로젝트는 진행 중인 작업이며 모든 메서드(대부분 Flutter Inspector 관련)가 아직 구현되지 않았습니다.

현재 Flutter는 포워딩 서버를 통해 MCP 서버와 함께 작동합니다. 자세한 내용은 아키텍처를 참조하세요.

일부 다른 메서드는 테스트되지 않았습니다. 작동할 수도 있고 그렇지 않을 수도 있습니다. 주의해서 사용하세요. 나중에 대부분의 메서드가 MCP 서버에서 제거되어 Flutter 애플리케이션과 Jaspr에만 집중될 가능성이 있습니다.

⚠️ 경고 ⚠️

디버그 메서드는 막대한 토큰을 사용하여 컨텍스트를 오버로드할 수 있으며, 이제 "debug-tools" 매개변수에 포함됩니다. 운영 환경에서는 모든 디버그 메서드가 기본적으로 비활성화됩니다.

🚀 시작하기

🎯 상담원이 전화할 수 있는 곳:

  • [리소스|도구] 오류 분석 : 앱의 정확하고 간략한 오류를 파악합니다. 콘솔 메시지보다 나은 이유는 추적된 위젯 전체 목록이나 중복 정보가 아닌, 에이전트가 필요로 하는 정보만 정확하게 포함하기 때문입니다. 에이전트가 오류를 파악하는 데 가장 효과적입니다.
  • [리소스|도구] 스크린샷 : 앱 스크린샷을 가져옵니다. Claude에서만 작동합니다(테스트되지 않음). Cursor와 Cline은 응답에서 이미지 유형을 지원하지 않습니다.

구현될 예정입니다:

  • [리소스|도구] 앱 정보 : 화면 크기, 픽셀 비율. 에이전트가 위젯을 선택할 수 있는 기능을 제공합니다.
  • 핫 리로드 및 핫 재시작
  • [리소스|도구] 선택 도구 : 현재 아이디어:
    1. Flutter Inspector에서 위젯 선택을 활성화합니다.
    2. 논리적 픽셀 위치로 위젯을 선택하세요.
    3. 논리적 픽셀 위치를 기반으로 Flutter 앱의 구조에 대한 자세한 정보를 얻으세요.

연구에서:

  • 현재 경로 검사 : 현재 탐색 상태를 확인하세요
  • 확장 기능: Flutter Provider/Riverpod 상태 : Provider/Riverpod 인스턴스의 상태를 가져옵니다.
  • 확장자: Jaspr : ?
  • 확장자: Jaspr 제공자 : ?
  • 확장자: Flame : ?

📚 사용 가능한 도구

포트를 지정하지 않으면 모든 도구는 기본적으로 8181 포트를 사용합니다. 특정 포트 번호를 제공하여 이 포트를 재정의할 수 있습니다.

TOOLS.md 에 설명된 대부분의 도구

할 일: 유용한 방법에 대한 자세한 내용을 추가합니다.

🔧 문제 해결

다음 사항을 확인하세요.

  1. 전달 서버가 실행 중인지 확인하세요.
  2. 브라우저에서 Devtools를 열었습니다.
  3. Flutter 앱 개발 종속성에 MCP 확장 기능을 추가하고 Devtools에서 활성화했습니다.
  4. 연결 문제
    • Flutter 앱이 디버그 모드에서 실행 중인지 확인하세요.
    • Flutter 앱과 검사기 모두에서 포트 일치를 확인하세요.
    • 다른 프로세스에서 포트를 사용하고 있지 않은지 확인하세요
  5. AI 도구가 Inspector를 감지하지 못함
    • 구성 변경 후 AI 도구를 다시 시작합니다.
    • 구성 JSON 구문을 확인하세요
    • 연결 오류가 있는지 도구 로그를 확인하세요.

🚧 Smithery 통합 🚧 (작업 진행 중)

Flutter Inspector는 Smithery 레지스트리에 등록되어 있어 표준화된 인터페이스를 통해 다른 AI 도구에서 검색하고 사용할 수 있습니다.

통합 아키텍처

지엑스피1

🤝 기여하기

기여를 환영합니다! GitHub 저장소 에 풀 리퀘스트를 제출하거나 문제를 보고해 주세요.

📖 자세히 알아보기

📄 라이센스

MIT - 여러분의 프로젝트에 자유롭게 사용하세요!


플러터와 다트는 Google LLC의 상표입니다.

You must be authenticated.

A
security – no known vulnerabilities
A
license - permissive license
A
quality - confirmed to work

AI 코딩 어시스턴트(Cline, Cursor, Claude 등)에 위젯 트리, 내비게이션, 레이아웃 문제 분석 도구를 제공하여 Flutter 앱 디버깅을 목표로 하는 MCP 서버입니다. 작동 방식은 아키텍처 (https://github.com/Arenukvern/mcp_flutter/blob/main/ARCHITECTURE.md )를 참조하세요.

  1. ⚠️ WARNING ⚠️
    1. 🚀 Getting Started
      1. 🎯 What Agent can call:
        1. Will be implemented:
        2. In research:
      2. 📚 Available Tools
        1. 🔧 Troubleshooting
          1. 🚧 Smithery Integration 🚧 (work in progress)
            1. Integration Architecture
          2. 🤝 Contributing
            1. 📖 Learn More
              1. 📄 License
                ID: qnu3f0fa20