MD-Blog_Web Creative

猛暑の中、エアコン壊れて困ってませんか？今年もブログ夏の陣担当、namio.arakiです。

今年に入ってから大型プロジェクトでいろいろとキャッチアップが覚束なく、気づいたらLangChainもv0.2になっていました。以前見たときにv0.1がリリースされて試そうと思い先送りになっていたので、いい機会として触ってみます。

AIを弄る言語と言えばまずPythonが思い浮かべると思います。僕も去年PythonでOpenAIのAPIなど弄って遊んでいましたが、Webフロントエンドエンジニアの方はPythonよりもTypeScriptのほうが馴染み深く、気軽に触れると思いますので今回はTypeScriptで試してみます。

LangChainを介さずにOpenAIやGemini Proを直接TypeScriptで触ってみてもいいのですが、今回はLangChainのようなライブラリを介することによって、使い勝手が統一されたり、使い用途が広がります。詳しくはLangChainのIntroductionをご確認ください。

LangChain v0.2のドキュメントでは、v0.1のドキュメントにあるGet started が執筆時点ではまだ存在しないようですので、本記事ではそのGet startedをv0.2に置き換えて試していきたいと思います。

開発環境の準備

TypeScript環境でLangChainに必要なNodeのバージョンは、18.x, 19.x, 20.xになります。
またTypeScriptの環境は使い慣れているツールやプラットフォームを用いてもらって問題ないですが、今回はViteを使います。

まずはベースとなるViteプロジェクトを作成します。

$ pnpm create vite

√ Project name: ... vite-langchain
√ Select a framework: » Vanilla
√ Select a variant: » TypeScript

  cd vite-langchain
  pnpm install
  pnpm run dev

LangChainのインストール

続いて、Get started に記述されている通り@langchain/openaiと@langchain/communityを入れます。

$ pnpm add @langchain/openai @langchain/community

package.jsonを見ると、下記のようにv0.2.xが入ってます。

{
    "dependencies": {
        "@langchain/community": "^0.2.27",
        "@langchain/openai": "^0.2.6"
    }
}

また下記のようにcoreパッケージを使っているようですので、

import { ChatPromptTemplate } from "@langchain/core/prompts";
import { StringOutputParser } from "@langchain/core/output_parsers";

coreパッケージもインストールします。

$ pnpm add @langchain/core

Basic example: prompt + model + output parserを試す

import { ChatOpenAI } from "@langchain/openai";
import { ChatPromptTemplate } from "@langchain/core/prompts";
import { StringOutputParser } from "@langchain/core/output_parsers";

const prompt = ChatPromptTemplate.fromMessages([
  ["human", "Tell me a short joke about {topic}"],
]);
const model = new ChatOpenAI({});
const outputParser = new StringOutputParser();

const chain = prompt.pipe(model).pipe(outputParser);

const response = await chain.invoke({
  topic: "ice cream",
});
console.log(response);
/**
Why did the ice cream go to the gym?
Because it wanted to get a little "cone"ditioning!
 */

準備は整いましたので上記サンプルをpnpm run devを叩いて実行すると、

Error: OpenAI or Azure OpenAI API key or Token Provider not found
    at new ChatOpenAI (@langchain_openai.js?v=2cf2cd25:6972:13)
    at main.ts:8:15

と下記の部分でエラーになります。

const model = new ChatOpenAI({});

エラー文言のままなのですが、OpenAI API keyがセットされていないため、下記のようにセットします。
※Viteの.env(環境変数）にOPENAIのAPI Keyをセットしています。

const model = new ChatOpenAI({
    openAIApiKey: import.meta.env.VITE_PUBLIC_OPENAI_API_KEY,
});

そうすると下記のようにconsole.logが出ました！

Why did the ice cream truck break down?
Because it had too many "scoops"!

日本語化

ここでサンプルの実行は無事完了したのですが、せっかくですので少し弄ってみます。
まずは日本語でのやり取りに変更します。直接promptの部分を日本語に変えてもいいのですが、他の言語でも対応できるようにresponseから受け渡しを行います。 今回は直接コード上に書きますが、実際はAPI KEY同様に.env(環境変数）にセットするのがいいと思います。

const response = await chain.invoke({
    topic: "ice cream",
    language: "Japanese",
});

responseに上記セットし、promptで受け取ります。

const prompt = ChatPromptTemplate.fromMessages([
    ["human", "Tell me a short joke about {topic} in {language}."],
]);

アイスクリームはなぜ冷たいですか？
なぜなら、冷蔵庫で寝ているから！

とちゃんと日本語でconsole.logが出ました！
せっかくなのでtopicを「Paris 2024 Olympics」としてみます。

パリのオリンピック2024年は、エッフェル塔が金メダルを獲得するかもしれません！

いいですね。

さらに、systemもセットしてみます。

const prompt = ChatPromptTemplate.fromMessages([
    ["system", "You are {role}"],
    ["human", "Tell me a short joke about {topic} in {language}."],
]);

小学生（role: "Elementary school students"）

パリオリンピック2024年は、なぜ面白いか知ってる？なぜなら、選手たちがバゲットを持って走るから！

芸人（role: "Comedian"）

パリ2024オリンピックの運動競技で一番人気な競技は何でしょうか？　「おしゃべりマラソン」です！

どうでしょうか？笑

まとめ

LangChain v0.2のドキュメントにGet startedがない。ということで、何か詰まるのかと思いきや、特に問題なくサラッと試すことができました。　　 ちょっと拍子抜けした感はありますが、LangChain v0.2のドキュメントにない部分は、v0.1のドキュメントを参考にしつつ試していくのがよさそうです。

OpenAIやGeminiなど使用するモデルのAPI KEYを取得する必要はありますがKEYさえ取得できれば気軽に試せるので、ぜひ試してみてください。いろいろなアイディアにつながると思います。とはいえ気づいたらAPI使用料が、、とならないよう計画的に。

MONSTERDIVEではこのようにいただいた案件に対するOUTPUTだけではなく、案件に結び付くようなINPUTも重要視しています。1人では様々なジャンルのキャッチアップが難しいかもしれませんので、MONSTERDIVEではチームで勉強会やSlackでのナレッジシェアなどを積極的に行っています。少しでも興味があれば、ぜひお気軽にこちらの求人情報ページからお問い合わせください。

一緒にモノづくりをしませんか？