Developer Docs

Refer to the document and link the AI tagging/search function to the service and test it.

taggingBox Guide

Learn how to develop using the taggingBox SDK.

FAQ

A collection of questions and answers frequently asked.

Table of Contents

Installation
Package Install
npm install tbmini-sdk
Usage
JavaScript/TypeScript
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'
});
React
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;
Vue
<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>
CDN
<!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>
SDK Option Settings
Basic Settings
TaggingBox.init({
  containerId: 'tagging-container',  // required
  apiKey: 'your-api-key',           // required
  userKey: 'user-unique-id'         // required
});
Size and Position Settings
TaggingBox.init({
  containerId: 'tagging-container',
  apiKey: 'your-api-key',
  userKey: 'user-unique-id',
  width: '400px',                   // default: '400px'
  height: '600px'                   // default: '600px'
});
Container Style Settings
// 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 Settings
// animation options
TaggingBox.init({
  containerId: 'tagging-container',
  apiKey: 'your-api-key',
  userKey: 'user-unique-id',
  animation: 'slideInLeft',         
  animationDuration: '0.5s'        
});
Floating Icon Settings
// 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'
});
Display Option Settings
// 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
});
Authentication Flow

tbmini SDK supports two authentication methods. (Secured On / Secured Off)

Secured On (Secured On)
Method 1: Using doAuth Method(Recommended)

The customer's backend calls the /api/v1/sdk_api/v1.1/client_auth/client_access_key API to issue an access_key and passes it to the doAuth method.

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 반환
  }
});

The customer's backend is implemented as follows

// 고객사 백엔드 예시
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 });
});
Method 2: Using authURL

The customer's backend provides an endpoint that issues an access_key, and the SDK uses that URL.

const sdk = new TaggingSDK();
sdk.init({
  applicationKey: 'your-application-key',
  userKey: 'user-unique-id',
  authURL: 'https://your-backend.com/api/get-access-key' // 고객사 백엔드 엔드포인트
});

The customer's backend should accept the user_key as a query parameter and return the 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 });
});

With the issued access_key, the SDK automatically calls the /api/v1/sdk_api/v1.1/client_auth?access_key=(access_key) GET API to obtain the final token.

Secured Off (Secured Off)

If set to "Secured off" on the console, the SDK directly calls the /api/v1/sdk_api/v1.1/client_auth POST API to obtain the token.
In this case, you can easily obtain tokens by putting the Application Key in the x-api-key header and the user_key in the user_key.

const sdk = new TaggingSDK();
sdk.init({
  applicationKey: 'your-application-key',
  userKey: 'user-unique-id'
  // doAuth나 authURL 설정 불필요
});

Note: Secure Off is highly recommended in production environments because of the risk of user account leakage.

SDK Initialization Options
init method options
OptionTypeRequiredDefaultDescription
applicationKeystringYes-Application Key issued by console (public key, not Secret)
userKeystringYes-Unique key identifying the user
localestringNo'ko'Language setting ('ko' or 'en')
authURLstringNoapiBaseUrl + '/client_auth'Backend URL for end-user security authentication (client server). Used when Secured On
doAuthfunctionNo-Custom user authentication method. Must return access_key in the form `async (user_key: string) => Promise(string)`.

* When this option is set, authURL is ignored.

TaggingBox Creation Options

createTaggingBox method options
Size Settings
OptionDefaultExampleDescription
width'400px'width: '400px'TaggingBox width
height'600px'height: '600px'TaggingBox height
Animation Settings
OptionDefaultExampleDescription
animation'slideInRight'animation: 'slideInRight'Type of animation when rendering
(slideInLeft, slideInTop, fadeIn, zoomIn, none)
animationDuration'0.3s'animationDuration: '0.3s'Duration of animation (in milliseconds)
Display Options
OptionDefaultExampleDescription
showIconFirsttrueshowIconFirst: trueFloating Icon Display
containerIdhttps://developers.tbmini.imapiBaseUrl: 'https://developers.tbmini.im'ID of the container element where the SDK will be rendered
Logo Settings
OptionDefaultExampleDescription
logoSvg-logoSvg: '<svg>...'Custom Logo SVG
logoWidth'60px'logoWidth: '60px'Width of Logo Image
logoHeight'20px'logoHeight: '20px'Height of Logo Image
Floating Icon Settings
OptionDefaultExampleDescription
iconSvg-iconSvg: '<svg>...'Floating Icon SVG
iconSize'60px'iconSize: '60px'Size of Floating Icon
iconPositionbottom: '20px', right: '20px'iconPosition: { bottom: '20px', right: '20px' }Position of Floating Icon (top, left, right, bottom)

API Usage

After initializing the SDK, you can access API functions through the getAPIs() method.

const sdk = new TaggingSDK();
sdk.init({
  applicationKey: 'your-application-key',
  userKey: 'user-unique-id'
});

const apis = sdk.getAPIs();

// API 함수 사용 예시
const boxes = await apis.getClientBoxes();

List of API functions

Client Context API

postClientContext()

Creates user context information and retrieves box information.

Input Parametersx
Output{ boxes: Array<{box_id, name}>, ... } → User box information and context data
API EndpointPOST /client/context
Client Boxes API

getClientBoxes()

Retrieves the client's box list.

Input Parametersx
Output{ boxes: Array<{box_id, name}>, plan_limits: {max_boxes_per_client, current_boxes_for_client} } → Box list and plan limit information
API EndpointGET /client/boxes

patchClientBoxes({box_id, name})

Updates box name.

Input Parametersbox_id (number): Box ID to update name (string): New box name
Output{ box_id, name, owner_public_client_id } → Updated box information
API EndpointPATCH /client/boxes/{box_id}

putClientBoxesOrder(orderedList)

Changes box order.

Input ParametersorderedList (Array): List of box IDs in changed order
OutputNone (notification shown on success)
API EndpointPUT /client/boxes/order
Recommendations API

postRecommendations(params)

Saves content and requests tag recommendations.

Input Parameterstitle : Content title url : Original URL content : Content text input_type : Input type (DIRECT, PASTE, FILE_UPLOAD, API, UNKNOWN) box_id(string) : Box ID to save to recommend_tags : Whether to recommend tags
Output{ request_id : string, recommended_tags: Array<{name : string, source : string}>, ... } → Request ID and recommended tag list
API EndpointPOST /recommendations
Tags API

postTags({request_id, box_id, tags})

Saves recommended tags.

Input Parametersrequest_id(string) : request_id from postRecommendations box_id(string) : Box ID to save to tags : List of tags to save
Output{ request_id, ... } → Request ID and save result
API EndpointPOST /tags
Chatbot API

getChatbotMasterBoxes()

Retrieves master list for chatbot.

Input Parametersx
Output{ total_count, items: Array<{title, text_content, ...}>, skip, limit}
API EndpointGET /chatbot/masters?skip=0&limit=20

postChatbotSearch({query, master_box_id, room_id})

Performs chatbot search.

Input Parametersquery : User's search query master_box_id(string) : Specific Master Box ID to search (optional) room_id(number) :Existing room ID (creates new room if none)
Output{ room_id, query: {id, user_query, context, ai_answer, master_box_id_used, sequence_number, created_at}, deducted_credits, message, context }
API EndpointPOST /chatbot/search

getChatbotBoxContents({master_box_id})

Retrieves content list of a specific master box.

Input Parametersmaster_box_id(string) : Master box ID to query
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 EndpointGET /chatbot/boxes/{master_box_id}/contents?skip=0&limit=100

getChatbotRooms()

Retrieves chatbot room list.

Input Parametersx
OutputArray<{room_id, title, initial_master_box_id, created_at, updated_at, query_count}>
API EndpointGET /chatbot/rooms

getChatbotRoomsDetail(room_id)

Retrieves detailed information (chat history) of a specific chatbot room.

Input Parametersroom_id(number) :Room ID to query
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 EndpointGET /chatbot/rooms/{room_id}

postRagSearch({query, box_id, room_id})

Performs RAG search on content within specified Client Box and records results in Room.

Input Parametersquery : RAG search query box_id(string) : Client Box ID to use as search context (optional) room_id(number) :Existing search record room ID (creates new if none)
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 search results and metadata
API EndpointPOST /rag/search

postRagSearchAllBoxes({query, room_id})

Performs RAG search on content within all accessible Client Boxes and records results in Room.

Input Parametersquery : RAG search query room_id(number) :Existing search record room ID (creates new if none)
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 search results and metadata
API EndpointPOST /rag/search-all-boxes

getRagRooms({limit, skip})

Retrieves list of all Client's RAG search record rooms.

Input Parameterslimit : Number of items to retrieve (max 50, min 1), default 20 skip : Number of items to skip (pagination), default 0
OutputArray<{room_id: number, title: string, initial_box_id: string, created_at: string, updated_at: string, query_count: number}> → RAG search record room list
API EndpointGET /rag/rooms?limit={limit}&skip={skip}

getRagRoomsDetail({room_id, skip, limit})

Retrieves all Q&A from a specific RAG search record room.

Input Parametersroom_id(number) :Search record room ID to query skip : Number of messages to skip, default 0 limit : Number of messages to retrieve, default 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 search record room details
API EndpointGET /rag/rooms/{room_id}?skip={skip}&limit={limit}
Contents API

getClientContents({box_id, limit, offset})

Retrieves content list (Box filtering available).

Input Parametersbox_id(string) : Box ID to filter (optional) limit : Number of items per page (min 1, max 100), default 20 offset : Number of items to skip, default 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}>}> } → Content list and metadata
API EndpointGET /client/contents?box_id={box_id}&limit={limit}&offset={offset}

getContents(request_id)

Retrieves detailed content information.

Input Parametersrequest_id (string): request_id of content to query (short 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}> } → Detailed content information
API EndpointGET /contents/{request_id}

deleteContents(request_id)

Deletes content corresponding to given request_id.

Input Parametersrequest_id (string): request_id of content to delete (short Hex)
OutputNone (204 response on success)
API EndpointDELETE /contents/{request_id}

patchContents({request_id, title, content, url})

Modifies title, content, URL, etc. of specific content.

Input Parametersrequest_id(string) : request_id of content to modify title : Content title to change (optional) content : Content text to change (optional) url : Original URL to change (optional)
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}> } → Modified content information
API EndpointPATCH /contents/{request_id}

patchContentsTags({request_id, tags_to_add, tags_to_remove})

Partially modifies tags linked to specific content.

Input Parametersrequest_id(string) : request_id of content to modify tags tags_to_add : List of tags to add tags_to_remove : List of tag names 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}> } → Modified content and tag information
API EndpointPATCH /contents/{request_id}/tags
taggingBox - 초개인화된 태그를 활용해 정보를 분류하세요