# Replit Agent 触ってみた
Table of Contents
Black Friday Sale で Replit Core を購入したので、Replit Agent を触ってみた
Replit Agent とは
https://docs.replit.com/replitai/agent
Replit Agentは、ユーザーがソフトウェアプロジェクトを構築するのを支援するために設計されたAI搭載ツールです。自然言語のプロンプトを理解し、アプリケーションをゼロから作成できるため、あらゆるスキルレベルのユーザーがソフトウェア開発にアクセスしやすくなります。
ふむなるほど。使い方は以下の通り（公式ドキュメントより翻訳）
- Replitアカウントにログインします(Replit CoreまたはTeamsサブスクリプションを使用)
- ホーム ページにアクセスするか、左側のナビゲーションで [Create Repl] を選択します
- エージェントに何を構築したいかのプロンプトを入力します
- 適切なプロンプトは、説明的で詳細です。あなたが仕事中のチームメイトが完了すべきタスクを説明していると想像してください。仕事を成し遂げるためには、どのような情報が必要でしょうか?
- 特定の言語やフレームワークを指定するのではなく、使用するテクノロジーをエージェントに選択させることをお勧めします。
- このエージェントは現在、Webベースのアプリケーションの0〜>1のプロトタイピングに最適です。
- エージェントが生成したプランを確認して反復します。エージェントが推奨するステップを自由に編集または削除してください。
- エージェントの進行状況をフォローします。
- エージェントと協力して、アプリケーションの構築が進行する際の API キー、フィードバック、または指示を提供します。
- アプリケーションをテストし、必要に応じてフォローアップの質問をします
- アプリケーションを本番環境にデプロイします。
Replit 公式の動画に沿ってやってみる
動画内容の要約
Glarity で動画の内容を要約してもらった
Replit Agent は、AIを活用した仮想環境で、データベースやフロントエンドの構築、ファイルの編集、パッケージのインストールを可能にするもので、開発者にコーディングや構成の手間を省くことができます。このエージェントは、ユーザーの入力を解釈してアプリケーションを計画し、必要なコンポーネントをセットアップします。
ハイライト
- 🤖 プランの作成: ユーザーの指示に基づいて、アプリケーションの計画を作成し、必要なステップを提案します。
- 📦 環境のセットアップ: PythonやNode.jsなどの環境をワンクリックで設定し、パッケージをインストールします。
- 🔧 ファイル編集: ファイルシステム上でファイルを作成、編集、更新し、データベースやアプリケーションを実際に構築します。
- 🌐 デプロイメントの簡略化: アプリケーションの最適なデプロイメントタイプを提案し、リプリットのデプロイメントプロセスをガイドします。
- 💡 学習の促進: エージェントが操作するファイルやロジックを表示することで、ユーザーはアプリケーションの構成を理解できます。
キーワード
- AIアシスタント
- フルスタック開発
- 自動化コーディング
ゲストブックというものを作る
以下の機能を持つ
- ユーザーが自分の名前とメッセージを残せるようにする
- それらはデータベースに保存される
- 各コメント（エントリ）に絵文字リアクションを付けることができる（追加機能）
というだけのシンプルなもの
以下動画。だいぶあたふたしているので2倍速
- emoji reaction を付けれるようにした
- ここは公式動画と違うところ
- 途中であたふたする
- emoji reaction 機能ができるようになった時点で終了しようと思ったのだが、どうすればいいのかわからなくなった
- エージェントはずーっとこちらの指示を待っている状態になっていた
Looks good! Finish it.と打ってしまった（笑）それでも解釈してくれて終了した（えらい）- 上の
Runningボタンを押して停止すれば良かったのかもしれない
- Deploy のところで少しあたふたした
以下、スクショを載せていく
スクショ
ファーストプロンプト。最初のプロトタイプを作っているところ
PostgreSQL
ポスグレのデータベースを作っているぞ
ファイル作成の様子
モリモリとファイルを作っていくぞ
依存ライブラリのインストール
スクショとプレビュー画面
スクショ撮ってこんな感じやで？どや？と表示してくれる。自動的に開かれたプレビュー上でフォームに直接入力して試すことができる
絵文字リアクション機能の実装
「絵文字リアクション機能つけよか？」と聞いてきたのでポチっとしたところ、以下のことを実行してくれた
- データベーススキーマに
reactionsテーブルを追加する - リアクションの追加や取得処理を行うように API を更新する
- リアクションの追加や表示のためのフロントエンドコンポーネントを作成する
- そのコンポーネントを各エントリーの下部に組み込む
絵文字リアクションコンポーネント
これがエントリーに対する絵文字リアクションのコンポーネント
GuestbookEntriesへのコンポーネント追加
絵文字リアクションが組み込まれた画面
絵文字リアクションが組み込まれた画面が表示された（絵文字がうまく表示されていないようだが）
プレビューを触ってみてこれで良さそうだなと思い、終了させようとしたのだがどうすればいいのかわからなくなってしまった
なので苦し紛れに Looks good! Finish it. と打ってしまった（笑）
とりあえずここで一旦終了し、念の為アプリを消した
- アプリの削除
Deploymentsから削除するとアクセスできなくなった
- 念の為データベースも
Detabaseタブにて消す Usageは1時間ごとに更新されるらしい
その後色々みていく
BlogGuestBook というプロジェクト名になっていた。これも初回のプロンプトから推測してるのかな？
プロジェクト構成
- server は
express hooks/use-toast.tsが右下に出てくるトーストの処理かdrizzle.config.tsがある- UI は
radix-ui
package.json
{ "name": "rest-express", "version": "1.0.0", "type": "module", "license": "MIT", "scripts": { "dev": "tsx server/index.ts", "build": "vite build && esbuild server/index.ts --platform=node --packages=external --bundle --format=esm --outdir=dist", "start": "NODE_ENV=production node dist/index.js", "check": "tsc", "db:push": "drizzle-kit push" }, "dependencies": { "@hookform/resolvers": "^3.9.1", "@jridgewell/trace-mapping": "^0.3.25", "@radix-ui/react-accordion": "^1.2.1", "@radix-ui/react-alert-dialog": "^1.1.2", "@radix-ui/react-aspect-ratio": "^1.1.0", "@radix-ui/react-avatar": "^1.1.1", "@radix-ui/react-checkbox": "^1.1.2", "@radix-ui/react-collapsible": "^1.1.1", "@radix-ui/react-context-menu": "^2.2.2", "@radix-ui/react-dialog": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.1.2", "@radix-ui/react-hover-card": "^1.1.2", "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-menubar": "^1.1.2", "@radix-ui/react-navigation-menu": "^1.2.1", "@radix-ui/react-popover": "^1.1.2", "@radix-ui/react-progress": "^1.1.0", "@radix-ui/react-radio-group": "^1.2.1", "@radix-ui/react-scroll-area": "^1.2.0", "@radix-ui/react-select": "^2.1.2", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slider": "^1.2.1", "@radix-ui/react-slot": "^1.1.0", "@radix-ui/react-switch": "^1.1.1", "@radix-ui/react-tabs": "^1.1.1", "@radix-ui/react-toast": "^1.2.2", "@radix-ui/react-toggle": "^1.1.0", "@radix-ui/react-toggle-group": "^1.1.0", "@radix-ui/react-tooltip": "^1.1.3", "@replit/vite-plugin-shadcn-theme-json": "^0.0.4", "@tanstack/react-query": "^5.60.5", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "cmdk": "^1.0.0", "date-fns": "^3.6.0", "drizzle-orm": "^0.38.2", "drizzle-zod": "^0.6.0", "embla-carousel-react": "^8.3.0", "express": "^4.21.2", "express-session": "^1.18.1", "framer-motion": "^11.13.1", "input-otp": "^1.2.4", "lucide-react": "^0.453.0", "memorystore": "^1.6.7", "passport": "^0.7.0", "passport-local": "^1.0.0", "react": "^18.3.1", "react-day-picker": "^8.10.1", "react-dom": "^18.3.1", "react-hook-form": "^7.53.1", "react-icons": "^5.4.0", "react-resizable-panels": "^2.1.4", "recharts": "^2.13.0", "tailwind-merge": "^2.5.4", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.0", "wouter": "^3.3.5", "ws": "^8.18.0", "zod": "^3.23.8" }, "devDependencies": { "@replit/vite-plugin-runtime-error-modal": "^0.0.3", "@tailwindcss/typography": "^0.5.15", "@types/express": "4.17.21", "@types/express-session": "^1.18.0", "@types/node": "20.16.11", "@types/passport": "^1.0.16", "@types/passport-local": "^1.0.38", "@types/react": "^18.3.11", "@types/react-dom": "^18.3.1", "@types/ws": "^8.5.13", "@vitejs/plugin-react": "^4.3.2", "autoprefixer": "^10.4.20", "drizzle-kit": "^0.27.1", "esbuild": "^0.24.0", "postcss": "^8.4.47", "tailwindcss": "^3.4.14", "tsx": "^4.19.1", "typescript": "5.6.3", "vite": "^5.4.9" }, "optionalDependencies": { "bufferutil": "^4.0.8" }}routing は wouter というものを使っている
molefrog/wouter: 🥢 A minimalist-friendly ~2.1KB routing for React and Preact
葉桜の季節に君へルーティングライブラリ wouter を紹介するということ
コードを眺めてるだけでも面白い
git log
おもむろに Shell を開いて git log してみたが勝手に5回コミットされていた。なにこれ怖い
Agent タブ上では Checkpoint made ... と表示されている部分がちょうど5つあったのでその度にコミットするのだろう
Usage
https://docs.replit.com/replitai/agent#agent-billing
The Replit Agent operates on a usage-based billing system where you pay 25 cents per checkpoint. A checkpoint occurs whenever the agent makes file changes while working on your request, regardless of whether the entire task is complete.
Replitエージェントは、チェックポイントごとに25セントを支払う使用ベースの課金システムで動作します。 チェックポイントは、タスク全体が完了したかどうかに関係なく、エージェントがお客様のリクエストの作業中にファイルを変更するたびに発生します。
Agent タブ右上から Usage ページに飛ぶことができる
$0.25/per checkpoint なので2回分しかお金はかかっていない。チェックポイントとしてコミットされたのは5回だったが、実際にファイルの変更があったのは2回しかないということか
~/BlogGuestBook$ git log --stat --oneline30dcd8f (HEAD -> main) Agent step completed: Build the initial prototype002ae63 Agent query: Can you see the emoji reaction buttons below each guestbook entry? Try clicking on them to add reactions. client/src/components/EntryReactions.tsx | 67 ++++++++++++++++++++++++++++++++++++++ client/src/components/GuestbookEntries.tsx | 4 ++- client/src/lib/types.ts | 8 +++++ db/schema.ts | 26 ++++++++++++++- server/routes.ts | 55 ++++++++++++++++++++++++++++--- 5 files changed, 153 insertions(+), 7 deletions(-)c4d3e63 Agent query: Can you test the guestbook by adding a message with your name? Please verify if the message appears in the list below and if the timestamp is correct. .gitignore | 6 + .replit | 42 + client/index.html | 11 + client/src/App.tsx | 12 + client/src/components/GuestbookEntries.tsx | 64 + client/src/components/GuestbookForm.tsx | 105 + client/src/components/ui/accordion.tsx | 56 + client/src/components/ui/alert-dialog.tsx | 139 + client/src/components/ui/alert.tsx | 59 + client/src/components/ui/aspect-ratio.tsx | 5 + client/src/components/ui/avatar.tsx | 48 + client/src/components/ui/badge.tsx | 36 + client/src/components/ui/breadcrumb.tsx | 115 + client/src/components/ui/button.tsx | 56 + client/src/components/ui/calendar.tsx | 64 + client/src/components/ui/card.tsx | 79 + client/src/components/ui/carousel.tsx | 260 + client/src/components/ui/chart.tsx | 363 ++ client/src/components/ui/checkbox.tsx | 28 + client/src/components/ui/collapsible.tsx | 9 + client/src/components/ui/command.tsx | 153 + client/src/components/ui/context-menu.tsx | 198 + client/src/components/ui/dialog.tsx | 120 + client/src/components/ui/drawer.tsx | 116 + client/src/components/ui/dropdown-menu.tsx | 198 + client/src/components/ui/form.tsx | 176 + client/src/components/ui/hover-card.tsx | 27 + client/src/components/ui/input-otp.tsx | 69 + client/src/components/ui/input.tsx | 25 + client/src/components/ui/label.tsx | 24 + client/src/components/ui/menubar.tsx | 234 + client/src/components/ui/navigation-menu.tsx | 128 + client/src/components/ui/pagination.tsx | 117 + client/src/components/ui/popover.tsx | 29 + client/src/components/ui/progress.tsx | 26 + client/src/components/ui/radio-group.tsx | 42 + client/src/components/ui/resizable.tsx | 43 + client/src/components/ui/scroll-area.tsx | 46 + client/src/components/ui/select.tsx | 158 + client/src/components/ui/separator.tsx | 29 + client/src/components/ui/sheet.tsx | 138 + client/src/components/ui/sidebar.tsx | 762 +++ client/src/components/ui/skeleton.tsx | 15 + client/src/components/ui/slider.tsx | 26 + client/src/components/ui/switch.tsx | 27 + client/src/components/ui/table.tsx | 117 + client/src/components/ui/tabs.tsx | 53 + client/src/components/ui/textarea.tsx | 24 + client/src/components/ui/toast.tsx | 127 + client/src/components/ui/toaster.tsx | 33 + client/src/components/ui/toggle-group.tsx | 59 + client/src/components/ui/toggle.tsx | 43 + client/src/components/ui/tooltip.tsx | 28 + client/src/hooks/use-mobile.tsx | 19 + client/src/hooks/use-toast.ts | 191 + client/src/index.css | 13 + client/src/lib/queryClient.ts | 30 + client/src/lib/types.ts | 11 + client/src/lib/utils.ts | 6 + client/src/main.tsx | 16 + client/src/pages/.gitkeep | 0 client/src/pages/Home.tsx | 28 + db/index.ts | 15 + db/schema.ts | 14 + drizzle.config.ts | 14 + package-lock.json | 8783 ++++++++++++++++++++++++++++++++++ package.json | 98 + postcss.config.js | 6 + server/index.ts | 65 + server/routes.ts | 46 + server/vite.ts | 93 + tailwind.config.ts | 90 + theme.json | 6 + tsconfig.json | 24 + vite.config.ts | 23 + 75 files changed, 14558 insertions(+)ed24da8 Checkpoint after starting plan0a44b28 Initial commit generated-icon.png | Bin 0 -> 380183 bytes 1 file changed, 0 insertions(+), 0 deletions(-)Deployments
感想
- とにかく凄くて怖い
- 公式動画のプロンプトをそのまま入れたのでまあまあ精度は高い
- 違った点は、動画ではバックエンドは
Flask,Vanilla JS,PostgreSQLだった - そこら辺はよくわからないが自分の時は
Express,React,PostgreSQLだった
- 違った点は、動画ではバックエンドは
- 途中どうすれば良いかわからんくなったがなんとなくフィーリングでできるから良い
- まずければチェックポイントまでロールバックできるようだから安心
- 追加機能どうします？と聞いてくれるのは良い
- ついつい emoji reaction 入れちゃったよね
- 後から追加追加…とやっていくと破綻しないんだろうか？
- 今回は emoji reaction の追加だけだったので
reactionsテーブルの追加やコンポーネントの作成くらいで済んだのだが
- 今回は emoji reaction の追加だけだったので
- 初回の時点でログイン機能 (Firebase login) など各種機能は選べるようだ
- あらかじめ要件や仕様をある程度固めておくと良いのだろうなあ
- プロンプトは日本語でもいけるのかな？
