我构建了一个现代 AI 助手

大多数 AI 教程都过于简单。它们只展示了基础的 API 调用和响应。我想要的是一个真正的应用程序。

我使用原生 HTML、CSS 和 JavaScript 构建了一个 AI 助手。

核心功能：

  • 流式响应。
  • 深色和浅色模式。
  • Markdown 和语法高亮。
  • 聊天记录持久化。
  • 错误处理和重试逻辑。

技术栈：

  • HTML5 和 CSS3。
  • 原生 JavaScript。
  • Marked.js 和 Prism.js。
  • 用于安全防护的 DOMPurify。
  • Google Generative AI SDK。
  • 用于托管的 GitHub Pages。

安全是重中之重。我使用 DOMPurify 来清理 AI 的响应，以防止安全风险。

用户体验至关重要。我添加了流式内容，用户可以看到文本实时生成，而无需等待加载图标。

我使用 localStorage 来存储聊天记录。这让应用运行得非常快，且无需后端支持。

经验教训：

  • 处理边缘情况。
  • 专注于 UX。
  • 管理状态。
  • 确保 AI 输出的安全。

这些细节比 AI 模型本身更重要。

为你的作品集构建这类项目。你可以从中学习 API、UI 设计和状态管理。

你会添加什么功能？

  • 语音输入。
  • 文件上传。
  • 记忆功能。

在评论区告诉我。

来源：https://dev.to/codehuntersharath/i-built-a-modern-ai-assistant-using-html-css-and-javascript-4ca8 视频：https://youtu.be/nbFKG_6DkSE 可选学习社区：https://t.me/GyaanSetuAi