东莞公司网站建设,网站设计方案怎么做,网站建设价位高有低,南京seo优化培训大家好#xff0c;我是 luckySnail#xff0c;你肯定用过 AI 聊天工具。例如#xff1a; Gemini#xff0c;ChatGPT#xff0c;claude AI 等产品#xff0c;我们通过它们的 web 网站或者手机应用提出问题#xff0c;得到答案。在之前如果你想要构建一个这样的 AI 聊天应…大家好我是 luckySnail你肯定用过 AI 聊天工具。例如 GeminiChatGPTclaude AI 等产品我们通过它们的 web 网站或者手机应用提出问题得到答案。在之前如果你想要构建一个这样的 AI 聊天应用程序是需要大量时间才能开发出来但是接下来我将使用 cursor vercel 的 Next.js 和 ai-sdk 快速搭建属于你自己的 AI chat 工具通过这篇文章你可以看到 AI 强大的辅助编程能力和 vercel 家超赞的工具同时也能了解如何使用 AI 从 0 到 1 构建一个 web 应用先看一下最终的产品 如果你想直接看源码 https://github.com/coderPerseus/easyChat 我还使用 deepwiki 生成了对应的项目文档 https://deepwiki.com/coderPerseus/easyChat
环境准备
在正式开发前你的设备需要有如下环境 Node 18.18pnpm 作为依赖管理工具 postgreSQL 可以是本地或者在线 Curosr 用作 AI 辅助编程 chrome 游览器其他游览器也可
你需要具备的知识 前端基础 数据库基础 计算机网络基础 熟悉 React 开发 当然你还需要有良好的软件开发素养否则你会发现写的代码不好维护或者不易理解
项目初始化
在真正开发项目之前让我们先进行需求分析 和 技术选型
需求分析
聊天页面开发基础能力 包含提示的输入框和发送 / 停止按钮 实现一个聊天区域来显示对话记录一个列表展示会话历史 开发 /agent API 来处理请求 确保每个对话的数据都被持久存储 通过流式传输返回所有结果 高级能力 增强聊天组件支持 markdown 渲染、自动滚动、图片上传等 实现函数调用例如检索当前时间
技术选型
根据需求我选择了我喜欢的并且也是主流的技术 Next.js 作为全栈开发基础框架 hono.js 作为后端框架优化在 Next.js 中后端开发体验 PostgreSQL 作为数据库存储对话记录 DrizzleORM 作为 ORM 更为便捷和高效的方式与数据库进行交互 shadcn/ui 作为 UI 组件库tailwindcss 作为 css 框架 Vercel AI SDK 快速开发 AI 相关的服务如果你也在开发 AI 相关的服务强烈推荐使用它能帮你减少 80% 的工作 Biome 进行代码格式化和检测代替 ESLint Prettier需要你安装 Biome 插件哦 zod TypeScript 优先的数据验证库
对了我们使用 Github 进行版本控制维护代码。使用 vercel 进行项目部署上线。
初始化
下面进行初始化项目初始化项目完成后我们应该就可以进行业务开发
1根据 Next.js 官方文档我们创建一个 Next.js 项目
npx create-next-applatest2下面根据官方文档集成 shadcn/ui
pnpm dlx shadcnlatest init
pnpm dlx shadcnlatest add button然后尝试使用 Button 按钮发现集成成功 注意这里有一个小细节就是我在入口的 layout 组件为 body 标签添加了 suppressHydrationWarning 作用是抑制 React 在客户端和服务器端渲染不匹配时产生的警告信息这在处理动态内容如日期、时间等时特别有用因为这些内容在服务器端和客户端可能会有差异。 3下面集成 Biome保证相关代码风格一致
pnpm i biomejs/biome -D然后在 package.json 添加对应的脚本
{scripts: {lint: next lint,format: biome format --write .,lint:biome: biome check --apply.,}
}下面设置编辑器的 Format Document With 选择 Configure Default Formatter 设置为 Biome。现在你的项目就又了格式化能力你还可以在 git 提交的链路上进行预先 format 和 lint 等操作保证提交的代码是格式化的。 4下面继续集成 hono.js我参考了文章思路 https://kuizuo.cn/blog/nextjs-with-hono/ 。首先根据官方文档进行安装
pnpm i hono
# 让 hono 接管所有接口服务
mkdir -p src/app/api/[[...route]] touch src/app/api/[[...route]]/route.ts下面开发 route.ts 内容让 hono 来接管接口服务
// src/app/api/[[...route]]/route.ts
import api from /server/api;
import { handle } from hono/vercel;
const handler handle(api);
export {handler as GET,handler as POST,handler as PUT,handler as DELETE,handler as PATCH,
};因为 Next.js 会自动扫描 app 下的文件夹进行热更新所以我们可以将服务端代码放在根目录的 server 文件夹下其实你可以使用任何名称这里写我们所有的服务端逻辑和接口下面初始化一下服务端的基础逻辑 5创建自定义校验器它的作用是进行请求数据验证的工具函数确保数据符合预期的格式和类型规范并提供类型安全的验证结果
// src/server/api/validator.ts
import type {Context,MiddlewareHandler,Env,ValidationTargets,TypedResponse,Input,
} from hono;
import { validator } from hono/validator;
import type { z, ZodSchema, ZodError } from zod;export type HookT,E extends Env,P extends string,Target extends keyof ValidationTargets keyof ValidationTargets,// biome-ignore lint/complexity/noBannedTypes: explanationO {}(result: (| { success: true; data: T }| { success: false; error: ZodError; data: T }) {target: Target;},c: ContextE, P
) | Response| void| TypedResponseO// biome-ignore lint/suspicious/noConfusingVoidType: explanation| PromiseResponse | void | TypedResponseO;type HasUndefinedT undefined extends T ? true : false;export const zValidator T extends ZodSchema,Target extends keyof ValidationTargets,E extends Env,P extends string,In z.inputT,Out z.outputT,I extends Input {in: HasUndefinedIn extends true? {[K in Target]?: K extends json? In: HasUndefinedkeyof ValidationTargets[K] extends true? { [K2 in keyof In]?: ValidationTargets[K][K2] }: { [K2 in keyof In]: ValidationTargets[K][K2] };}: {[K in Target]: K extends json? In: HasUndefinedkeyof ValidationTargets[K] extends true? { [K2 in keyof In]?: ValidationTargets[K][K2] }: { [K2 in keyof In]: ValidationTargets[K][K2] };};out: { [K in Target]: Out };},V extends I I
(target: Target,schema: T,hook?: Hookz.inferT, E, P, Target
): MiddlewareHandlerE, P, V // ts-expect-error not typed wellvalidator(target, async (value, c) {const result await schema.safeParseAsync(value);if (hook) {const hookResult await hook({ data: value, ...result, target }, c);if (hookResult) {if (hookResult instanceof Response) {return hookResult;}if (response in hookResult) {return hookResult.response;}}}if (!result.success) {throw result.error;}return result.data as z.inferT;});6创建错误处理文件给到客户端更好的错误提示
// src/server/api/error.ts
import { z } from zod;
import type { Context } from hono;
import { HTTPException } from hono/http-exception;
import type { ContentfulStatusCode } from hono/utils/http-status;export class ApiError extends HTTPException {public readonly code?: ContentfulStatusCode;constructor({code,message,}: {code?: ContentfulStatusCode;message: string;}) {super(code, { message });this.code code;}
}export function handleError(err: Error, c: Context): Response {if (err instanceof z.ZodError) {const firstError err.errors[0];return c.json({ code: 422, message: \${firstError.path}\: ${firstError.message} },422);}/*** This is a generic error, we should log it and return a 500*/return c.json({code: 500,message: 服务端错误, 请稍后再试。,},{ status: 500 });
}下面我们创建我们的第一个接口验证 honojs 是否引入成功
// src/server/api/routes/hello.ts
import { Hono } from hono;
const app new Hono().get(/hello, (c) c.json({ message: Hello, luckyChat })
);
export default app;7最后开发入口文件
// src/server/api/index.ts
import { handleError } from ./error;
import { Hono } from hono;
import helloRoute from ./routes/hello;
const app new Hono().basePath(/api);
app.onError(handleError);
const routes app.route(/, helloRoute);
export default app;
export type AppType typeof routes;现在我们不仅有了接口还有了服务端接口的类型声明我们可以非常方便的在客户端进行类型安全的接口请求我们不需要写路由也不需要写类型相关的内容真的是 amazing我们赶紧在客户端调用第一个接口吧在调用接口前 8我们先封装一个 fetch 方法
// src/lib/fetch.ts
import type { AppType } from /server/api;
import { hc } from hono/client;
import ky from ky;const baseUrl process.env.NODE_ENV development? http://localhost:3000: process.env.NEXT_PUBLIC_APP_URL;export const fetch ky.extend({hooks: {afterResponse: [async (_, __, response: Response) {if (response.ok) {return response;// biome-ignore lint/style/noUselessElse: explanation} else {throw await response.json();}},],},
});export const client hcAppType(baseUrl as string, {fetch: fetch,
});ky 库是一个基于浏览器原生 Fetch API 的轻量级HTTP客户端库提供了更简洁友好的接口使用它更好的与 honojs 集成这里我们使用 hc 和 AppType 创建了一个安全的接口请求方式
// src/app/page.tsx
import { Button } from /components/ui/button;
import { Heart } from lucide-react;
import { client } from /lib/fetch;
async function getData() {try {const res await client.api.hello.$get();if (!res.ok) {// This will activate the closest error.js Error Boundarythrow new Error(Failed to fetch data);}return res.json();} catch (error) {console.error(获取数据失败:, error);return { message: AI 助手 };}
}
export default async function Home() {const { message } await getData();return (divdiv{message}/divButtonHeart classNamemr-2 h-4 w-4 / lucky Snail/Button/div);
}当我们在使用 client 的时候它会进行代码提示告诉你目前可以使用哪些接口并且在后面我们可以借助 InferResponseType 和 typeof 等 ts 关键字来使用接口对应的 ts 类型我们只需要在服务端定义好类型声明在客户端直接消费即可 。
9下面进行最重要的一步也就是数据库初始化有开发经验的应该都知道数据库设计的好可以大大降低系统复杂度减少不必要的代码这么重要的事情肯定是需要 AI 的参与的我们把需求给到 AI然后让 AI 帮忙进行初步数据库设计下面在 cursor 中进行 ask
提示词现在集成 DrizzleORM, and AI SDK.使用 postgreSQL 作为数据库驱动使用 postgres数据库名字叫 chatAI 数据库就一张表存储 AI 对话记录设计良好的数据库表结构最后开发 /agent API 来处理聊天请求这里使用大模型为 Deepseek 大模型的 key 存在 环境变量的 DEEPSEEK_API_KEY 数据库集成参考 https://orm.drizzle.team/docs/get-started-postgresql 先梳理需求然后一步步进行实现AI 给到的数据库结构如下
// src/lib/db/schema.ts
import { pgTable, serial, text, timestamp, varchar } from drizzle-orm/pg-core;// 聊天消息类型
export const chatMessages pgTable(chat_messages, {id: serial(id).primaryKey(),sessionId: varchar(session_id, { length: 255 }).notNull(),role: varchar(role, { length: 50 }).notNull(), // user 或 assistantcontent: text(content).notNull(),createdAt: timestamp(created_at).defaultNow().notNull(),
});// 会话信息
export const chatSessions pgTable(chat_sessions, {id: serial(id).primaryKey(),sessionId: varchar(session_id, { length: 255 }).unique().notNull(),title: varchar(title, { length: 255 }),createdAt: timestamp(created_at).defaultNow().notNull(),updatedAt: timestamp(updated_at).defaultNow().notNull(),
});这里 AI 帮我们创建好了数据库的表结构它能理解需求并给出合理的数据库设计 chat_sessions 表存储聊天会话信息 chat_messages 表存储聊天消息 还帮我们在 package.json 添加了生成和运行迁移的脚本我们在 env 配置到 DATABASE_URL执行脚本即可初始化数据库
现在我们完成了项目初始化我们可以使用 cursor 提供的 /generate Cursor Rules 来生成项目开发指导在后面业务能力开发中我们每次都携带上这条 rules 它能帮 AI 更好的生成内容 现在已经搭建好了前端和后端基础能力并且生成了项目开发的 rules 下面就全部交给 AI 来进行业务开发我们只需要做一个合格的测试和 code review 就好了
核心能力开发
一个聊天应用最核心的就是输入提示词 AI 大模型响应内容 展示内容 继续对话
1开发 chat提示词如下 下面 project-structure.mdc 就是我们生成的项目开发 rules project-structure.mdc 使用 ai-sdk 开发 /agent API 来处理聊天请求遵循 RESTful API 风格这里使用大模型为 Deepseek 大模型的 key 存在 环境变量的 DEEPSEEK_API_KEY 然后在开发对应的 chat 页面一个输入框右侧有发送和暂停按钮支持接收用户的输入支持发送和停止能力这里使用 ai-sdk/react 快速进行开发需要流式输出 AI 生成内容。代码组件化模块化尽可能使用 shadui/cn 组件开发先梳理需求然后一步步进行实现AI 可能需要比较漫长时间完成工作在这个过程中我们可以思考下一个提示词在 AI 生成完成后我们需要进行检查和修复 bug当然你是可以借助 AI 来 fix error。这里需要额外注意的是当我们 chat 中断的时候应该把已经生成的内容进行存储数据库
2开发创建新会话能力支持会话缓存到本地
project-structure.mdc 支持创建新会话并且会话 id 存储 localStorage 在页面刷新的时候会话 id 依然存在注意点击停止需要把当前会话进行存储3开发历史会话列表展示支持切换会话
project-structure.mdc 开发历史对话记录功能先进行接口开发这里两个接口获取所有会话列表和获取指定 id 的会话信息前端需要将会话列表封装为单独组件点击会话列表项能进入该对话数据接口逻辑使用自定义 hooks保证代码清晰易理解。 注意客户端需要使用封装的 fetch 导出的 client 进行接口请求4支持 markdown 渲染 AI 生成的内容优化页面布局 UI支持内容自动滚动底部 上面完成后我们有了基本的 chat 功能页面但是可能这时候页面比较丑不太美观现在进行优化
project-structure.mdc 你是资深 UI 设计师现在进行项目优化
1实现 markdown 渲染流式内容。添加在对话中自动滚动到底部的能力
2. 优化目前的页面 UI页面布局为左边的侧边栏展示历史记录和新对话能力都放在左边当屏幕宽度小于 tailwindcss 的 lg 的时候就不展示侧边栏右侧对话框 UI 也需要进行优化注意不要新增元素和修改逻辑仅仅是对元素布局和 UI进行优化参考优秀的 chatbox UI 设计5支持 function call 能力获取当前时间
project-structure.mdc web 参考文档支持 function call 能力以获取最新时间为例优化
如果你做到这里相信你的项目肯定还有一些 bug 和 UI 细节需要进行优化你可以和 AI 一起进行优化给大家看一下我和 AI 的 chat 不断的修复和优化最终我的 chatbox 就出现啦 你打几分呢
总结 AI 目前编程能力已经超过 90% 的工程师了它在开发功能安全性和兼容性考虑上十分的全面但是它也有能力边界在面对复杂系统奇怪的需求上是不如人的。所以程序员以后更多是做决策做 AI 与需求的桥梁通过我们的经验和直觉去选择接受还是拒绝 AI 的生成 日常 AI 编程开发中推荐使用方式为 gemini 做设计和文档类工作写代码部分交给 claude 需要我们能够合理的进行模块拆分能够识别 AI 代码是不是合理的 系统设计是 AI 时代程序员的必须要提升的技能推荐一本书《软件设计的哲学》第二版 知识广度全栈能力对前端有很大的帮助借助 AI 快速将想法变成现实是程序员的红利 持续学习跟进最新的 AI 是保证自己有竞争力的关键 Vibe Coding 必然会成为新的编码方式纯手工编程必然会像 php 一样成为历史 目前来看编程智能体Agent真的很成功让我这种普通人能够快速 开发出产品。
参考 https://claude.ai/chat/fd4c29a3-3b5c-4965-9670-4380dcc28f98 https://www.youtube.com/watch?vtlrf4lu8Myc https://bigbang.easykol.com/search/following?platformTIKTOKurlhttps://www.tiktok.com/meditationbuddhism
