0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Vercel の AI SDK と LM Studio を使ったローカルLLM を組み合わせて試す【Node.js】

Last updated at Posted at 2025-09-01

はじめに

これまで、ちょこちょこ使っては記事も書いていた、Vercel の AI SDK の話です。

●「vercel ai sdk user:youtoy」の検索結果 - Qiita
 https://qiita.com/search?q=vercel%20ai%20sdk%20user%3Ayoutoy&sort=created

今回の内容

今回は、それを LM Studio を使ったローカルLLM と組み合わせてみます。

具体的には、以下の「OpenAI Compatible Providers」で LM Studio の OpenAI互換の API を使います。

●OpenAI Compatible Providers: LM Studio
 https://ai-sdk.dev/providers/openai-compatible-providers/lmstudio

2025-09-01_21-37-09.jpg

さっそく試す

さっそく試していきます。

パッケージのインストール

パッケージをインストールを、以下のコマンドで行います。

npm i ai @ai-sdk/openai-compatible

以下のように、パッケージがインストールされました(バージョンを確認するコマンドも実行してみています)。

2025-09-01_21-39-11.jpg

記事執筆時点では、 @ai-sdk/openai-compatible@1.0.13ai@5.0.29 がインストールされました。

LM Studio の準備

今度は、LM Studio の準備です。

LM Studio のお試しもちょこちょこやって、それで記事を書いていて、OpenAI互換のAPI でのローカルLLM というのも、以下の記事に書いた内容をやっています。

●LM Studio の OpenAI互換のAPI でローカルLLM でのストリーミングの軽いお試し(M4 MacBook Air を利用)【Node.js】 - Qiita
 https://qiita.com/youtoy/items/4d3fdcda979f6778016b

上記の記事では、OpenAI公式のパッケージを使って API を扱っていますが、今回は AI SDK の OpenAI Compatible Providers を使う形になります。

ローカルサーバーの準備

LM Studio を使ったローカルサーバーの準備は、GUI から行うのが分かりやすい方法の 1つです。

まずは、LM Studio の以下をクリックします。

2025-09-02_00-01-38.jpg

その後、以下の部分を ON にすれば OK です。

2025-09-02_00-02-15.jpg

以下のような表示になっていれば OK です。

2025-09-02_00-02-57.jpg

OpenAI Compatible Providers を使ったコード

公式ページのサンプル

OpenAI Compatible Providers を使ったコードの情報を見てみます。

Provider Instance という部分で以下の内容が示されていますが、これを含むコードを書いていきます。

import { createOpenAICompatible } from '@ai-sdk/openai-compatible';

const lmstudio = createOpenAICompatible({
  name: 'lmstudio',
  baseURL: 'http://localhost:1234/v1',
});

Example と書かれた部分を見ると、以下のコードが示されています。

import { createOpenAICompatible } from '@ai-sdk/openai-compatible';
import { generateText } from 'ai';

const lmstudio = createOpenAICompatible({
  name: 'lmstudio',
  baseURL: 'https://localhost:1234/v1',
});

const { text } = await generateText({
  model: lmstudio('llama-3.2-1b'),
  prompt: 'Write a vegetarian lasagna recipe for 4 people.',
  maxRetries: 1, // immediately error if the server is not running
});

上記では model: lmstudio('llama-3.2-1b') という指定をしていますが、自分は今回は、以下の記事で書いている GGUF版の「Gemma 3 270M」を使うことにします。

●M4 の MacBook Air で爆速なローカルLLM: GGUF版の「Gemma 3 270M」でシンプルな日本語のやりとり(LM Studio を利用) - Qiita
 https://qiita.com/youtoy/items/ccebe67ec52a7b6a8c15

Hugging Face上のページでは以下になります。

●lmstudio-community/gemma-3-270m-it-GGUF · Hugging Face
 https://huggingface.co/lmstudio-community/gemma-3-270m-it-GGUF

LM Studio上でロードして GUI からサーバーをたててみたところ、「API Usage」の部分で「This model's API identifier」という記載とともに「gemma-3-270m-it」という名称が示されていました。

2025-09-01_21-51-52.jpg

これを、 model: lmstudio('gemma-3-270m-it') という感じで使ってやれば良さそうです。

OpenAI Compatible Providers を使ったお試しのコードと実行結果

今回のお試し用のコードは以下としました。

import { createOpenAICompatible } from "@ai-sdk/openai-compatible";
import { generateText } from "ai";

const lmstudio = createOpenAICompatible({
  name: "lmstudio",
  baseURL: "http://localhost:1234/v1",
});

const { text } = await generateText({
  model: lmstudio("gemma-3-270m-it"),
  prompt: "あなたは誰?",
  maxRetries: 1,
});

console.log(text);

上記を実行した結果は、以下の通りです。無事に、Vercel の AI SDK での処理を使って、LM Studio を使ったローカルサーバーの API を使うことができました。

2025-09-01_23-58-13.jpg

この時、LM Studio側のログ出力を見てみると、上記の API でのやりとりに関するログが出力されていました。

2025-09-02_00-06-38.jpg

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?