Community라이팅 & 에디팅github.com

Canvas

대화형 마크다운 캔버스를 생성하고 공유하며 실시간으로 업데이트할 수 있는 AI 에이전트 스킬입니다.

Canvas란 무엇인가요?

Canvas는 `canvas.n3wth.com`에서 호스팅되는 대화형 마크다운 문서를 생성하고 공유할 수 있는 AI 에이전트 스킬입니다. 이 스킬은 `CANVAS_AGENT_TOKEN`과 `CANVAS_SITE_URL` 환경 변수를 통해 인증된 HTTP 에이전트 API와 통신하며, 브라우저 없이도 마크다운 콘텐츠를 생성, 읽기, 쓰기, 목록 조회할 수 있는 네 가지 주요 API를 제공합니다. 특히 실시간 협업에 초점을 맞춰, 생성된 캔버스의 공유 URL을 통해 다른 사람이나 에이전트가 열어볼 수 있으며, 소스가 업데이트되면 열려 있는 모든 탭이 자동으로 다시 렌더링됩니다. Claude Code, Cursor, Codex 등 다양한 AI 에이전트 플랫폼에서 사용할 수 있으며, `skills.n3wth.com` 또는 로컬 에이전트 스킬 디렉토리에 복사하여 간편하게 설치할 수 있습니다.

지원 대상✓Claude Code~Codex CLI~Cursor
npx skills add n3wth/skills

Installed? Explore more 라이팅 & 에디팅 skills: steipete/notion, langchain-ai/langchain, bytedance/podcast-generation · View all 6 →

즐겨 사용하는 AI에게 물어보기

이 에이전트 스킬이 미리 로드된 새 채팅을 엽니다.

문서

Canvas은(는) 무엇을 하나요?

canvas.n3wth.com은 공개 슬러그로 키가 지정된 대화형 마크다운과 렌더링된 미리보기를 제공합니다. 공유 URL에서 열린 뷰는 소스가 작성될 때 업데이트됩니다.

이 스킬은 인증된 HTTP 에이전트 API와 통신합니다. 브라우저는 필요하지 않습니다. 이 파일에는 비밀이 없습니다. 호출자는 자신의 환경에서 CANVAS_AGENT_TOKEN과 Convex 사이트 기본 URL을 제공합니다.

사용 시기

  • 다른 사람이나 에이전트가 열 수 있는 협업 공간을 만듭니다.
  • 마크다운을 푸시하고 안정적인 링크를 반환합니다.
  • 열려 있는 탭이 다시 렌더링되도록 기존 캔버스를 제자리에서 업데이트합니다.
  • 편집 전에 현재 소스를 읽습니다.

호출자가 가지고 있어야 하는 환경 변수

변수의미
CANVAS_SITE_URLConvex HTTP 기본 주소, 예: https://.convex.site (끝에 슬래시 없음)
CANVAS_AGENT_TOKEN배포에 토큰이 구성된 경우 공유 Bearer 토큰

공개 공유 링크는 항상 https://canvas.n3wth.com/c/{slug}를 사용합니다(Convex 사이트 호스트가 아님).

인증: Convex 배포에 CANVAS_AGENT_TOKEN이 설정된 경우, 아래 모든 에이전트 라우트에는 Authorization: Bearer $CANVAS_AGENT_TOKEN이 필요합니다. 토큰이 설정되지 않은 경우(로컬/개발), 동일한 라우트가 헤더 없이 작동합니다. 프로덕션에서는 토큰을 설정하세요.

API

모든 변경/읽기 에이전트 라우트의 인증:

Authorization: Bearer $CANVAS_AGENT_TOKEN
Content-Type: application/json

검색(인증 불필요):

curl -sS "$CANVAS_SITE_URL/agent/v1"

1. 생성

curl -sS -X POST "$CANVAS_SITE_URL/agent/v1/canvases" \
  -H "Authorization: Bearer $CANVAS_AGENT_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "title": "내 캔버스",
    "source": "# 안녕하세요\n\n이것은 **마크다운**입니다."
  }'

응답에는 slug, url, version이 포함됩니다. url을 사용자에게 반환하세요. 이것이 https://canvas.n3wth.com/c/{slug}에서 열 캔버스입니다.

2. 소스 쓰기

curl -sS -X PUT "$CANVAS_SITE_URL/agent/v1/canvases/$SLUG/source" \
  -H "Authorization: Bearer $CANVAS_AGENT_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{"source":"# 업데이트됨\n\n새로운 내용이 여기에 있습니다."}'

https://canvas.n3wth.com/c/$SLUG에서 열린 탭은 다시 로드하지 않고 다시 렌더링됩니다.

3. 현재 소스 읽기

curl -sS "$CANVAS_SITE_URL/agent/v1/canvases/$SLUG" \
  -H "Authorization: Bearer $CANVAS_AGENT_TOKEN"

4. 목록

curl -sS "$CANVAS_SITE_URL/agent/v1/canvases" \
  -H "Authorization: Bearer $CANVAS_AGENT_TOKEN"

메타데이터만 반환합니다(소스 본문 없음).

에이전트 워크플로

  1. CANVAS_SITE_URL과 CANVAS_AGENT_TOKEN이 환경에 설정되어 있는지 확인하세요(절대 커밋하지 마세요).
  2. 선택적 title/source와 함께 POST /agent/v1/canvases를 호출합니다.
  3. 사람이나 다른 에이전트에게 응답의 url(https://canvas.n3wth.com/c/{slug})을 알려줍니다.
  4. PUT .../source로 내용을 다듬어가며 반복합니다.
  5. 편집 전에 현재 소스가 필요하면 GET .../canvases/{slug}를 호출합니다.

오류

상태의미
401Bearer 토큰이 없거나 잘못됨(배포에 CANVAS_AGENT_TOKEN이 설정된 경우만)
404알 수 없는 슬러그
400유효성 검사 실패(소스 크기, JSON)

소스 크기 제한: 512KiB 문자.

범위 외

드로잉 화이트보드나 타사 캔버스 제품은 포함되지 않습니다. 이 API는 생성 / 소스 쓰기 / 읽기 / 목록만 제공합니다.

휴대용 설치

이 폴더를 skills.n3wth.com 또는 로컬 에이전트 스킬 디렉토리에 canvas/SKILL.md로 복사하세요. AGENTS.md에서 에이전트가 이를 참조하도록 설정하세요. 연락처: [email protected]. GitHub: https://github.com/n3wth.

관련 스킬