実ツールで
手を動かす
学習環境

コピーnpx create-next-app@latest my-llm-app # 選択肢： # TypeScript → Yes # ESLint → Yes # Tailwind CSS → Yes # src/ directory → No # App Router → Yes cd my-llm-app npm install @anthropic-ai/sdk ai cursor . # Cursorでプロジェクトを開く

コピー# .env.local ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxxxxxxxx NEXT_PUBLIC_SUPABASE_URL=https://xxxxxx.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJxxxxxxxx

コピー// Cursorの Cmd+L に貼り付ける 以下のファイルを実装してください： 1. app/api/chat/route.ts - Anthropic SDKを使ったストリーミングAPIルート - リクエスト: { messages: {role, content}[] } - システムプロンプト：「あなたはクリエイター向けのAIアシスタントです」 - エラーハンドリング込み 2. app/page.tsx - useChat（Vercel AI SDK）でチャットUIを実装 - メッセージ一覧の表示 - 送信フォーム - ローディング中はスピナー表示 - Tailwindでスタイリング（ダークモード） 3. 必要なパッケージのインストールコマンドも教えて

コピー# cursor コマンドの確認 cursor --version # Next.jsプロジェクト作成 → Cursorで即開く npx create-next-app@latest my-llm-app \ --typescript --tailwind --app \ --src-dir --import-alias "@/*" cd my-llm-app cursor . # 拡張機能をCLIでインストール cursor --install-extension bradlc.vscode-tailwindcss cursor --install-extension esbenp.prettier-vscode cursor --install-extension dbaeumer.vscode-eslint # .cursorrules を自動生成してCursorで開く touch .cursorrules && cursor .cursorrules

コピー# Cursorのターミナルで実行（順番通りに） git init git add . git commit -m "feat: LLMチャットアプリの初期実装" git branch -M main git remote add origin https://github.com/あなたのユーザー名/my-llm-app.git git push -u origin main # GitHubで確認：ファイルが表示されれば成功

コピー# 毎回の作業フロー（3コマンドだけ覚える） git add . # 全変更をステージ git commit -m "fix: チャット送信のバグを修正" git push # GitHubへpush → Vercel自動デプロイ

コピー# GitHub CLI インストール（macOS） brew install gh gh auth login # リポジトリ作成 → push まで一気に git init git add . git commit -m "feat: initial commit" gh repo create my-llm-app --public --source=. --push # 日常の操作フロー（これだけ覚えれば十分） git add . git commit -m "feat: チャット画面を実装" git push # Vercel CLIでデプロイ npm i -g vercel vercel # 初回セットアップ vercel --prod # 本番デプロイ # 環境変数をVercelに追加 vercel env add ANTHROPIC_API_KEY vercel env add SUPABASE_URL vercel env add SUPABASE_ANON_KEY

コピー# ターミナルで実行（またはColabのセルに貼り付け） pip install anthropic supabase pypdf2 langchain-text-splitters python-dotenv

コピー# ingest.py — PDFをSupabaseのdocumentsテーブルに投入 import os from dotenv import load_dotenv from PyPDF2 import PdfReader from langchain_text_splitters import RecursiveCharacterTextSplitter import anthropic from supabase import create_client load_dotenv() # 初期化 client = anthropic.Anthropic() supabase = create_client( os.environ["SUPABASE_URL"], os.environ["SUPABASE_SERVICE_KEY"] # service_role key（秘密） ) # PDFを読み込む def load_pdf(path: str) -> str: reader = PdfReader(path) return "\n".join(page.extract_text() for page in reader.pages) # テキストをチャンクに分割（500文字ごと、100文字重複） splitter = RecursiveCharacterTextSplitter( chunk_size=500, chunk_overlap=100 ) # 埋め込みベクトルを生成（voyage-3 経由） def embed(text: str) -> list[float]: res = client.messages.create( model="claude-3-5-sonnet-20241022", max_tokens=1, messages=[{"role": "user", "content": text}] ) # 実際はVoyage AIのembedding APIを使う import voyageai vo = voyageai.Client(api_key=os.environ["VOYAGE_API_KEY"]) return vo.embed([text], model="voyage-3").embeddings[0] # メイン処理 pdf_text = load_pdf("design_guide.pdf") chunks = splitter.split_text(pdf_text) for i, chunk in enumerate(chunks): vector = embed(chunk) supabase.table("documents").insert({ "content": chunk, "embedding": vector, "metadata": {"source": "design_guide.pdf", "chunk": i} }).execute() print(f"投入完了: チャンク {i+1}/{len(chunks)}") print("全チャンク投入完了！")

コピー# rag_prototype.py — LangChain + Claude でRAGを試す pip install langchain langchain-anthropic langchain-community chromadb from langchain_anthropic import ChatAnthropic from langchain_community.vectorstores import Chroma from langchain_community.embeddings import VoyageAIEmbeddings from langchain.chains import RetrievalQA from langchain.text_splitter import RecursiveCharacterTextSplitter from langchain.document_loaders import TextLoader # ドキュメントを読み込んでベクトルDBに保存 loader = TextLoader("my_document.txt", encoding="utf-8") docs = loader.load() chunks = RecursiveCharacterTextSplitter( chunk_size=500, chunk_overlap=50 ).split_documents(docs) # ローカルのChromaDBに保存（Supabase不要で試せる） vectorstore = Chroma.from_documents( chunks, embedding=VoyageAIEmbeddings(model="voyage-3") ) # RAGチェーンを構築 llm = ChatAnthropic(model="claude-3-5-sonnet-20241022") qa_chain = RetrievalQA.from_chain_type( llm=llm, retriever=vectorstore.as_retriever(search_kwargs={"k": 5}) ) # 質問してみる answer = qa_chain.invoke("このドキュメントの要点を教えて") print(answer["result"])

コピー# ローカル環境のセットアップ（uv を使う場合） # 1. uv をインストール（macOS / Linux） curl -LsSf https://astral.sh/uv/install.sh | sh # 2. プロジェクト作成 uv init my-python-scripts cd my-python-scripts # 3. 必要なパッケージを追加 uv add anthropic supabase python-dotenv langchain voyageai # 4. スクリプトを実行 uv run python ingest.py # .env ファイルに APIキーを設定 ANTHROPIC_API_KEY=sk-ant-xxxxxxxx SUPABASE_URL=https://xxxxxx.supabase.co SUPABASE_SERVICE_KEY=eyJxxxxxxxx VOYAGE_API_KEY=pa-xxxxxxxx

コピー# uvのインストール（macOS / Linux） curl -LsSf https://astral.sh/uv/install.sh | sh # プロジェクト作成 → パッケージ追加 → 実行 uv init llm-scripts cd llm-scripts uv add anthropic supabase python-dotenv langchain voyageai uv run python ingest.py # .envファイルを作成してAPIキーを設定 cat > .env << 'EOF' ANTHROPIC_API_KEY=sk-ant-xxxxxxxx SUPABASE_URL=https://xxxxxx.supabase.co SUPABASE_SERVICE_KEY=eyJxxxxxxxx VOYAGE_API_KEY=pa-xxxxxxxx EOF # スクリプトをcronで毎日深夜2時に自動実行 crontab -e # 以下を追加： 0 2 * * * cd /path/to/llm-scripts && uv run python ingest.py >> logs/ingest.log 2>&1 # ログを確認 tail -f logs/ingest.log