문서를 참고하여 서비스에 AI 태깅/검색 기능을 연동하고 테스트해 보세요.
taggingBox SDK를 활용한 개발 방법을 알아보세요.
자주 묻는 질문과 답변을 모았습니다.
npm install tbmini-sdk
import { TaggingSDK } from 'tbmini-sdk';
const sdk = new TaggingSDK();
sdk.init({
applicationKey: 'your-application-key',
userKey: 'user-unique-id',
locale: 'ko' // or 'en'
});
sdk.createTaggingBox({
containerId: 'tagging-container',
width: '25rem',
height: '600px',
animation: 'fadeIn',
animationDuration: '0.5s'
});import React, { useEffect } from 'react';
import { TaggingSDK } from 'tbmini-sdk';
function App() {
useEffect(() => {
const sdk = new TaggingSDK();
sdk.init({
applicationKey: 'your-application-key',
userKey: 'user-unique-id',
locale: 'ko' // or 'en'
});
sdk.createTaggingBox({
containerId: 'tagging-container',
width: '25rem',
height: '600px',
animation: 'fadeIn',
animationDuration: '0.5s'
});
}, []);
return (
<div className="container">
<h1>tbmini-sdk React Example</h1>
<div id="tagging-container"></div>
</div>
);
}
export default App;<template>
<div class="container">
<div id="tagging-container"></div>
</div>
</template>
<script>
import { TaggingSDK } from 'tbmini-sdk';
export default {
name: 'App',
mounted() {
const sdk = new TaggingSDK();
sdk.init({
applicationKey: 'your-application-key',
userKey: 'user-unique-id',
locale: 'ko' // or 'en'
});
sdk.createTaggingBox({
containerId: 'tagging-container',
width: '25rem',
height: '600px',
animation: 'fadeIn'
});
}
}
</script><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>tbmini-sdk Example</title>
<script src="https://unpkg.com/tbmini-sdk@latest/dist/tbmini-sdk.min.js"></script>
</head>
<body>
<div id="tagging-container"></div>
<script>
window.TaggingSDK.init({
applicationKey: 'your-application-key',
userKey: 'user-unique-id',
locale: 'ko'
});
window.TaggingSDK.createTaggingBox({
containerId: 'tagging-container',
width: '25rem',
height: '600px',
animation: 'fadeIn',
animationDuration: '0.5s'
});
</script>
</body>
</html>TaggingBox.init({
containerId: 'tagging-container', // required
apiKey: 'your-api-key', // required
userKey: 'user-unique-id' // required
});TaggingBox.init({
containerId: 'tagging-container',
apiKey: 'your-api-key',
userKey: 'user-unique-id',
width: '400px', // default: '400px'
height: '600px' // default: '600px'
});// Set container style after SDK initialization
TaggingBox.init({
containerId: 'tagging-container',
apiKey: 'your-api-key',
userKey: 'user-unique-id'
});
// Set container style
const container = document.getElementById('tagging-container');
container.style.position = 'fixed';
container.style.top = '5rem';
container.style.right = '2rem';
container.style.zIndex = '999';
container.style.height = '100vh';
container.style.width = '25rem';// animation options
TaggingBox.init({
containerId: 'tagging-container',
apiKey: 'your-api-key',
userKey: 'user-unique-id',
animation: 'slideInLeft',
animationDuration: '0.5s'
});// Use the default icon
TaggingBox.init({
containerId: 'tagging-container',
apiKey: 'your-api-key',
userKey: 'user-unique-id'
});
// Use custom SVG icon
TaggingBox.init({
containerId: 'tagging-container',
apiKey: 'your-api-key',
userKey: 'user-unique-id',
iconSvg: `<svg width="60" height="60" viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="12" r="10" fill="#007bff"/>
<path d="M12 6v6l4 2" stroke="white" stroke-width="2"/>
</svg>`,
iconSize: '80px',
iconPosition: { bottom: '30px', right: '30px' }
});
// Use image URL
TaggingBox.init({
containerId: 'tagging-container',
apiKey: 'your-api-key',
userKey: 'user-unique-id',
iconSvg: `<img src="https://example.com/icon.png" alt="Custom Icon" class="tagging-icon">`,
iconSize: '70px'
});// Show the floating icon first (default)
TaggingBox.init({
containerId: 'tagging-container',
apiKey: 'your-api-key',
userKey: 'user-unique-id',
showIconFirst: true // default: true
});
// If you are showing TaggingBox right away
TaggingBox.init({
containerId: 'tagging-container',
apiKey: 'your-api-key',
userKey: 'user-unique-id',
showIconFirst: false // Show the box without the icon first
});tbmini SDK는 두 가지 인증 방식을 지원합니다. (Secured On / Secured Off)
고객사 백엔드에서 /api/v1/sdk_api/v1.1/client_auth/client_access_key API를 호출하여 access_key를 발급받고, 이를 doAuth 메서드로 전달합니다.
const sdk = new TaggingSDK();
sdk.init({
applicationKey: 'your-application-key',
userKey: 'user-unique-id',
doAuth: async (userKey) => {
// 고객사 백엔드에서 Application Secret을 사용하여 access_key 발급
const response = await fetch('https://your-backend.com/api/get-access-key', {
method: 'POST',
body: JSON.stringify({ user_key: userKey })
});
const data = await response.json();
return data.access_key; // access_key 반환
}
});고객사 백엔드에서는 다음과 같이 구현합니다
// 고객사 백엔드 예시
app.post('/api/get-access-key', async (req, res) => {
const { user_key } = req.body;
// Application Secret을 사용하여 tbmini API 호출
const response = await fetch(
`https://developers.tbmini.im/api/v1/sdk_api/v1.1/client_auth/client_access_key?user_key=${user_key}`,
{
method: 'POST',
headers: {
'X-API-Key': process.env.APPLICATION_API_KEY,
'X-API-Secret': process.env.APPLICATION_API_SECRET
}
}
);
const data = await response.json();
res.json({ access_key: data.access_key });
});고객사 백엔드에서 access_key를 발급하는 엔드포인트를 제공하고, SDK에서 해당 URL을 사용합니다.
const sdk = new TaggingSDK();
sdk.init({
applicationKey: 'your-application-key',
userKey: 'user-unique-id',
authURL: 'https://your-backend.com/api/get-access-key' // 고객사 백엔드 엔드포인트
});고객사 백엔드는 user_key를 query parameter로 받아 access_key를 반환해야 합니다
// 고객사 백엔드 예시
app.post('/api/get-access-key', async (req, res) => {
const { user_key } = req.query;
// Application Secret을 사용하여 tbmini API 호출
const response = await fetch(
`https://developers.tbmini.im/api/v1/sdk_api/v1.1/client_auth/client_access_key?user_key=${user_key}`,
{
method: 'POST',
headers: {
'X-API-Key': process.env.APPLICATION_API_KEY,
'X-API-Secret': process.env.APPLICATION_API_SECRET
}
}
);
const data = await response.json();
res.json({ access_key: data.access_key });
});발급받은 access_key로 SDK는 자동으로 /api/v1/sdk_api/v1.1/client_auth?access_key=(access_key) GET API를 호출하여 최종 토큰을 획득합니다.
콘솔에서 "Secured off"로 설정한 경우, SDK가 직접 /api/v1/sdk_api/v1.1/client_auth POST API를 호출하여 토큰을 획득합니다.
이 경우 x-api-key 헤더에 Application Key를, user_key에 사용자 식별자를 넣어 간단하게 토큰을 획득할 수 있습니다.
const sdk = new TaggingSDK();
sdk.init({
applicationKey: 'your-application-key',
userKey: 'user-unique-id'
// doAuth나 authURL 설정 불필요
});주의: Secured Off 방식은 사용자 계정 유출의 위험이 있으므로, 프로덕션 환경에서는 Secured On 방식을 사용하는 것을 강력히 권장합니다.
init method options| 옵션 | 타입 | 필수 | 기본값 | 설명 |
|---|---|---|---|---|
| applicationKey | string | Yes | - | 콘솔에서 발급받은 Application Key (공개 키, Secret 아님) |
| userKey | string | Yes | - | 사용자를 식별하는 고유 키 |
| locale | string | No | 'ko' | 언어 설정 ('ko' 또는 'en') |
| authURL | string | No | apiBaseUrl + '/client_auth' | 엔드 유저 보안 인증용 백엔드 URL (고객사 서버). Secured On일 때 사용 |
| doAuth | function | No | - | 사용자 인증 커스텀 메서드. `async (user_key: string) => Promise(string)` 형식으로 access_key를 반환해야 합니다. * 이 옵션 설정 시 authURL이 무시됩니다. |
createTaggingBox method options| 옵션 | 기본값 | 예시 | 설명 |
|---|---|---|---|
| width | '400px' | width: '400px' | TaggingBox width |
| height | '600px' | height: '600px' | TaggingBox height |
| 옵션 | 기본값 | 예시 | 설명 |
|---|---|---|---|
| animation | 'slideInRight' | animation: 'slideInRight' | 렌더링 될 때 animation 타입 (slideInLeft, slideInTop, fadeIn, zoomIn, none) |
| animationDuration | '0.3s' | animationDuration: '0.3s' | 애니메이션 지속 시간 (밀리초 단위) |
| 옵션 | 기본값 | 예시 | 설명 |
|---|---|---|---|
| showIconFirst | true | showIconFirst: true | 플로팅 아이콘 표시 여부 |
| containerId | https://developers.tbmini.im | apiBaseUrl: 'https://developers.tbmini.im' | SDK가 렌더링될 컨테이너 요소의 ID |
| 옵션 | 기본값 | 예시 | 설명 |
|---|---|---|---|
| logoSvg | - | logoSvg: '<svg>...' | 커스텀 로고 SVG |
| logoWidth | '60px' | logoWidth: '60px' | 로고 이미지의 가로 크기 |
| logoHeight | '20px' | logoHeight: '20px' | 로고 이미지의 세로 크기 |
| 옵션 | 기본값 | 예시 | 설명 |
|---|---|---|---|
| iconSvg | - | iconSvg: '<svg>...' | 플로팅 아이콘 SVG |
| iconSize | '60px' | iconSize: '60px' | 플로팅 아이콘 크기 |
| iconPosition | bottom: '20px', right: '20px' | iconPosition: { bottom: '20px', right: '20px' } | 플로팅 아이콘 위치 (top, left, right, bottom) |
SDK 초기화 후 getAPIs() 메서드를 통해 API 함수에 접근할 수 있습니다.
const sdk = new TaggingSDK();
sdk.init({
applicationKey: 'your-application-key',
userKey: 'user-unique-id'
});
const apis = sdk.getAPIs();
// API 함수 사용 예시
const boxes = await apis.getClientBoxes();사용자 컨텍스트 정보를 생성하고 박스 정보를 가져옵니다.
| Input Parameters | x |
| Output | { boxes: Array<{box_id, name}>, ... } → 사용자 박스 정보 및 컨텍스트 데이터 |
| API Endpoint | POST /client/context |
클라이언트의 박스 목록을 조회합니다.
| Input Parameters | x |
| Output | { boxes: Array<{box_id, name}>, plan_limits: {max_boxes_per_client, current_boxes_for_client} } → 박스 목록과 플랜 제한 정보 |
| API Endpoint | GET /client/boxes |
박스 이름을 업데이트합니다.
| Input Parameters | box_id (number): 업데이트할 박스 ID name (string): 새로운 박스 이름 |
| Output | { box_id, name, owner_public_client_id } → 업데이트된 박스 정보 |
| API Endpoint | PATCH /client/boxes/{box_id} |
박스 순서를 변경합니다.
| Input Parameters | orderedList (Array): 변경된 순서의 박스 ID 리스트 |
| Output | 없음 (성공 시 알림 표시) |
| API Endpoint | PUT /client/boxes/order |
콘텐츠를 저장하고 태그 추천을 요청합니다.
| Input Parameters | title : 콘텐츠 제목 url : 원본 URL content : 콘텐츠 내용 input_type : 입력 타입 (DIRECT, PASTE, FILE_UPLOAD, API, UNKNOWN) box_id(string) : 저장할 박스 ID recommend_tags : 태그 추천 여부 |
| Output | { request_id : string, recommended_tags: Array<{name : string, source : string}>, ... } → 요청 ID와 추천 태그 목록 |
| API Endpoint | POST /recommendations |
추천받은 태그를 저장합니다.
| Input Parameters | request_id(string) : postRecommendations에서 받은 request_id box_id(string) : 저장할 박스 ID tags : 저장할 태그 목록 |
| Output | { request_id, ... } → 요청 ID와 저장 결과 |
| API Endpoint | POST /tags |
챗봇용 마스터 목록을 조회합니다.
| Input Parameters | x |
| Output | { total_count, items: Array<{title, text_content, ...}>, skip, limit} |
| API Endpoint | GET /chatbot/masters?skip=0&limit=20 |
챗봇 검색을 수행합니다.
| Input Parameters | query : 사용자의 검색 질문 master_box_id(string) : 검색할 Master의 특정 Box ID (선택 사항) room_id(number) :기존 대화방 ID (없으면 새 방 생성) |
| Output | { room_id, query: {id, user_query, context, ai_answer, master_box_id_used, sequence_number, created_at}, deducted_credits, message, context } |
| API Endpoint | POST /chatbot/search |
특정 마스터 박스의 콘텐츠 목록을 조회합니다.
| Input Parameters | master_box_id(string) : 조회할 마스터 박스 ID |
| Output | { total_count, items: Array<{title, text_content, master_box_id, is_chatbot_enabled, master_content_id, master_id, tags, created_at, updated_at, request_id}>, skip, limit } |
| API Endpoint | GET /chatbot/boxes/{master_box_id}/contents?skip=0&limit=100 |
챗봇 대화방 목록을 조회합니다.
| Input Parameters | x |
| Output | Array<{room_id, title, initial_master_box_id, created_at, updated_at, query_count}> |
| API Endpoint | GET /chatbot/rooms |
특정 챗봇 대화방의 상세 정보(채팅 히스토리)를 조회합니다.
| Input Parameters | room_id(number) :조회할 대화방 ID |
| Output | { room_id, title, requesting_client_public_id, content_owner_master_id, initial_master_box_id, created_at, updated_at, total_queries, queries: Array<{id, user_query, context, ai_answer, master_box_id_used, sequence_number, created_at}> } |
| API Endpoint | GET /chatbot/rooms/{room_id} |
지정된 Client Box 내의 콘텐츠를 대상으로 RAG 검색을 수행하고, 결과를 Room에 기록합니다.
| Input Parameters | query : RAG 검색 질문 box_id(string) : 검색 컨텍스트로 사용할 Client Box의 ID (선택 사항) room_id(number) :기존 검색 기록방 ID (없으면 새로 생성) |
| Output | { room_id: number, query: string, answer: string, box_id_used: string, sequence_number: number, created_at: string, deducted_credits: number, context: Array<string> } → RAG 검색 결과와 메타데이터 |
| API Endpoint | POST /rag/search |
Client의 모든 접근 가능한 Box 내 콘텐츠를 대상으로 RAG 검색을 수행하고, 결과를 Room에 기록합니다.
| Input Parameters | query : RAG 검색 질문 room_id(number) :기존 검색 기록방 ID (없으면 새로 생성) |
| Output | { room_id: number, query: string, answer: string, box_id_used: string, sequence_number: number, created_at: string, deducted_credits: number, context: Array<string> } → RAG 검색 결과와 메타데이터 |
| API Endpoint | POST /rag/search-all-boxes |
Client의 모든 RAG 검색 기록방 목록을 조회합니다.
| Input Parameters | limit : 조회 개수 (max 50, min 1), 기본값 20 skip : n개 이후 검색 (pagination), 기본값 0 |
| Output | Array<{room_id: number, title: string, initial_box_id: string, created_at: string, updated_at: string, query_count: number}> → RAG 검색 기록방 목록 |
| API Endpoint | GET /rag/rooms?limit={limit}&skip={skip} |
특정 RAG 검색 기록방의 모든 질의응답을 조회합니다.
| Input Parameters | room_id(number) :조회할 검색 기록방의 ID skip : 건너뛸 메시지 수, 기본값 0 limit : 가져올 메시지 수, 기본값 100 |
| Output | { room_id: number, title: string, initial_box_id: string, created_at: string, updated_at: string, total_queries: number, queries: Array<{sequence_number: number, user_query: string, context: Array<string>, ai_answer: string, box_id_used: number, created_at: string}> } → RAG 검색 기록방 상세 정보 |
| API Endpoint | GET /rag/rooms/{room_id}?skip={skip}&limit={limit} |
콘텐츠 목록을 조회합니다 (Box 필터링 가능).
| Input Parameters | box_id(string) : 필터링할 Box ID (선택 사항) limit : 페이지당 항목 수 (min 1, max 100), 기본값 20 offset : 건너뛸 항목 수, 기본값 0 |
| Output | { total_count: number, limit: number, offset: number, items: Array<{request_id: string, box_id: string, owner_public_client_id: string, title: string, content: string, url: string, created_dt: string, updated_dt: string, associated_tags: Array<{tag_id: number, tag_nm: string, scope: string}>}> } → 콘텐츠 목록과 메타데이터 |
| API Endpoint | GET /client/contents?box_id={box_id}&limit={limit}&offset={offset} |
콘텐츠 상세 정보를 조회합니다.
| Input Parameters | request_id (string): 조회할 콘텐츠의 request_id (짧은 Hex) |
| Output | { request_id: string, box_id: string, owner_public_client_id: string, title: string, content: string, url: string, created_dt: string, updated_dt: string, associated_tags: Array<{tag_id: number, tag_nm: string, scope: string}> } → 콘텐츠 상세 정보 |
| API Endpoint | GET /contents/{request_id} |
주어진 request_id에 해당하는 콘텐츠를 삭제합니다.
| Input Parameters | request_id (string): 삭제할 콘텐츠의 request_id (짧은 Hex) |
| Output | 없음 (성공 시 204 응답) |
| API Endpoint | DELETE /contents/{request_id} |
특정 콘텐츠의 제목, 내용, URL 등을 수정합니다.
| Input Parameters | request_id(string) : 수정할 콘텐츠의 request_id title : 변경할 콘텐츠 제목 (선택 사항) content : 변경할 콘텐츠 내용 (선택 사항) url : 변경할 원본 URL (선택 사항) |
| Output | { request_id: string, box_id: string, owner_public_client_id: string, title: string, content: string, url: string, created_dt: string, updated_dt: string, associated_tags: Array<{tag_id: number, tag_nm: string, scope: string}> } → 수정된 콘텐츠 정보 |
| API Endpoint | PATCH /contents/{request_id} |
특정 콘텐츠에 연결된 태그를 부분적으로 수정합니다.
| Input Parameters | request_id(string) : 태그를 수정할 콘텐츠의 request_id tags_to_add : 추가할 태그 목록 tags_to_remove : 제거할 태그 이름 목록 |
| Output | { request_id: string, box_id: string, owner_public_client_id: string, title: string, content: string, url: string, created_dt: string, updated_dt: string, associated_tags: Array<{tag_id: number, tag_nm: string, scope: string}> } → 수정된 콘텐츠와 태그 정보 |
| API Endpoint | PATCH /contents/{request_id}/tags |