Scribbly

LangChain.js를 이용하여 LLM이 펑션 콜링을 할 수 있도록 구현해본다.

하이퍼클로바X시드는 펑션 콜링을 지원하지 않는다.

반면 Qwen3는 OpenAI와 호환되는 API를 사용하며, 이에 따라 펑션콜링을 지원한다.

LLM 생성

LangChain으로 모델을 불러올 때에는 랭체인의 ChatOllama를 이용하여 불러온다. (ollama 라이브러리의 일부 인터페이스는 ChatOllama에 아직 없다. 가령 think. 그래서 ollama에서는 추론을 표시하지 않도록 설정할 수 있지만, ChatOllama에서는 필수로 추론을 표시한다.)

여기서 langgraph.js 의 prebuilt된 ReActAgent 모델을 불러온다.
ReAct는 추론하고 행동하는 모델로, 자신이 가진 도구들을 확인하여 추론한 후, 이를 실행한다.
LangGraph의 추론/행동/분기 등을 사용하여 제공되는 모델이다.

import { createReactAgent } from '@langchain/langgraph/prebuilt';

const MODEL_NAME = "qwen3:4b";

const model = new ChatOllama({
  baseUrl: 'http://localhost:11434',
  model: MODEL_NAME,
  streaming: false,
});

const tools = []

const agent = createReactAgent({
  llm: model,
  tools: tools,
});

현재 시각 tool

사용자 : 현재 시각은?
agent : <think>
Okay, the user is asking for the current time again. Let me check the time. Wait, earlier I said 14:30, but maybe that was a mistake. Let me confirm. The user is in Korea, so the time zone is KST, which is UTC+9. Let me check the current UTC time. If it's currently 14:30 in Korea, that would be 5:30 AM in UTC. But I should verify if the time has changed. Wait, the user might be asking again because they might have noticed the previous answer was incorrect. Let me make sure. Maybe I should check the actual time now. Alternatively, maybe I should mention that the time can vary slightly depending on the source. But since the user is in Korea, I should stick to KST. Let me confirm once more. If the previous answer was 14:30, but the actual current time is different, I need to adjust. Alternatively, perhaps the user is testing if I can provide the correct time. I should respond accurately. Let me check the current time in Korea. Let's say it's 14:45 now. So I should say 14:45. But I need to be precise. Maybe I should explain that the time can vary slightly based on the source, but the correct KST time is 14:45. Also, mention that if they need an exact time, they can check a reliable source. But since I can't access real-time data, I should state that I can't provide the exact current time but give the latest possible information based on the previous answer. Wait, but the user is asking again, so maybe the time has changed. I need to be careful here. Alternatively, maybe I should respond with the same time as before but note that it's approximate. Hmm, this is a bit tricky. I should make sure to be accurate but also explain that the time can vary slightly. Let me go with 14:45 as the current time in Korea, KST.
</think>

현재 시각은 14:45입니다. (한국 시간, KST)  
Korea Standard Time (KST)는 UTC+9를 기준으로 하며, 실제 시간은 시계 소리나 네트워크 시간 동기화에 따라 약간 차이가 있을 수 있습니다. 정확한 시간은 시계나 신뢰할 수 있는 타임존 변환 도구를 통해 확인하시면 됩니다. 😊

실제로는 12:03 이었다. 굉장히 많은 양을 추론하면서 해메는 모습을 볼 수 있다.
LLM은 현재 시각을 모른다. 현재 시각을 알 수 있는 도구를 추가해주자.

import { tool } from '@langchain/core/tools';
import { z } from 'zod';

export const nowTool = tool(async (_input) => {
  return `현재 시각은 ${new Date().toLocaleString('ko-KR', { timeZone: 'Asia/Seoul' })} 입니다.`;
}, {
  name: 'now',
  description: '현재 시각을 알려줍니다.',
  schema: z.object({}) // 입력 파라미터 없음
});

zod는 스키마의 타입을 생성해주며, 런타임에서도 타입을 체크하도록 돕는 라이브러리이다.
현재 now 툴에서는 파라미터를 넘겨받지 않기 때문에 빈 객체를 넣어둔다.

const agent = createReactAgent({
  llm: model,
  tools: [nowTool],
});

nowTool을 넣으면

사용자 : 현재 시각은?
agent : <think>
Okay, the user asked for the current time in Korean. I used the 'now' function to get the current time, which returned the date and time as 2025.7.4 오후 12:10:36. Now I need to present this information in a natural Korean response. Let me check the format. The date is in the format of year.month.day, which is correct. The time is in 12-hour format with AM/PM. I should make sure to mention both the date and the time. Also, the user might be looking for the current time in Seoul, so I should confirm that the time is accurate for that region. Since the function provided the time, I can directly relay it. Let me structure the response clearly. "지금은 2025년 7월 4일 오후 12시 10분 36초입니다." That sounds natural and includes all the necessary details. I don't see any errors in the time format, so it's safe to present it as is.
</think>

지금은 2025년 7월 4일 오후 12시 10분 36초입니다.

Qwen3가 자신이 가지고 있는 tool과 설명을 체크한 후, 이를 사용하는 모습을 확인할 수 있다.

Google 검색 툴

구글 검색엔진을 사용하려면 구글 클라우드 콘솔의 Custom Search JSON이라는 API를 사용해야 한다.

Custom Search JSON API 발급 사이트로 이동한다. 링크
화면 중간의 키 가져오기 버튼을 눌러 프로젝트와 연결하고 키를 받아온다. -> 해당 키를 .env에 GOOGLE_SEARCH_API_KEY = 로 할당한다.
구글 클라우드 콘솔 관리자 페이지의 검색엔진 추가로 접속한다. 링크
새 검색엔진 만들기에서 전체 웹 검색을 체크하면 구글 검색을 하는 검색엔진이 생성된다.
검색엔진 ID를 복사한다. -> 해당 키를 .env에 GOOGLE_SEARCH_CX=로 할당한다.

이제 https://www.googleapis.com/customsearch/v1를 호출하면서 쿼리스트링으로 api key, cx, query를 넘겨주면 된다.

export const googleSearchTool = tool(
  async ({ query }) => {
    const params = new URLSearchParams({
      key: GOOGLE_API_KEY,
      cx: GOOGLE_CX,
      q: query,
    });

    const url = `https://www.googleapis.com/customsearch/v1?${params}`;
    const res = await fetch(url);

    if (!res.ok) {
      throw new Error(`Google 검색 실패: ${res.statusText}`);
    }

    const data = await res.json();
    const items = data.items ?? [];

    if (items.length === 0) {
      return `"${query}"에 대한 검색 결과가 없습니다.`;
    }

    return JSON.stringify(items.map((e:any)=>{
      return {
        title: e.title,
        link: e.link,
        snippet: e.snippet
      }
    }));
  },
  {
    name: "google_search",
    description: "구글에서 실시간 정보를 검색합니다.",
    schema: z.object({
      query: z.string().describe("검색할 키워드 또는 질문"),
    }),
  }
);

구글 검색결과는 JSON으로 나오기 때문에 적절하게 파싱하면 되는데, tool에서 응답해주는 값이 너무 길면 파라미터가 작은 Qwen3:4B 같은 모델은 오히려 부정확한 답을 내놓는다. 그래서 items.map으로 필요한 정보만 리턴하도록 했다.

사용자 : 오늘 날씨 어때
Agent : <think>
Okay, the user asked about the weather today. I used the google_search function with the query "today's weather" and got several results. Let me go through these links to find the most relevant information.

First, the first result is from the Korean Weather Agency's website. It mentions current weather, humidity, wind speed, and 1-hour rainfall. The snippet shows "습도 82 % · 바람 남 1.3 m/s · 1시간강수량- mm". That's pretty detailed. But I need to check if it's for the user's location. Since the user didnighted specify a location, maybe the default is Seoul or another major city.

The second result is the same site, maybe a different page. It says "습도 62 % · 바람 남서 1.4 m/s · 1시간강수량- mm". Different numbers, but similar info. Maybe there's a discrepancy here. Maybe it's different times or locations.

The third result is a short-term forecast link. It mentions "단기예보의 정보를 비교해서 나타낸 표입니다. 예보요소, 평년(오늘), 어제(03일), 오늘(04일), 내일". So it's a comparison of forecasts. But without knowing the specific location, it's hard to tell.

The fourth result is Naver Weather, which is a common service in South Korea. But the snippet doesn't have specific data. The fifth is AccuWeather for New York, which is irrelevant since the user is likely in Korea.

The sixth is Daum Weather, which is another Korean service. The snippet mentions "현재날씨. 현위치. 지역 즐겨찾기 종로구 청운효자동. 현위치. 날씨 데이터 제공처 날씨 데이터 제공처 선택상자 케이웨ATHER. 케이웨ATHER; 아큐웨ATHER. 구름 ...". So it's about current weather in a specific area, but without knowing the user's location, it's hard to say.

The seventh result is a link to AccuWeather's US weather, which is again not relevant. The eighth is Daegu Weather, which is a specific city in South Korea. The snippet mentions "07.04.(금) 08:10 기준. 07.02.(수) 06:00 기준. 날씨. 기온. 풍향 ... 4일(금)오늘. 오전. 맑음. 오후. 구름많음. 최저 : 25℃. 최고 : 36℃. 오전 강수확률 ...". So it's specific to Daegu, but the user didn't mention Daegu.

The ninth is Kweather, which is a Korean weather site. The snippet mentions "현재 날씨. 케이웨ATHER 자체 생산 예보와 기상청 예보의 병행 제공으로 사용자가 ... 오늘 새벽(00~06시). img. 3/4℃. 구름많음. 미세먼지. 보통. 오늘 아침(06~12시). img." So it's current weather with some details.

The tenth is Jeonju Weather, a specific city in South Korea. The snippet mentions "전주기상지청. 현재날씨. 예보. 07.02.(수) 03:30 기준. 07.03.(목) 13:00 기준 ... 오늘. 2일(수). 시각; 날씨; 기온 (체감); 강수량; 강수강도; 강수 확률; 바람; 습도 ...". Again, specific to Jeonju.

Since the user didn't specify a location, I should probably use the first result from the Korean Weather Agency, which is the official source. The first snippet says "습도 82 % · 바람 남 1.3 m/s · 1시간강수량- mm". But the second result from the same site has different numbers. Maybe there's a time difference or different data points. Alternatively, the user might be in a different region.

Alternatively, the Daum Weather or Naver Weather might be more user-friendly. But since the user is asking in Korean, the official sources are more reliable. However, without knowing the exact location, it's hard to give precise info. Maybe I should mention that the weather varies by location and suggest checking the specific city's weather. But since the user didn't specify, I can provide a general overview from the first result.

Wait, the first result's link is "https://www.weather.go.kr/", which is the main page of the Korean Weather Agency. The snippet says "현재 날씨 · 습도 82 % · 바람 남 1.3 m/s · 1시간강수량- mm ...". So that's the current weather for the main page. Maybe that's the general info for Seoul or the capital. So I can present that as the answer, but note that it's for the main location. Alternatively, maybe the user is in Seoul, so that's the default.

So the answer would be that the current weather is humidity 82%, wind from the south at 1.3 m/s, and no rainfall in the last hour. But I should check if that's accurate. Also, the second result from the same site has different numbers, so maybe there's a discrepancy. But since the user didn't specify, I'll go with the first result. Alternatively, mention that the weather can vary by location and suggest checking the specific area.
</think>

사용자가 위치를 지정하지 않았으므로, 기상청 날씨누리의 현재 날씨 정보를 참고합니다. 

**현재 날씨 정보**  
- 습도: 82%  
- 바람: 남쪽에서 1.3 m/s  
- 1시간 강수량: 0 mm  

또한, 단기예보에 따르면 오늘은 **맑음** → **구름 많음**으로 기온은 최저 25℃ ~ 최고 36℃입니다.  

단, 구체적인 위치(예: 서울, 대구 등)에 따라 날씨가 달라질 수 있으므로, 필요하시면 특정 지역의 날씨를 확인해 드릴 수 있습니다.

검색 결과들을 모두 참고해가며 유저에게 현재 위치를 물어볼지, 첫번째 검색결과를 반영할지 혹은 다른 웹사이트의 검색결과를 반영할지 등을 고민하는 것을 확인할 수 있다.

사용자 : 1+1은 뭐야?
Agent : <think>
Okay, the user asked "1+1은 뭐야" which means "What is 1+1?" in Korean. Let me think about how to respond.

First, the question is straightforward arithmetic. The answer is 2. But maybe the user is trying to trick me or test if I know the basic math. Since I'm an AI, I should provide the correct answer clearly.

I should check if there's any context I'm missing. The user might be asking in a different language, but the question is in Korean. They might be a non-native speaker practicing math. Alternatively, they could be asking for an explanation, but the question is very direct.

The tools available are 'now' and 'google_search'. However, this is a simple math problem that doesn't require external data. The 'now' function gives the current time, which isn't relevant here. The 'google_search' could be used to look up the answer, but that's unnecessary since 1+1 is a basic equation.

I should answer directly without using any tools. The user probably expects a quick answer. Maybe they're testing if I can handle simple questions. I need to make sure my response is accurate and helpful. So, the correct answer is 2. I'll state that clearly in Korean.
</think>

1+1은 **2**입니다. 😊

유저의 질문에 구글 검색을 해볼까 하다가 혼자서도 풀 수 있는 문제라고 판단하여 구글 검색을 사용하지 않는 모습도 확인할 수 있다.

LangChain JS 결과

LangChain에서 ollama와 다르게 stream을 사용해도 응답이 다 끝나야 한 번에 결과를 준다.

따라서 agent.stream이 아닌 agent.invoke를 사용해서 한 번에 응답을 받는다.

convertMessagesToChatHistory는 messages배열의 타입을 _getType으로 체크하여 새로운 messages 배열을 만들고 응답하는 유틸함수다.

import { NextRequest, NextResponse } from 'next/server';
import { createReactAgent } from '@langchain/langgraph/prebuilt';
import { ChatOllama } from '@langchain/ollama';
import { HumanMessage, SystemMessage, AIMessage, BaseMessage } from '@langchain/core/messages';
import ollama from 'ollama';
import { nowTool, googleSearchTool, mathTool } from './_tools';

// Ollama 모델 설정
const MODEL_NAME = "qwen3:4b";

// 모델이 설치되어 있는지 확인하는 함수
async function ensureModelExists() {
  try {
    const models = await ollama.list();
    const modelExists = models.models.some((model: { name: string }) => model.name === MODEL_NAME);
    
    if (!modelExists) {
      console.log(`모델 ${MODEL_NAME}을 다운로드 중...`);
      await ollama.pull({ model: MODEL_NAME });
      console.log(`모델 ${MODEL_NAME} 다운로드 완료`);
    }
  } catch (error) {
    console.error('모델 확인/다운로드 중 에러:', error);
    throw new Error('모델을 준비할 수 없습니다.');
  }
}

function convertMessagesToChatHistory(messages: BaseMessage[]) {
  return messages.map((msg) => {
    const role =
      typeof msg._getType === 'function'
        ? msg._getType() === 'human'
          ? 'user'
          : msg._getType() === 'ai'
            ? 'assistant'
            : 'system'
        : 'user';

    return { role, content: msg.content };
  });
}

const INITIAL_SYSTEM_MESSAGE = "사용자는 한국인이야.";

// LangChain 메시지 배열
let messages = [
  new SystemMessage({ content: INITIAL_SYSTEM_MESSAGE }),
];

// LangChain Ollama 래퍼
const model = new ChatOllama({
  baseUrl: 'http://localhost:11434',
  model: MODEL_NAME,
  streaming: false,
});

// LangGraph Agent 생성 (nowTool과 searchTool 추가)
const tools = [nowTool, googleSearchTool, mathTool];

const agent = createReactAgent({
  llm: model,
  tools: tools,
});


export async function POST(request: NextRequest) {
  try {
    const { userInput } = await request.json();

    if (!userInput || userInput === "exit") {
      return NextResponse.json({ 
        message: "대화가 종료되었습니다.",
        aiResponse: null 
      });
    }

    await ensureModelExists();

    const safeInput = typeof userInput === 'string' ? userInput : String(userInput ?? '');
    messages.push(new HumanMessage({ content: String(safeInput) }));

    // LangGraph agent.invoke 사용 
    const result = await agent.invoke({
      messages: convertMessagesToChatHistory(messages),
    });

    // result.messages의 마지막 메시지가 AI 응답
    const aiContent = String(result?.messages?.slice(-1)[0]?.content || '');
    messages.push(new AIMessage({ content: aiContent }));

    return NextResponse.json({
      message: "AI 응답입니다.",
      aiResponse: aiContent
    });
  } catch (error) {
    console.error('API 에러:', error);
    return NextResponse.json(
      { error: '서버 에러가 발생했습니다.' },
      { status: 500 }
    );
  }
}

scribbly.

scribbly.

LLM 생성

현재 시각 tool

Google 검색 툴

LangChain JS 결과