AI文章作成アシスタント（AI Writing Assistant）

Next.js 16 / React 19 / TypeScript / FastAPI / Python / Pydantic / Claude API / Vercel

★ Live Demo GitHub

概要

Next.js（フロントエンド）とFastAPI（バックエンド）で構築したAI文章作成支援ツール。翻訳・要約・文章生成を一つのUIに統合し、日本語・英語・中国語の3言語に対応する。

対象ユーザー

多言語で文章を扱うビジネスパーソン
長文レポートやメールの要約を効率化したい方
キーワードから記事の下書きを素早く作成したいライター・マーケター

Demo / GitHub

🔗 Demo を試す　｜　GitHub

スクリーンショット

開発背景

フリーランスとして日本語・英語・中国語を日常的に使い分ける中で、翻訳・要約・文章生成を一つのツールにまとめた作業環境が欲しかった。Claude APIの自然言語処理能力を活かし、3つの機能を統合したWebアプリケーションとして開発した。

解決した課題

翻訳・要約・文章生成を個別のツールに切り替える手間を解消し、一つのUIに統合
日本語・英語・中国語の3言語間での相互翻訳に対応
用途に応じて4種類の文章スタイルを切り替え可能（ブログ・ビジネス文書・カジュアル・技術記事）

主な機能

翻訳: 日本語・英語・中国語の相互翻訳（言語ペアを自由に選択）
要約: 長文テキストを3〜5文に要約（出力言語を選択可能）
文章生成: キーワードから文章を自動生成（4スタイル：ブログ / ビジネス文書 / カジュアル / 技術記事）
デモモード: APIキー未設定時はサンプル応答で全機能を体験可能
サンプル入力: 各機能にワンクリックでサンプルテキストを挿入するボタンを用意

使用技術

フロントエンド: Next.js 16 / React 19 / TypeScript
バックエンド: FastAPI / Python
バリデーション: Pydantic
AI: Claude API (Anthropic)
デプロイ: Vercel

設計上の工夫

フロントエンドとバックエンドの分離: Next.js（UI）とFastAPI（API）を独立したプロジェクトとして構成し、それぞれを個別にデプロイ・スケール可能な設計とした
デモモード自動切替: 環境変数（ANTHROPIC_API_KEY）の有無でClaude API呼び出しとモック応答を自動切替。デプロイ先やローカル環境に応じて動作が変わる
開発環境とデプロイ環境の分離: ローカル開発時はFastAPI、Vercel公開時はNext.js API Routesを利用し、環境に応じて最適な構成を採用

AI活用の工夫

AIの役割を限定: AIは翻訳・要約・文章生成の3つのテキスト処理のみを担当。UI表示・言語選択・スタイル切替・デモモード制御は通常のプログラムで実装
プロンプトの言語・スタイルパラメータ化: 言語（日/英/中）とスタイル（blog/formal/casual/technical）をプロンプトにパラメータとして渡し、一つのAPI実装で翻訳・要約・文章生成の3機能に対応

アーキテクチャ

Browser
      │
      ▼
React / Next.js UI
├─ 翻訳 / 要約 / 文章生成
      │
      ▼
API Layer
 ┌───────────────┐
 │ Next.js API   │（Vercel）
 │ FastAPI       │（Local）
 └──────┬────────┘
        ▼
  Claude API

開発周期

3日

担当範囲

企画 / UI設計 / フロントエンド / バックエンドAPI / AI連携設計 / デモモード実装 / デプロイ

成果・実現したこと

翻訳・要約・文章生成の3機能を一つのUIに統合し、言語と文章スタイルを組み合わせ、多様な文章生成・翻訳・要約に対応
単一のAI APIで翻訳・要約・文章生成という異なるユースケースを実現し、プロンプト設計のみで機能を切り替える構成を実装した
デモモードにより、APIキー不要で全機能を体験可能
フロントエンド・バックエンド分離構成により、開発環境・公開環境の双方に対応するデプロイ構成を実現

想定導入効果

多言語文書作成の効率化
長文レポートの要約による情報把握の迅速化
記事・メールの下書き自動生成による作成時間の短縮

開発で直面した課題と解決方法

公開環境での構成簡素化: 元々FastAPIバックエンドが必須の構成だったが、Vercelデプロイ時にバックエンドを別途用意するのは非効率。Next.js API Routeでバックエンドの機能を代替し、フロントエンド単体で完結する構成に改善した
デモモードの応答品質: モック応答が入力内容と無関係では体験価値が低い。サンプル入力ボタンを用意し、サンプルテキストに対応した実際の翻訳・要約・生成結果をモック応答として返すことで、デモとしての説得力を確保した

このプロジェクトで学んだこと

フロントエンドとバックエンドを分離して設計することで、デプロイ先の制約に応じた柔軟な構成変更が可能になることを学んだ
デモモードでは「固定応答を返す」だけでなく、「サンプル入力と結果をセットで提供する」ことで、体験価値を大きく向上できることを実感した
プロンプトをパラメータ化して設計することで、機能ごとにAPIを分けずに一つの実装で多様な出力に対応できることを確認した