AI導入の「PoC貧乏」を脱却する。精度80%でも現場が喜ぶ『爆速プロトタイピング』の技術選定（Next.js × Vercel AI SDK）

はじめに：「PoCで終わる」呪いからの脱却

SIer業界や受託開発の現場で働くエンジニアなら、誰もが一度は経験する絶望があります。

「AIのPoC、成功しました！……でも本番化は見送りです」

半年かけて構築したAI機能。精度95%を達成し、デモも成功。
なのに、本番化の話が消え、プロジェクトは「今後の検討課題」として棚上げにされる。

これが 「PoC貧乏」 です。
検証は成功するが、MVP（Minimum Viable Product）に至らない、SI業界の構造的な病です。

なぜPoCは本番化しないのか？

PoCが頓挫する理由は、技術的な失敗ではありません。

1. 「完璧を待つ」病: 現場の業務フローに100%合わせるため、精度99%を目指して延々と検証を続ける
2. インテグレーションコストの高騰: 既存システムに組み込むための工数が見積もりから外れ、予算オーバー
3. 現場の実感がない: デモは見たが、実際に使える「形」が見えないから、導入判断が先送りに

つまり、PoCの壁は「技術の壁」ではなく「スピードと形の壁」 なのです。

---

解決策：「精度80%」のMVPで勝負する

私が提唱するのは、「精度80%で十分、とにかく使える形でリリースする」 アプローチです。

AIの精度を100%にすることは、開発期間を指数関数的に増加させます。しかし、「人間のワークフローにAIを組み込み、人間が最終チェックする」 設計にすれば、80%の精度で十分に業務効率を改善できます。

そして、これを1〜2週間でMVPとしてリリースできる技術選定が、Next.js × Vercel AI SDKです。

---

技術選定の理由：なぜNext.js × Vercel AI SDKか？

1. フルスタックでAI機能を1ファイルで実装

従来のAI機能開発は、フロントエンド（React）→バックエンド（FastAPI等）→AI API（OpenAI）という多層構造が必要でした。
Vercel AI SDKを使えば、Next.jsのAPI Route（App Router）で完結し、**Streaming Response（逐次表示）**も簡単に実装できます。

2. インテグレーションコスト最小化

既存のレガシーシステム（Javaや.NET製）に、AI機能を「マイクロフロントエンド」として組み込む設計が可能です。

iframe埋め込みや、API Gateway越しの連携で、既存システムの改修を最小限に抑えられます。

3. デプロイの即座性

VercelへのデプロイはGit連携で完了。PoC環境を「URL付き」で即座に共有でき、現場の実感を得やすいのが最大のメリットです。

---

実装編：1週間で作る「AI業務支援MVP」

以下、実際の現場（例：「顧客対応履歴から要約を自動生成」）を想定した、最小構成の実装例です。

プロジェクト構成

my-ai-app/
├── app/
│   ├── api/
│   │   └── summarize/      # AI処理API
│   │       └── route.ts
│   ├── components/
│   │   └── Summarizer.tsx  # UIコンポーネント
│   └── page.tsx            # メインページ
├── lib/
│   └── ai.ts               # AI設定
└── package.json

1. AI処理の実装（API Route）

Vercel AI SDKの streamText を使うことで、複雑なストリーミング処理を数行で実装できます。

app/api/summarize/route.ts

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

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

  // 精度80%を目指した、実用的なプロンプト設計
  const systemPrompt = `あなたは顧客対応のプロです。以下の顧客対応履歴を、3行の要約にまとめてください。
【制約条件】
- 重要なキーワード（商品名、クレーム内容、希望）を必ず含める
- 不確実な情報がある場合は「（要確認）」と明記する
- 推測はせず、履歴に基づく事実のみ記載する

【出力形式】
1. [対応概要]
2. [顧客の感情・要望]
3. [次のアクション推奨]`;

  const result = streamText({
    model: openai('gpt-4o-mini'), // コストを抑えつつ、十分な性能
    system: systemPrompt,
    prompt: customerHistory,
    // 温度を低めに設定し、再現性を高める
    temperature: 0.3,
    // 最大トークン数を制限し、コストとレスポンスタイムを最適化
    maxTokens: 500,
  });

  return result.toDataStreamResponse();
}

2. フロントエンド実装（Streaming対応）

useCompletion フックを使うだけで、AIからのストリーミングレスポンスをリアルタイムに画面表示できます。

app/components/summarizer.tsx

'use client';

import { useCompletion } from 'ai/react';

export default function Summarizer() {
  const { completion, input, handleInputChange, handleSubmit, isLoading } = 
    useCompletion({
      api: '/api/summarize',
    });

  return (
    <div className="max-w-2xl mx-auto p-6">
      <h2 className="text-2xl font-bold mb-4">AI要約支援システム（MVP版）</h2>
      
      <form onSubmit={handleSubmit} className="space-y-4">
        <div>
          <label className="block text-sm font-medium mb-2">
            顧客対応履歴を入力：
          </label>
          <textarea
            value={input}
            onChange={handleInputChange}
            placeholder="ここに対応履歴を貼り付け..."
            className="w-full h-32 p-3 border rounded-lg"
            required
          />
        </div>
        
        <button
          type="submit"
          disabled={isLoading}
          className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg 
                      hover:bg-blue-700 disabled:bg-gray-400"
        >
          {isLoading ? '生成中...' : '要約を生成（AI支援）'}
        </button>
      </form>

      {completion && (
        <div className="mt-6 p-4 bg-gray-50 rounded-lg border">
          <h3 className="font-semibold mb-2">AI生成要約（確認用）：</h3>
          <div className="whitespace-pre-wrap text-gray-800">{completion}</div>
          <p className="text-sm text-gray-500 mt-2">
            ※この要約はAIによる支援情報です。送信前に必ず内容を確認してください。
          </p>
        </div>
      )}
    </div>
  );
}

3. エラーハンドリングと「80%精度」の設計

PoC貧乏を脱却する鍵は、「AIの失敗を想定したUI設計」 です。
AIが間違ったことを言っても、業務が止まらないようにします。

app/api/summarize/route.ts（エラーハンドリング追加版）

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

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

    // 入力検証（簡易版）
    if (!customerHistory || customerHistory.length < 10) {
      return Response.json(
        { error: '対応履歴が短すぎます（10文字以上必要）' },
        { status: 400 }
      );
    }

    const result = streamText({
      model: openai('gpt-4o-mini'),
      system: `【重要】以下の点に注意して要約してください：
- 事実に基づかない推測は「（推測）」と明記
- 金額や日付は必ず原文を確認
- 不確実な場合は「（要確認）」を付加`,
      prompt: customerHistory,
      temperature: 0.2, // より確実な出力を優先
      maxTokens: 400,
    });

    return result.toDataStreamResponse();

  } catch (error) {
    // 本番運用を見据えたエラーログ（ログ収集システム連携可能）
    console.error('AI処理エラー:', error);
    
    return Response.json(
      { 
        error: 'AI処理中にエラーが発生しました',
        // 現場では「エラーコード」で運用チームに通知
        errorCode: 'AI_PROCESSING_001',
        message: 'しばらく経ってから再試行してください'
      },
      { status: 500 }
    );
  }
}

---

「精度80%」で現場が喜ぶ理由

実際に現場でこのMVPをリリースした際、驚くべき反応がありました。

「完璧じゃなくても、時短になる！」

• 従来: 要約作成に5分 × 20件/日 = 100分
• AI支援後: AI生成（10秒）→ 確認・修正（30秒）× 20件 = 約13分

80%以上の時間削減です。
精度が80%でも、残り20%の修正は人間の目でスルッとこなせるから、圧倒的に効率的になります。

重要なのは「AIが書いたものを鵜呑みにしない」UI設計です。「（要確認）」という明確なフラグと、人間の最終チェックを必須とするワークフロー設計が、精度80%を受け入れ可能にします。

---

本番化への最短ルート：1週間スケジュール

日	作業内容
月	要件ヒアリング（「どの業務が一番単純か」に絞る）
火	Next.js環境構築 + プロンプト設計
水	API実装（Streaming対応）+ 簡易UI作成
木	現場テスト（3〜5ユーザーに試用）
金	フィードバック反映 + 軽微な修正
週末	デモ環境公開（URL共有）

月曜日には「使えるもの」を見せ、現場の「実感」を得る。これが、PoC貧乏から脱却するための最短の道です。

まとめ：「PoCのプロ」から「MVPのプロ」へ

SIer業界で生き残るためには、**「PoCは成功するが本番化できないエンジニア」ではなく、「1週間でMVPを作り、現場の生産性を上げるエンジニア」**になる必要があります。

Next.js × Vercel AI SDKは、それを可能にする強力な武器です。
さあ、今すぐ npx create-next-app して、現場を変えにいきましょう。

---

参考リンク

• Vercel AI SDK Documentation

• Next.js App Router

---

著者：@YushiYamamoto
株式会社プロドウガ代表 / フルスタックエンジニア。
「技術的負債は返せるなら背負え」がモットー。n8nとTypeScriptを駆使して、泥臭くも止まらない業務自動化システムを構築しています。