Open15
solo-dev-ai-chat
Takaaki Kakei要件
下記の技術スタックを活用したAIチャットアプリ
- Cloudflare Workers
- Next.js
- shadcn/ui
- OpenAI
成果物
Takaaki KakeiCloudflare WorkersでNext.js
Takaaki Kakeicd ＜プロジェクトフォルダ＞
pnpm create cloudflare@latest solo-dev-ai-chat --framework=next --experimental
..snip..
╭ Deploy with Cloudflare Step 3 of 3
│
├ Do you want to deploy your application?
│ no deploy via `pnpm run deploy` // デプロイはしない
│
╰ Done
..snip..
% tree -I 'node_modules' 2024/11/06 13:17:06
.
├── README.md
├── env.d.ts
├── next-env.d.ts
├── next.config.mjs
├── package.json
├── pnpm-lock.yaml
├── postcss.config.mjs
├── public
│ ├── next.svg
│ └── vercel.svg
├── src
│ └── app
│ ├── favicon.ico
│ ├── globals.css
│ ├── layout.tsx
│ └── page.tsx
├── tailwind.config.ts
├── tsconfig.json
└── wrangler.toml
4 directories, 16 files
pnpm run dev
Takaaki KakeiAI機能
Takaaki KakeiWorkersの無料プランだと制限に抵触する
% pnpm run deploy
..snip..
Total Upload: 5379.76 KiB / gzip: 1398.01 KiB
..snip..
Your Worker exceeded the size limit of 1 MiB. Refer to the Workers documentation
(https://developers.cloudflare.com/workers/observability/errors/#errors-on-worker-upload) for more
details. [code: 10027]
..snip..
Takaaki Kakeiデプロイ時は、apiKey: process.env.OPENAI_API_KEY,のようにする必要あり。
export async function POST(req: Request) {
const { messages } = (await req.json()) as { messages: Message[] };
const openai = createOpenAI({
apiKey: process.env.OPENAI_API_KEY,
});
const result = await streamText({
model: openai("gpt-4o-mini"),
messages,
});
return result.toDataStreamResponse();
}
Takaaki Kakeishadcn/ui
% pnpm dlx shadcn@latest init 2024/11/06 16:34:47
Packages: +170
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 170, reused 165, downloaded 5, added 170, done
✔ Preflight checks.
✔ Verifying framework. Found Next.js.
✔ Validating Tailwind CSS.
✔ Validating import alias.
✔ Which style would you like to use? › New York
✔ Which color would you like to use as the base color? › Neutral
✔ Would you like to use CSS variables for theming? … no / yes
✔ Writing components.json.
✔ Checking registry.
✔ Updating tailwind.config.ts
✔ Updating src/app/globals.css
✔ Installing dependencies.
✔ Created 1 file:
- src/lib/utils.ts
Success! Project initialization completed.
You may now add components.
pnpm dlx shadcn@latest add button
pnpm dlx shadcn@latest add textarea
pnpm dlx shadcn@latest add scroll-area
Total Upload: 5422.70 KiB / gzip: 1413.07 KiB
shadcn/ui - sidebar
Takaaki KakeiTotal Upload: 5507.04 KiB / gzip: 1441.32 KiB