AI 嘴替，社交平台反杠机器人：第 2 篇-AI 助手

大家好，我是欧达克。

前面介绍了阿里 Turbo 大模型的集成，现在开始用 AI 工具编写前端代码。废话不多说，开搞。

提示词

先利用 DeepSeek，生成提示词。

我想用 cursor 生成 AI 嘴替应用的前端代码，帮我生成提示词，要求技术栈是 vue3 + uni-app，能实现基本的对话功能，页面需要简洁，美观

DeepSeek 回答：

DeepSeek 还贴心地生成了样例代码，但是本期的重点不在 DeepSeek 生成的代码，所以我们直接跳过。

Cursor

首先新增一个文件夹，命名 ROBOTALK-UNI-APP, 接着把 DeepSeek 生成的提示词，copy 到根目录的 README.md 文件中，然后开始 AI 对话：

这是一个基础的uni-app 项目模板，帮我根据提示词，生成对应的代码

生成的详细过程就不贴了，下面会直接贴出效果。

失败案例

因为我是要使用 uni-app 工具开发的，开始是想看 Cursor 会不会自动根据 uni cli 指令生成模板工程，但是发现并不会（我自测没生成，不知道其他人有没有遇到这个情况），然后在不生成模板工程的情况下，调试了很久，最终还是宣告失败。。。继续对话下去也可能会成功，但是不想花这个时间，所以直接放弃了。

成功案例

使用 HBuilderX 工具，生成基础的项目模板。

接下去也是一样，把提示词复制过来，继续对话。

发现 AI 有时候会犯一些低级的错误，比如.value 访问，或者函数没引入等等，但是整体上你把错误报给它，它都能很快修复问题。调试了大概 1 小时时间，静态页面已经能够正常访问了，因为上一篇文章我们不是搞定了大模型对接吗？所以我们直接把接口的详细配置丢给 AI。

发现 AI 真的很强大，生成的代码质量真的很高，比如对一个简单的 http 请求的封装，我直接贴下源码：

export const API_CONFIG = {    baseUrl: process.env.NODE_ENV === 'development' ?    'http://localhost:8080/robotalk/api' :    'https://your-production-domain.com/robotalk/api',  timeout: 10000,   endpoints: {    ask: '/ask/turbo'  }};export const callApiWithTimeout = (options) => {  return new Promise((resolve, reject) => {        const timeoutTimer = setTimeout(() => {      reject(new Error('请求超时，请检查网络连接'));    }, options.timeout || API_CONFIG.timeout);        uni.getNetworkType({      success: (networkState) => {                if (networkState.networkType === 'none') {          clearTimeout(timeoutTimer);          return reject(new Error('无网络连接，请检查网络设置'));        }                uni.request({          url: options.url,          method: options.method || 'GET',          data: options.data || {},          header: {            'content-type': 'application/json',            ...options.header          },          success: (res) => {            clearTimeout(timeoutTimer);            if (res.statusCode === 200 && res.data && res.data.success) {              resolve(res.data.data);            } else {                            const errorMsg = res.data?.errorContext ||                `请求失败(${res.statusCode}): ${res.data?.errorCode || '未知错误'}`;              reject(new Error(errorMsg));            }          },          fail: (err) => {            clearTimeout(timeoutTimer);            reject(new Error(err.errMsg || '网络异常'));          }        });      },      fail: () => {        clearTimeout(timeoutTimer);        reject(new Error('无法获取网络状态'));      }    });  });};export const sendMessageToAI = async (message, options = {}) => {  try {        const startTime = Date.now();        const requestData = {      content: message,      ...options.extraParams     };        const result = await callApiWithTimeout({      url: options.url || (API_CONFIG.baseUrl + API_CONFIG.endpoints.ask),      method: 'POST',      data: requestData,      timeout: options.timeout,      header: options.headers    });        const responseTime = Date.now() - startTime;    console.log(`AI响应时间: ${responseTime}ms`);    return result;  } catch (error) {    console.error('AI服务调用失败:', error);        if (process.env.NODE_ENV === 'development') {      console.log('失败的请求内容:', message);    }    throw error;  }};