Playground — 체험 · 학습 도구
TFO SDK/Agent를 브라우저에서 바로 체험할 수 있는 페이지 두 가지를 제공합니다. 설치 없이 접속만으로 실제 WebOffice 문서에 대고 실행해 볼 수 있습니다.
| ① 개발자 API 플레이그라운드 | ② AI 데모 | |
|---|---|---|
| 접속 | /playground/tfo-sdk/ | /playground/tfo-ai-sdk/ |
| 대상 | tfo-sdk 개발자 API를 시험하는 개발자 | AI 에이전트 통합 형태를 체험하려는 개발자/의사결정자 |
| 화면 | 좌: 코드 콘솔 · 우: 실제 문서 | 좌: chat UI · 우: 실제 문서 |
| 하는 일 | getDocument() 등 API를 직접 호출하고 결과 확인 | 자연어로 지시 → AI가 문서를 편집하는 전체 흐름 확인 |
두 페이지 모두 접속하면 새 문서가 자동으로 열리며(매 접속 새 편집 세션), 문서 저장소의 기존 파일을 건드리지 않습니다.
① 개발자 API 플레이그라운드
@tfo/sdk 개발자 API를 실제 문서에 대고 실행해 보는 콘솔입니다. 왼쪽 에디터에 표현식을 입력하면 오른쪽 문서에 즉시 반영되고 결과가 출력됩니다.
화면 구성
- 에디터 — 여러 줄 코드 작성,
Ctrl/Cmd+Enter실행(마지막 표현식 값 출력)..입력 시 API 카탈로그 기반 자동완성 - 실행 바 — Run ▶ · Clear Input(에디터 지우기) · Clear Log(로그 지우기)
- 예제 갤러리 — 모듈별 예제 카드. 클릭하면 에디터에 로드 (헤더 예제 메뉴로 열기)
- 로그 · 결과 인스펙터 — 결과를 JSON 트리로 표시. 핸들 결과의 이어가기 ▸ 를 누르면
$1변수로 캡처되어$1.getText()처럼 이어서 호출 가능 - 메뉴 — 예제 / API(카탈로그 탐색·검색, 클릭으로 스니펫 삽입) / Tools(AI 도구 목록·직접 실행) / 저장(스니펫 저장·공유 링크·코드 export)
- 모듈 셀렉터 — Word / Spreadsheet / Presentation 전환 (해당 모듈 새 문서로 다시 열림)
- 다크 · EN — 테마 / UI 언어 토글
- 연결 상태 — SDK 연결 여부
- 문서 — 표현식이 즉시 반영되는 실제 WebOffice 문서
기본 규칙
- 진입점은
getDocument()— 콘솔 스코프에sdk,execute(),getToolSchemas()도 있습니다. - 핸들 반환 메서드는
await후 체인합니다. Spreadsheet의getWorksheet()/getRange()는 통신 없이 체인되고 종단 메서드만await.
// Word — 본문 텍스트 읽기
const body = await getDocument().getBody();
await body.getText()
// Spreadsheet — A1:B2 값 읽기
await getDocument().getWorksheet(0).getRange(0, 0, 1, 1).getValues()
// Presentation — 슬라이드에 도형 + 텍스트
const slides = await getDocument().getSlides();
const shape = await slides[0].insertShape();
await shape.insertText("Hello tfo-sdk")
② AI 데모
파트너 호스트 페이지가 자체 chat UI + tfo-sdk로 WebOffice에 통합하는 형태를 그대로 구현한 단일 페이지 데모입니다. 페이지 소스가 곧 통합 예제 코드입니다 — chat UI, LLM 어댑터, tool-calling 루프, modelContext, iframe 배선까지 한 파일에서 확인할 수 있습니다.
화면 구성
- 좌측 chat UI — 자연어로 지시하면 AI가 문서 편집 도구를 호출해 오른쪽 문서를 실제로 편집합니다
- 모듈 셀렉터(헤더 우측) — Word / Spreadsheet / Presentation 전환. 전환 시 새 문서가 열리고 도구·대화 컨텍스트가 재구성됩니다
- LLM 모드 바 — 상단에서 연결 방식 선택:
| 모드 | 설명 |
|---|---|
| Demo (no key) | 키 없이 흐름 체험 — /tools(도구 목록), /run <도구명> {…}(도구 직접 실행) |
| Claude / OpenAI / Gemini | 본인 API 키로 브라우저 직접 호출 (키는 이 탭에만 보관, 테스트/PoC용) |
| Server proxy (relay) | 서버 경유 — 키를 브라우저에 두지 않는 프로덕션형 구성 |
- 가운데 경계 드래그 — chat UI ↔ 문서 영역 폭 조절 (설정 유지)
체험 시나리오 예
- 채팅에
여기에 오늘 날짜 넣어줘입력 → AI가 편집 도구를 호출해 문서에 반영, 도구 호출 내역이 채팅에 표시 /tools로 현재 문서 모듈이 노출하는 편집 도구 목록 확인- 모듈 셀렉터로 Spreadsheet 전환 → 셀/시트 도구로 같은 흐름 반복
자주 묻는 문제
| 증상 | 확인 |
|---|---|
| 문서가 안 열림 | 서버 설정(config.js의 origin/adapter)과 로그인 세션 확인 |
| 자동완성이 안 뜸 (①) | API 카탈로그 로드 실패 — 브라우저 콘솔의 [playground] 로그 확인 |
| SDK 연결 타임아웃 | 문서 iframe origin과 페이지 origin 설정(?origin=) 확인 |
| AI가 응답만 하고 편집 안 함 (②) | Demo 모드는 정해진 흐름만 시연 — 실제 판단·편집은 LLM 연결(키/relay) 후 동작 |