Next.jsとLangchainで始めるAIアプリ開発！Vercel AIでさらに簡単に

1. はじめに：AIアプリ開発の基礎知識

1.1 AIアプリ開発とは？

AIアプリ開発とは、人工知能（AI）の技術を活用したアプリケーションを開発することです。例えば、チャットボット、画像認識アプリ、文章生成ツールなどが挙げられます。

1.2 なぜNext.js、Langchain、Vercel AIを使うのか？

• Next.js: Reactをベースにしたフレームワークで、高速なWebサイトやアプリケーションを簡単に構築できます。サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）などの機能により、SEOにも強く、パフォーマンスの高いアプリを作れます。
• Langchain: 大規模言語モデル（LLM）を扱うためのフレームワークです。LLMとは、大量のテキストデータを学習し、人間のような自然な文章を生成できるAIモデルのことです。Langchainを使うことで、LLMを簡単にアプリに組み込むことができます。
• Vercel AI: Vercelが提供するAIプラットフォームです。AIモデルの管理、デプロイ、スケーリングを簡単に行うことができます。

これらのツールを組み合わせることで、AIアプリ開発の複雑さを軽減し、開発者はより創造的な作業に集中できるようになります。

2. 開発環境の準備

2.1 Node.jsとnpmのインストール

まず、Node.jsとnpm（Node Package Manager）をインストールします。Node.jsはJavaScriptをサーバーサイドで実行するための環境であり、npmはNode.jsのパッケージを管理するためのツールです。

Node.jsの公式サイトからインストーラーをダウンロードし、指示に従ってインストールしてください。

2.2 Vercel CLIのインストール

Vercel CLI（コマンドラインインターフェース）をインストールします。Vercel CLIを使うことで、ローカル環境で開発したアプリをVercelに簡単にデプロイできます。

npm install -g vercel

2.3 Vercelアカウントの作成

Vercelの公式サイトでアカウントを作成します。GitHub、GitLab、Bitbucketなどのアカウントを使ってサインアップできます。

3. Next.jsプロジェクトの作成

3.1 create-next-appの利用

Next.jsのプロジェクトを簡単に作成するために、create-next-appというツールを使います。

npx create-next-app my-ai-app
cd my-ai-app

3.2 プロジェクトの構成

作成されたプロジェクトの構成は以下のようになります。

• pages/: ページを定義するディレクトリ。pages/index.jsがトップページになります。
• public/: 静的ファイルを配置するディレクトリ。
• styles/: CSSファイルを配置するディレクトリ。

4. Langchainの導入

4.1 Langchainのインストール

Langchainをプロジェクトにインストールします。

npm install langchain

4.2 環境変数の設定

Langchainを使うためには、OpenAI APIキーなどの環境変数を設定する必要があります。.env.localファイルを作成し、APIキーを設定します。

OPENAI_API_KEY=YOUR_OPENAI_API_KEY

注意: APIキーは絶対に公開しないでください。

5. Vercel AI SDKの利用

5.1 Vercel AI SDKのインストール

Vercel AI SDKをインストールします。

npm install @vercel/ai

5.2 AIモデルの利用

Vercel AI SDKを使うことで、AIモデルを簡単に利用できます。例えば、テキスト生成モデルを使って、ユーザーからの質問に答えることができます。

// pages/api/chat.js
import { OpenAIStream, StreamingTextResponse } from '@vercel/ai';
import { Configuration, OpenAIApi } from 'openai';

const config = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});
const openai = new OpenAIApi(config);

export const runtime = 'edge';

export default async function (req, res) {
  // ユーザーからの質問を取得
  const { prompt } = await req.json();

  // OpenAI APIを使ってテキストを生成
  const response = await openai.createCompletion({
    model: 'text-davinci-003', // 使用するモデル
    prompt: prompt, // ユーザーからの質問
    temperature: 0.7, // 生成されるテキストのランダム性
    max_tokens: 200, // 生成されるテキストの最大トークン数
    stream: true, // ストリーミングでレスポンスを返す
  });

  // ストリーミングレスポンスを返す
  const stream = OpenAIStream(response);
  return new StreamingTextResponse(stream);
}

このコードは、pages/api/chat.jsというAPIエンドポイントを作成し、ユーザーからの質問を受け取り、OpenAI APIを使ってテキストを生成し、ストリーミングでレスポンスを返すものです。

5.3 フロントエンドの実装

フロントエンドで、APIエンドポイントを呼び出し、生成されたテキストを表示します。

// pages/index.js
import { useState } from 'react';

export default function Home() {
  const [prompt, setPrompt] = useState('');
  const [response, setResponse] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();

    // APIエンドポイントを呼び出す
    const res = await fetch('/api/chat', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ prompt }),
    });

    // レスポンスを読み込む
    const reader = res.body.getReader();
    let result = '';
    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        break;
      }
      result += new TextDecoder().decode(value);
      setResponse(result);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
        />
        <button type="submit">送信</button>
      </form>
      <p>{response}</p>
    </div>
  );
}

このコードは、ユーザーが質問を入力し、送信ボタンをクリックすると、pages/api/chat.jsエンドポイントを呼び出し、生成されたテキストを画面に表示するものです。

6. Vercelへのデプロイ

6.1 Vercel CLIを使ったデプロイ

Vercel CLIを使って、アプリをVercelにデプロイします。

vercel

Vercel CLIが、プロジェクトを自動的に検出し、デプロイに必要な設定を行います。

6.2 環境変数の設定

Vercelにデプロイする際に、環境変数を設定する必要があります。Vercelのダッシュボードで、OPENAI_API_KEYなどの環境変数を設定してください。

7. まとめ

この記事では、Next.js、Langchain、そしてVercel AIを使って、AIアプリ開発を始める方法を解説しました。

• Next.jsでWebアプリケーションの基盤を構築
• Langchainで大規模言語モデル（LLM）を簡単に利用
• Vercel AIでAIモデルの管理とデプロイを効率化

これらのツールを組み合わせることで、AIアプリ開発のハードルを下げ、より多くの人がAI技術を活用できるようになります。

次のステップ:

• Langchainのドキュメントを読んで、より高度な機能を試してみましょう。
• Vercel AIのドキュメントを読んで、AIモデルの管理やデプロイについて学びましょう。
• 実際にAIアプリを開発し、Vercelにデプロイしてみましょう。

関連リソース:

• Next.js: https://nextjs.org/
• Langchain: https://www.langchain.com/
• Vercel AI: https://vercel.com/ai

この記事が、あなたのAIアプリ開発の第一歩となることを願っています！