Menü
DeskWeb LLM/AI 통합 스킬. 브라우저 내 WebLLM 또는 외부 LLM API를 활용하는 기능 구현시 사용. 사용 사례: (1) 챗봇 앱에 LLM 연동시, (2) 게임 AI에 LLM 프롬프트 설계시, (3) AI-OS 기능(앱 제어, 자동화)시, (4) WebLLM 브라우저 내 모델 로드시, (5) 스트리밍 응답 구현시.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Basierend auf der SOC-Berufsklassifikation
DeskWeb 일반 애플리케이션 생성 스킬. qooxdoo 프레임워크 기반 윈도우 앱(메모장, 엑셀, HWP뷰어, iframe앱 등)을 추가할 때 사용. 사용 사례: (1) 새로운 윈도우 앱 추가시, (2) 파일 연동 앱 구현시, (3) 외부 라이브러리 통합 앱 구현시, (4) iframe 기반 외부 URL 앱 추가시.
DeskWeb 프로젝트 컨벤션 및 공통 패턴 스킬. 프로젝트 구조, 빌드, 테스트, 스토리지, 테마, 아이콘 관리 등 공통 규칙 참조시 사용. 사용 사례: (1) 프로젝트 구조/컨벤션 확인시, (2) 빌드/배포 절차시, (3) 스토리지/세션 관리시, (4) 아이콘/테마 커스텀시, (5) 바탕화면 기능 추가시.
DeskWeb 게임 애플리케이션 생성 스킬. qooxdoo 프레임워크 내에서 Canvas/Three.js 기반 게임을 구현할 때 사용. 사용 사례: (1) 2D Canvas 기반 카드/보드 게임 구현시, (2) Three.js 3D 게임 구현시, (3) 게임 AI(LLM) 통합시, (4) 게임 상태 관리/저장시.
| name | deskweb-llm |
| description | DeskWeb LLM/AI 통합 스킬. 브라우저 내 WebLLM 또는 외부 LLM API를 활용하는 기능 구현시 사용. 사용 사례: (1) 챗봇 앱에 LLM 연동시, (2) 게임 AI에 LLM 프롬프트 설계시, (3) AI-OS 기능(앱 제어, 자동화)시, (4) WebLLM 브라우저 내 모델 로드시, (5) 스트리밍 응답 구현시. |
| author | DeskWeb Team |
| date | "2026-03-07T00:00:00.000Z" |
prompt/deskweb/agent.md// API 엔드포인트
var url = "https://mcp.webnori.com/api/llm/chat/completions";
// 비스트리밍 요청
var req = new qx.io.request.Xhr(url, "POST");
req.setRequestHeader("Content-Type", "application/json");
req.setRequestData(JSON.stringify({
model: "openai/gpt-oss-20b",
messages: [
{ role: "system", content: "You are a helpful assistant. Respond in Markdown format." },
{ role: "user", content: userMessage }
],
max_tokens: 5000,
temperature: 0.7,
stream: false
}));
// stream: true 로 요청
fetch(url, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
model: "openai/gpt-oss-20b",
messages: messages,
max_tokens: 5000,
temperature: 0.7,
stream: true
})
}).then(function(response) {
var reader = response.body.getReader();
var decoder = new TextDecoder();
function read() {
reader.read().then(function(result) {
if (result.done) return;
var chunk = decoder.decode(result.value);
// SSE 형식 파싱: "data: {...}\n\n"
// UI에 청크 단위 즉시 표시
read();
});
}
read();
});
참조: deskweb/source/class/deskweb/game/JanggiAI.js
프롬프트 구조:
1. 역할 부여 (게임 전문가)
2. 현재 게임 상황 (좌표 기반 보드 상태)
3. 게임 히스토리 (이전 수)
4. 전략 지침 (공격/수비 비율, 단계별 전략)
5. 응답 형식 지정 (JSON으로 다음 수 좌표)
핵심 원칙:
참조: deskweb/source/class/deskweb/util/AppController.js
AI ChatBot 명령으로 DeskWeb 앱 제어:
| 활용 유형 | 참조 파일 | 핵심 패턴 |
|---|---|---|
| 채팅봇 | ChatBotWindow.js | 스트리밍, 마크다운, 대화 이력 |
| 게임 AI | JanggiAI.js | 프롬프트 설계, 가드레일, Fallback |
| 앱 제어 | AppController.js | 이벤트 시뮬레이션, 앱 간 연동 |
| 브라우저 LLM | WebLLMManager.js | 모델 로드, GPU/CPU, 캐시 |
cd deskweb && qx compile # 소스 컴파일
qx serve --listen-port=8080 # 개발 서버 실행
# 접속: http://localhost:8080/deskweb/