현지화된 읽기 가이드
ui-widget-developer목적, 사용법 및 출처
OpenAI Apps SDK 또는 MCP Apps SDK 위젯 렌더링 지원(모든 언어)을 사용하여 Copilot Chat용 MCP 서버를 구축합니다. 이 스킬은 다음과 같은 경우에 사용합니다. - M과 통합되는 MCP 서버를 만들 때.365Copilot 선언적 에이전트 - Copilot 채팅에서 렌더링되는 풍부한 대화형 위젯 구축(React + Fluent UI) - 위젯 렌더링을 위해 structuredContent를 반환하는 도구 구현 - 기존 MCP 서버를 Copilot 위젯 렌더링을 지원하도록 수정 - localhost MCP 서버 노출을 위한 개발 터널 설정 - 구성mcpPlugin.jsRemoteMCPServer 런타임을 사용하는 매니페스트에 대해 이 스킬을 일반적인 에이전트 개발(스캐폴딩, 매니페스트, 배포)에 사용하지 마십시오. 대신 declarative-agent-developer를 사용하십시오. 이 스킬은 MCP 서버 및 위젯 개발에만 사용됩니다. 트리거: "Copilot용 MCP 서버", "OpenAI Apps SDK", "Copilot 위젯", "structuredContent", "MCP 플러그인", "devtunnels MCP", "OAI 앱", "위젯 렌더링", "UI 위젯"
출처 검색됨:
- 소스 저장소
- microsoft/skills
- SKILL.md
.github/plugins/microsoft-365-agents-toolkit/skills/ui-widget-developer/SKILL.md- 저장소 Star
- 3,157
- 저장소 최근 업데이트
- 2026-10-31
- 능력 분류
- 에이전트 워크플로
- 최근 수집 시간
라이선스: MIT
워크플로 발췌본은 이해를 돕기 위한 자료이며, Codez에서 제공하는 실행 가능한 명령어가 아닙니다. 이 페이지를 생성하는 데 타사 Skill은 사용되지 않았습니다.
아래의 목적 및 워크플로 관련 내용은 읽기 쉽도록 정리 및 번역된 상위 자료입니다. 이는 별도로 분류된 Codez 편집 분석과는 별개입니다.
이 스킬의 기능
OpenAI Apps SDK 또는 MCP Apps SDK 위젯 렌더링 지원(모든 언어)을 사용하여 Copilot Chat용 MCP 서버를 구축합니다. 이 스킬은 다음과 같은 경우에 사용합니다. - M과 통합되는 MCP 서버를 만들 때.365Copilot 선언적 에이전트 - Copilot 채팅에서 렌더링되는 풍부한 대화형 위젯 구축(React + Fluent UI) - 위젯 렌더링을 위해 structuredContent를 반환하는 도구 구현 - 기존 MCP 서버를 Copilot 위젯 렌더링을 지원하도록 수정 - localhost MCP 서버 노출을 위한 개발 터널 설정 - 구성mcpPlugin.jsRemoteMCPServer 런타임을 사용하는 매니페스트에 대해 이 스킬을 일반적인 에이전트 개발(스캐폴딩, 매니페스트, 배포)에 사용하지 마십시오. 대신 declarative-agent-developer를 사용하십시오. 이 스킬은 MCP 서버 및 위젯 개발에만 사용됩니다. 트리거: "Copilot용 MCP 서버", "OpenAI Apps SDK", "Copilot 위젯", "structuredContent", "MCP 플러그인", "devtunnels MCP", "OAI 앱", "위젯 렌더링", "UI 위젯"
업스트림 워크플로우 작동 방식
빠른 시작
단말기1- MCP 서버 시작: 터미널2- DevTunnel 시작: 처음 실행 시 터널이 설정되면 에이전트를 프로비저닝합니다(에이전트 프로비저닝 규칙 참조). 이후 실행 시에는 터널 URL이 고정되어 있으므로 에이전트 매니페스트가 변경되지 않는 한 다시 프로비저닝할 필요가 없습니다.
상류 통로 · L384 ↗개발 워크플로우
MCP 서버 시작(핫 리로드 기능이 있는 개발 모드): TypeScript:cd mcp-server && npm install && npm run dev파이썬:cd mcp-server && pip install -r requirements.txt && python server.py기음#:cd mcp-server && dotnet run
🚨 중요 실행 규칙 🚨
Fluent UI 강제 적용(필수): 위젯 구현은 반드시 React와 Fluent UI 컴포넌트를 사용해야 합니다. 위젯 코드를 작성하기 전에 에이전트는 다음 사항을 읽고 준수해야 합니다.references/best-practices.mdFluent UI 패키지 요구 사항(필수): 위젯 프로젝트는 구현 전에 Fluent UI 종속성을 반드시 포함해야 합니다. 최소한 다음 패키지들을 위젯 패키지 종속성에 설치하고 유지해야 합니다. 이러한 패키지 중 하나라도 누락된 경우, 위젯 코드 생성을 계속하기 전에 자동으로 설치해야 합니다. 생성된 위젯에 React 진입 파일(예: react-app.js)이 포함되지 않은 경우widgets/src//main.tsx(그리고 React 컴포넌트 파일) 및 Fluent에서 가져오기@fluentui/react-components해당 작업은 미완성 상태이며 결과를 반환하기 전에 반드시 수정해야 합니다.
export ATK_CLI_SKILL=true요구 사항 및 설정
DevTunnels 설정
로컬 테스트 전용입니다. DevTunnels는 사용자의 컴퓨터에서 개발 및 테스트를 위한 것입니다. 에이전트를 더 광범위하게 공유하기 전에 MCP 서버와 위젯 자산을 호스팅 환경(예: Azure App Service, Azure Static Web Apps 또는 다른 호스팅 공급자)에 배포하고 에이전트 매니페스트 URL을 accordingly 업데이트하십시오. DevTunnels는 로컬 호스트의 MCP 서버를 M에 노출합니다.365Copilot은 안정적인 URL을 위해 명명된 터널을 사용합니다. 자세한 내용은 다음을 참조하세요.references/devtunnels.md설치 스크립트, 명령어 참조 및 문제 해결에 사용하세요.
상류 통로 · L372 ↗제한 사항 및 품질 검사
이 파일에서 별도의 제한 조건 구문이 선택되지 않았습니다. 이는 해당 스킬이 모든 입력 또는 환경에서 안전하다는 것을 의미하지 않습니다. 전체 소스 코드를 검토하고 결과를 직접 확인하십시오.
안전한 시험 사용부터 시작하세요
- 지원되는 호스트와 저장소 설치 지침을 확인하세요. 스킬 디렉토리와 해당 디렉토리에서 참조하는 스크립트, 자산 및 문서를 함께 보관하세요.SKILL.md단독으로는 종속성을 생략할 수 있습니다.
- 에이전트에 실제 입력값, 원하는 출력값 및 승인 기준을 제공하십시오. 호출 구문 및 사용 가능한 도구는 호스트에 따라 다르므로 이 사이트는 범용 설치 명령을 제공하지 않습니다.
- 원본 워크플로를 임시 프로젝트 또는 복사본에서 테스트해 보세요. 파일, 원격 서비스 또는 유료 리소스를 변경하는 작업은 허용하기 전에 검토하십시오.
- 출력 결과를 원본 품질 검사 및 자체 요구 사항에 맞춰 검증하십시오. 트리거가 성공적으로 작동했거나 저장소의 별점 수가 높다고 해서 반드시 올바른 결과가 나오는 것은 아닙니다.
원문에서 더 자세한 내용을 읽어보세요.
관련 기술
번역 및 범위
이 독서 안내서는 고정된 상류 지역에서 발췌한 구절들을 소개합니다.SKILL.md본 번역은 보조 번역이며, 완전한 설명서 또는 호환성 테스트를 보장하는 것은 아닙니다. 사용 전에 원본 및 참조 파일을 반드시 읽어 주십시오.
이 소개글은 아래 고정된 버전을 참조하며, 현재 저장소 활동 및 수집 시간은 별도로 표시됩니다.
- 고정된 소스
- 원문을 읽어보세요 ↗
- 출처 검색됨
- 소스 커밋
00d66a64919edca5bca2c673373444e36a4b5461- 출처 SHA-256
b24d0babae9e85054d30765abca0043a2c310ba7dc980d1da258c39b87f8cd12