【2026年版】LLM/AIアプリ開発入門｜OpenAI API・RAG・Next.jsで作るAIチャットアプリの実装ガイド

ChatGPTやClaudeなどのLLM（大規模言語モデル）をアプリに組み込む開発が急速に普及しています。本記事では、OpenAI API・Anthropic API・LangChainを使った実践的なAIアプリ開発の方法を解説します。

LLMを使ったアプリ開発の全体像

AIアプリ開発では、主に以下の技術スタックが使われています。

• LLM API：OpenAI（GPT-4o）、Anthropic（Claude）、Google（Gemini）
• フレームワーク：LangChain、LlamaIndex、Vercel AI SDK
• ベクトルDB：Pinecone、Supabase（pgvector）、Chroma
• フロントエンド：Next.js、React、Streamlit（Pythonアプリ）
• デプロイ：Vercel、Fly.io、AWS Lambda

OpenAI APIを使った基本的なチャットアプリ

セットアップ

npm install openai
# または
pip install openai

TypeScript実装例

import OpenAI from "openai";

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

// シンプルなチャット
async function chat(userMessage: string): Promise<string> {
  const response = await openai.chat.completions.create({
    model: "gpt-4o",
    messages: [
      {
        role: "system",
        content: "あなたは優秀なプログラミングアシスタントです。日本語で回答してください。",
      },
      {
        role: "user",
        content: userMessage,
      },
    ],
    temperature: 0.7,
    max_tokens: 2000,
  });

  return response.choices[0].message.content ?? "";
}

// ストリーミング対応版
async function chatStream(userMessage: string): Promise<void> {
  const stream = await openai.chat.completions.create({
    model: "gpt-4o",
    messages: [{ role: "user", content: userMessage }],
    stream: true,
  });

  for await (const chunk of stream) {
    const content = chunk.choices[0]?.delta?.content;
    if (content) process.stdout.write(content);
  }
}

RAG（Retrieval-Augmented Generation）の実装

RAGは「検索拡張生成」とも呼ばれ、LLMに外部知識ベースの情報を追加して回答の精度を高める手法です。カスタマーサポートBot、社内知識Q&Aシステムなどに広く使われています。

import { OpenAIEmbeddings } from "@langchain/openai";
import { SupabaseVectorStore } from "@langchain/community/vectorstores/supabase";
import { createClient } from "@supabase/supabase-js";

// ドキュメントをベクトルDBに保存
async function indexDocuments(documents: string[]) {
  const supabase = createClient(
    process.env.SUPABASE_URL!,
    process.env.SUPABASE_KEY!
  );

  const embeddings = new OpenAIEmbeddings({
    model: "text-embedding-3-small",
  });

  const vectorStore = await SupabaseVectorStore.fromTexts(
    documents,
    documents.map((_, i) => ({ id: i })),
    embeddings,
    { client: supabase, tableName: "documents" }
  );

  return vectorStore;
}

// 類似ドキュメントを検索して回答を生成
async function ragQuery(question: string, vectorStore: any) {
  // 1. 質問に関連するドキュメントを検索
  const relevantDocs = await vectorStore.similaritySearch(question, 3);
  
  // 2. コンテキストを構築
  const context = relevantDocs.map((doc: any) => doc.pageContent).join("\n\n");
  
  // 3. LLMで回答を生成
  const response = await openai.chat.completions.create({
    model: "gpt-4o",
    messages: [
      {
        role: "system",
        content: `以下のコンテキストに基づいて質問に答えてください。

コンテキスト:
${context}

コンテキストに情報がない場合は、その旨を伝えてください。`,
      },
      { role: "user", content: question },
    ],
  });

  return response.choices[0].message.content;
}

Next.js App RouterでAIチャットUIを構築

Vercel AI SDKを使うと、Next.jsでAIチャットUIを簡単に構築できます。

// app/api/chat/route.ts
import { openai } from "@ai-sdk/openai";
import { streamText } from "ai";

export async function POST(req: Request) {
  const { messages } = await req.json();

  const result = streamText({
    model: openai("gpt-4o"),
    system: "あなたはTech Athletesのサポートアシスタントです。",
    messages,
  });

  return result.toDataStreamResponse();
}

// app/page.tsx
"use client";
import { useChat } from "@ai-sdk/react";

export default function ChatPage() {
  const { messages, input, handleInputChange, handleSubmit, isLoading } = useChat();

  return (
    <div className="flex flex-col h-screen max-w-2xl mx-auto p-4">
      <div className="flex-1 overflow-y-auto space-y-4">
        {messages.map((message) => (
          <div
            key={message.id}
            className={`p-3 rounded-lg ${
              message.role === "user"
                ? "bg-blue-100 ml-auto max-w-xs"
                : "bg-gray-100 mr-auto max-w-xs"
            }`}
          >
            {message.content}
          </div>
        ))}
      </div>

      <form onSubmit={handleSubmit} className="flex gap-2 mt-4">
        <input
          value={input}
          onChange={handleInputChange}
          placeholder="メッセージを入力..."
          className="flex-1 border rounded-lg px-3 py-2"
        />
        <button
          type="submit"
          disabled={isLoading}
          className="bg-blue-500 text-white px-4 py-2 rounded-lg"
        >
          送信
        </button>
      </form>
    </div>
  );
}

AIアプリ開発の注意点とコスト管理

• APIコストの監視：OpenAIダッシュボードでUsage Limitsを設定する
• プロンプトの最適化：不要なトークンを削減してコストを抑える
• キャッシュの活用：同一クエリはRedisでキャッシュして再利用
• レート制限への対応：指数バックオフでリトライ処理を実装
• プライバシー配慮：個人情報をLLMに送信しない設計

まとめ：AIアプリ開発はエンジニアの必須スキルに

LLM APIを活用したアプリ開発は、2026年のエンジニアに求められる重要なスキルです。本記事で紹介したOpenAI API・RAG・Vercel AI SDKを組み合わせることで、強力なAIアプリを効率的に構築できます。

まずは小さなプロジェクトから始め、徐々に複雑な機能を追加していくアプローチがおすすめです。OpenAIのPlaygroundで試してから実装に移るとスムーズです。