Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Status
colourYellow
title릴리즈 2.17.0 이상

Info
title알림

릴리즈 2.18.0, 3.0.0 이상에서의 설정 방법은 아래 링크를 이용해주세요.

[AIWriteSupporter] 릴리즈 2.18.0, 3.0.0 이상 설정 방법

생성형 AI를 연동해 자동 콘텐츠 생성을 지원하는 AI 글 작성 도우미 플러그인입니다.

업무용 콘텐츠 초안을 자동으로 생성하거나 다양한 편집을 할 수 있어 효율적인 콘텐츠 작성을 할 수 있습니다.

Image AddedImage Removed


목차 

Table of Contents

...

지원 브라우저

...

Image Added

Image Added

Image Added

Image Added

ChromeEdgeSafariIE

Image Added

Image Added

Image Added

Image Added

  • 공식적으로 지원하는 웹 브라우저는 다음과 같습니다.
    • Microsoft Edge 최신버전
    • Google Chrome 최신버전
    • Apple Safari 최신버전Mozilla Firefox 최신버전
  • 다른 브라우저에서도 작동할 수는 있지만 모든 기능이 올바르게 작동하지 않을 수 있습니다.
  • Internet Explorer 브라우저는 지원하지 않습니다.

...

AI에게 글 작성을 요청하는 버튼을 툴바 영역, 벌룬, 바로 삽입, 메뉴 영역에 추가할 수 있습니다.

툴바에 추가 

Image RemovedImage Added

Code Block
languagejs
themeEmacs
titlesynapeditor.config.js
//...
'editor.toolbar': [
	// AI 요청하기 버튼
    'openAIInteraction',
	//...
],
// ...


바로 삽입에 추가

Image RemovedImage Added

Code Block
languagejs
themeEmacs
titlesynapeditor.config.js
//...
'editor.quickInsert': [
	// AI 요청하기 버튼
    'openAIInteraction',
	//...
],
// ...

...

플러그인 설정하기

사용 가능한 키

KeyType필수기본값설명
urlstringO''
  • 요청을 보낼 URL을 설정합니다.
    • OpenAI의 API 주소
    • OpenAI의 API로 요청을 하도록 구현한 URL
  • 설정이 되지 않으면 툴바에 플러그인 버튼이 표시되지 않습니다.
  • apiKeystring
      • HyperCLOVA X로 요청을 하도록 구현한 URL 
        Status
        colourYellow
        title릴리즈 2.17.2311 이상
    • 설정이 되지 않으면 툴바에 플러그인 버튼이 표시되지 않습니다.
    apiKeystring
    ''
    • OpenAI에서 발급받은 API Key를 설정합니다.
    • 해당 설정을 사용하게 되면 브라우저에 Key 값이 노출되기 때문에, Key 값을 설정하지 않고 서버를 통해 요청을 할 수 있도록 하는 것이 안전합니다. 
    requestBodyObject
  • 추가로 API에 전송할 내용을 설정합니다.
    • max_tokens
    • temperature
    • n
    • ....
  • 자세한

    ai 

    string


    'gpt'

    Status
    colourYellow
    title릴리즈 2.17.2311 이상

    • 사용할 AI를 설정합니다. 기본값은 'gpt'입니다.
      • OpenAI GPT: 'gpt' 
      • NAVER HyperCLOVA X: 'hcx'
    requestBodyObject
    {}
    ocrUrlstring
    ''
    • OCR URL을 설정하면 초안 작성 메뉴에서 '이미지 첨부'메뉴가 활성화됩니다.
    • 이미지를 첨부하면 이미지에 있는 텍스트를 추출해 추출된 텍스트와 프롬프트를 AI에 함께 전송합니다.

    customPrompts

    Object[]
    []
    • 사용자 정의 프롬프트 메뉴를 추가합니다.
    • key, type, label, prompt 키를 가지는 객체의 배열을 설정합니다.
    Code Block
    languagejs
    themeEmacs
    {
        key: 'customPromptKey',
        type: 'prompt', // 또는 'immediately'
        label: {
            ko: '메뉴에 보여지는 텍스트',
            en: 'Label shown in menu'
        },
        prompt: {
            ko: 'AI에게 전달될 프롬프트. 요약해줘, 내용을 늘려줘, ...',
            en: 'Prompts to be passed to the AI',
        }
    }


    Code Block
    languagejs
    themeEmacs
    {
        key: 'customPromptKey',
        type: 'group',
        label: {
            ko: '하위 메뉴가 있는 메뉴',
            en: 'Menu with submenus'
        },
        items: ['summarize', 'explanation', ...]
    }


    keyType필수설명
    keystringO
    • 프롬프트를 구분할 수 있는 유니크한 값을 설정합니다.
    type'prompt' | 'immediately' | 'group'O
    • prompt: 프롬프트 입력칸에 prompt에 정의한 텍스트가 추가됩니다.
    • immediately: prompt에 정의한 텍스트가 메뉴를 실행 시 바로 전송됩니다.
    • group: 하위 메뉴를 가지는 경우 설정합니다.
    labelObjectO
    • 메뉴에 보일 텍스트를 설정합니다.
    promptObject
    • type: 'prompt' 또는 type: 'immediately'일 때만 유효합니다.

    • 프롬프트로 전송할 텍스트를 설정합니다.
    itemsstring[]
    • type: 'group'일 때만 유효합니다.

    • 하위 메뉴에 보일 프롬프트 메뉴의 key를 배열 형태로 설정합니다.
    iconNamestring
    • 아이콘 이름을 설정합니다.
    • 이름에 해당하는 아이콘이 에디터에 등록이 되어있으면 메뉴에 아이콘이 보입니다.


    categoryConfigObject
    {}
    • 카테고리 별 보일 프롬프트 메뉴를 설정합니다.
    • 카테고리는 아래와 같습니다. 
      • favorite: 즐겨찾기
      • draft: 초안 작성
      • edit: 편집 또는 검토
      • createByReference: 내용을 참고하여 생성
      • write: 글쓰기

    ...

    Code Block
    languagejs
    themeEmacs
    titlesynapeditor.config.js
    // URL과 API Key를 설정하는 경우
    'aiWriteSupporter.config': {
        url: 'https://api.openai.com/v1/chat/completions',
        apiKey: 'sk-abc123...456xyz' // 브라우저에 노출되므로 안전하지 않음
    }
    
    // URL만 설정하는 경우
    'aiWriteSupporter.config': {
        url: '/request'
    }

    Request Body 설정

    API 요청 시 추가로 필요한 값들을 설정합니다. 설정할 수 있는 값들은 아래 링크에서 확인할 수 있습니다.


    https://platform.openai.com/docs/api-reference/completions/create

    Status
    colourYellow
    title릴리즈 2.17.2311 이상

    사용할 생성형 AI에 맞춰 아래와 같이 설정합니다.

    OpenAI GPT 설정

    Code Block
    languagejs
    themeEmacs
    titlesynapeditor.config.js
    // Request body 설정URL과 API Key를 설정하는 경우
    'aiWriteSupporter.config': {
        urlai: 'urlgpt',
        apiKeyurl: 'apiKeyhttps://api.openai.com/v1/chat/completions',
        requestBodyapiKey: {
            temperature: 2,
       'sk-abc123...456xyz' // 브라우저에 노출되므로 안전하지 않음
    }
    
    // URL만 설정하는 경우
    'aiWriteSupporter.config': {
    	ai: 'gpt',
        presence_penaltyurl: 2, 
            ...
        }
    }'/request'
    }
    


    Naver HyperCLOVA X 설정

    Code Block
    languagejs
    themeEmacs
    titlesynapeditor.config.js
    // url: HyperCLOVA X로 요청을 하도록 구현한 URL
    'aiWriteSupporter.config': {
        ai: 'hcx',
        url: '/request',
    }

    Request Body 설정

    API 요청 시 추가로 필요한 값들을 설정합니다.

    GPT의 설정할 수 있는 값들은 아래 링크에서 확인할 수 있습니다.

    https://platform.openai.com/docs/api-reference/completions/create

    Code Block
    languagejs
    themeEmacs
    titlesynapeditor.config.js
    // Request body 설정
    'aiWriteSupporter.config': {
        url: 'url',
        apiKey: 'apiKey',
        requestBody: {
            temperature: 2,
            presence_penalty: 2, 
            ...
        }
    }


    Status
    colourYellow
    title릴리즈 2.17.2311 이상

    HyperCLOVA X의 설정할 수 있는 값들은 아래와 같습니다.

    필드타입

    설명

    temperaturedouble생성 토큰에 대한 다양성 정도 (설정값이 높을수록 다양한 문장 생성 가능) - 0~1 (기본값: 0.5)
    topKint생성 토큰 후보군에서 확률이 높은 k 개를 후보로 지정하여 샘플링 - 0~128 (기본값: 0)
    topPdouble생성 토큰 후보군을 누적 확률을 기반으로 샘플링 - 0~1 (기본값: 0.8)
    repeatPenaltydouble같은 토큰을 생성하는 것에 대한 패널티 정도 (설정값이 높을수록 같은 결괏값을 반복 생성할 확률 감소) - 0~10 (기본값: 5)
    stopBeforestring토큰 생성 중단 문자 - [] (기본값)
    maxTokensint최대 생성 토큰 수 - 0~2048 (기본값: 2048)




    OCR URL 설정: '이미지 첨부' 기능 사용

    ...

    사용 예시) 보도 자료 이미지 첨부 → '요약해줘' 프롬프트 입력 → 전송

    Image RemovedImage Added

    Code Block
    languagejs
    themeEmacs
    titlesynapeditor.config.js
    'aiWriteSupporter.config': {
        ocrUrl: 'https://ailab.synap.co.kr/sdk', // 프로모션 기간 중 사용이 가능합니다.
        ocrApiKey: 'ocr발급받은 API URLkey'
    }


    'ocrUrl'을 설정하지 않음: 초안 작성시 '이미지 첨부'메뉴 보이지 않음'ocrUrl'을 설정: 초안 작성시 '이미지 첨부'메뉴 보여짐

    ...

    플러그인에 미리 정의된 프롬프트 메뉴 Key는 [AIWriteSupporter] 미리 정의된 프롬프트 메뉴에서 확인할 수 있습니다.

    적용된 모습설정


    Code Block
    languagejs
    themeEmacs
    titlesynapeditor.config.js
    'aiWriteSupporter.config': {
        categoryConfig: {
            draft: [
                'meetingRequestEmail', 'salesEmail', 'jobAnnouncement'
            ]
        }
    }


    ...