前端已死是时候入门ai了——从开源ai项目学习(1)

🚀 快速上车指南

1. 克隆项目(就像复制粘贴作业)

bash 复制代码
git clone https://github.com/你的账号/ai-chatbot.git
cd ai-chatbot

2. 安装依赖(请AI喝杯咖啡的时间)

bash 复制代码
pnpm install

3. 配置环境变量(AI的身份证)

bash 复制代码
cp .env.example .env.local

打开填上:

ini 复制代码
# 像这样生成一个神秘密钥
AUTH_SECRET=$(openssl rand -base64 32)
POSTGRES_URL="你的数据库地址"

4. 启动!(见证奇迹的时刻)

bash 复制代码
pnpm dev

🌟 功能演示

场景1:让AI写个排序算法

bash 复制代码
你:写个快速排序
AI:好嘞!🎉 (默默调用了<mcsymbol name="createDocument" filename="create-document.ts" path="/Users/zhoujunda/Documents/demo/ai-learn/lib/ai/tools/create-document.ts" startline="15" type="function"></mcsymbol>)

场景2:文档协作

python 复制代码
# 右边会实时出现这样的代码
def quicksort(arr):
    if len(arr) <= 1:
        return arr
    pivot = arr[len(arr) // 2]
    left = [x for x in arr if x < pivot]
    middle = [x for x in arr if x == pivot]
    right = [x for x in arr if x > pivot]
    return quicksort(left) + middle + quicksort(right)

场景3:查天气(假装很实用)

typescript 复制代码
// 背后其实是这个工具在干活<mcsymbol name="getWeather" filename="get-weather.ts" path="/Users/zhoujunda/Documents/demo/ai-learn/lib/ai/tools/get-weather.ts" startline="4" type="function"></mcsymbol>
const 上海天气 = await getWeather(31.2304, 121.4737)

🔧 进阶玩法

1. 切换AI大脑

在里可以给AI换"脑子":

typescript 复制代码
// 比如换个更聪明的模型
export const DEFAULT_CHAT_MODEL: string = 'gpt-4';

2. 自定义提示词

打开:

typescript 复制代码
// 把暴躁老哥改成温柔小姐姐
export const regularPrompt = '你是一个说话会加ʕ•ᴥ•ʔ颜文字的女仆装AI';

💡 小贴士

  1. 遇到数据库问题记得:
bash 复制代码
pnpm db:migrate  # 就像给数据库做马杀鸡
  1. 想调试数据库?试试:
bash 复制代码
pnpm db:studio  # 数据库的VIP休息室
  1. 如果AI突然开始说胡话,请检查是不是被玩坏了

最后,当你的AI助理突然暴走说些奇怪的话时,请温柔地告诉它:"你只是个幻觉..." 😉

xml 复制代码
<style>
  markdown {
    font-family: "MiSans", system-ui;
    line-height: 1.8;
  }
  h1, h2 {
    border-bottom: 3px solid #f0f0f0;
    padding-bottom: 0.3em;
  }
  code {
    background: #f6f8fa;
    padding: 0.2em 0.4em;
    border-radius: 4px;
    font-family: "Fira Code", monospace;
  }
  pre {
    background: #fafafa;
    padding: 1em;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
</style>
相关推荐
顾林海6 分钟前
Flutter Dart 运算符全面解析
android·前端
七月丶13 分钟前
🚀 现代 Web 开发:如何优雅地管理前端版本信息?
前端
漫步云端的码农15 分钟前
Three.js场景渲染优化
前端·性能优化·three.js
悬炫15 分钟前
赋能大模型:ant-design系列组件的文档知识库搭建
前端·ai 编程
用户1083863868020 分钟前
95%开发者不知道的调试黑科技:Apipost让WebSocket开发效率翻倍的秘密
前端·后端
稀土君1 小时前
👏 用idea传递无限可能!AI FOR CODE挑战赛「创意赛道」作品提交指南
前端·人工智能·trae
OpenTiny社区1 小时前
Node.js 技术原理分析系列 4—— 使用 Chrome DevTools 分析 Node.js 性能问题
前端·开源·node.js·opentiny
写不出代码真君1 小时前
Proxy和defineProperty
前端·javascript
乐坏小陈1 小时前
TypeScript 和 JavaScript:2025 年应该选择哪一个?【转载】
前端·javascript
百变小驴1 小时前
不懂脚手架怎么开发?手把手带你读create-vite源码!
前端·前端工程化