Javascript
?? 用 Gemini API、Next.js 和 TailwindCSS 快速搭建 AI 推文生成项目 ??
本文主要是介绍?? 用 Gemini API、Next.js 和 TailwindCSS 快速搭建 AI 推文生成项目 ??，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
2025年已经来了，还有什么比开始做一个超棒的Twitter帖子项目更好的方式吗？🎯 在这篇博客中，我将向你展示如何将Gemini API与Next.js集成，并使用TailwindCSS进行样式设定来创建一个简单而有效的帖子展示系统。此外，我们还会用Gemini API密钥来获取并展示帖子。
我们先看看最后的小项目长什么样。
好啦，让我们来试试吧！🔥
此处省略部分内容
前提条件开始之前，请确保你已经做好准备。
- 安装了Node.js
- 一个Gemini API密钥（在Gemini设置密钥）
- 熟悉Next.js/React.js 和 TailwindCSS（如果你需要复习或学习Nextjs/Reactjs，可以看看这门课程：
）
）此处省略内容
1. 创建一个 Next.js 项目吧 🖥️首先，创建一个新的 Next.js 项目
运行以下命令来创建一个新的 Next.js 项目并进入项目目录:
命令如下:
npx create-next-app twitter-post cd twitter-post
全屏模式 退出全屏
2. 安装一下 Gemini API 包 📦现在咱们来安装 Gemini npm 包程序
npm i @google/generative-ai // 使用npm安装@google/generative-ai插件
进入全屏模式
退出全屏
在根目录下创建一个 .env.local 文件，并在其中加入你的 Gemini API 密钥。
GEMINI_API_KEY=你的API密钥在这里
进入全屏模式，退出全屏模式
3. 使用 Gemini API 抓取 Twitter 帖子 🔥
在项目中创建app/api/submit/route.ts文件，通过route.ts文件，我们将通过Gemini API获取并展示类似推特的帖子。
import { GoogleGenerativeAI } from '@google/generative-ai';
import { NextResponse } from 'next/server';
const API_KEY = process.env.GEMINI_AI_API_KEY || "";
export async function POST(req: Request) {
const { description } = await req.json();
if (!description) {
return NextResponse.json(
{ 错误: '描述是必需的。' },
{ status: 400 }
);
}
try {
const genAI = new GoogleGenerativeAI(API_KEY);
const model = await genAI.getGenerativeModel({ model: 'gemini-1.5-flash' });
const prompt = `生成推特内容，基于以下描述: ${description}`;
const result = await model.generateContent([prompt]);
if (result && result.response) {
const generatedText = await result.response.text();
return NextResponse.json({ tweet: generatedText });
} else {
throw new Error('模型未返回响应。');
}
} catch (error) {
console.error('生成推文时出错:', error);
return NextResponse.json({ 错误: '无法生成推文' }, { status: 500 });
}
}
切换到全屏模式 切换出全屏模式
上面代码的功能描述是。
- 生成推文： 利用谷歌的AI根据该描述生成推文。
- 错误处理： 若未提供描述或AI出现故障，则返回错误。
-
使用的AI模型： 使用
gemini-1.5-flash生成内容。 -
- *
regenerate tweet 如下：重新生成推文。
这是简单的服务端HTML和Tailwindcss组件：
import { RiTwitterXLine } from "react-icons/ri";
import InteractiveForm from "./components/InteractiveForm";
export default function Home() {
return (
<div className="flex flex-col justify-center items-center min-h-screen bg-[#1a1a1a] w-full">
<RiTwitterXLine size={50} color="white" />
<div className="flex flex-col justify-center items-center mt-7 w-full max-w-4xl py-3">
<p className="text-white text-4xl font-extrabold">只需几秒钟，你的想法就能变成推文。</p>
<p className="text-white text-2xl">Tweet Craft 是你写推文的超级帮手。</p>
{/* 泰国互动表单组件 */}
<InteractiveForm />
</div>
</div>
);
}
点击全屏，开启；点击退出，关闭
处理所有推文的生成、复制和重新生成的主要负责部分是客户端组件——
'use client';
import { useState } from 'react';
import { BsArrowRightCircle } from "react-icons/bs";
export default function InteractiveForm() {
const [tweet, setTweet] = useState<string | null>(null);
const [loading, setLoading] = useState(false);
const handleSubmit = async (e: any) => {
e.preventDefault();
const description = e.target.description.value;
setLoading(true);
const response = await fetch('/api/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ description }),
});
const result = await response.json();
setLoading(false);
if (result.tweet) {
setTweet(result.tweet);
} else {
console.error('错误:', result.error);
}
};
const handleCopy = () => {
if (tweet) {
navigator.clipboard.writeText(tweet);
alert('推文已复制到剪贴板！');
}
};
const handleRegenerate = async () => {
if (tweet) {
setLoading(true);
const description = tweet;
const response = await fetch('/api/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ description }),
});
const result = await response.json();
setLoading(false);
if (result.tweet) {
setTweet(result.tweet);
}
}
};
return (
<div className="w-full relative">
<form onSubmit={handleSubmit} className="w-full">
<div className="relative">
<textarea
id="description"
name="description"
rows={10}
placeholder="写下你的想法在这里..."
className="
block
w-full
px-4
py-3
mt-4
bg-[#1a1a1a]
text-lg
border
border-gray-300
text-white
rounded-md
focus:outline-none
focus:ring-2
focus:ring-gray-300
focus:border-transparent
"
/>
<button
type="submit"
className="
absolute
bottom-2
right-2
p-2
rounded-full
text-white
bg-transparent
hover:bg-gray-700
"
disabled={loading}
>
<BsArrowRightCircle size={30} />
</button>
</div>
</form>
{tweet && (
<div className="mt-6 text-white">
<p className="text-lg">{tweet}</p>
<div className="flex gap-4 mt-4">
<button
onClick={handleCopy}
className="px-4 py-2 bg-blue-500 rounded-full text-white hover:bg-blue-400"
>
复制
</button>
<button
onClick={handleRegenerate}
className="px-4 py-2 bg-green-500 rounded-full text-white hover:bg-green-400"
>
重新生成
</button>
</div>
</div>
)}
{loading && (
<div className="absolute top-0 left-0 w-full h-full flex items-center justify-center bg-opacity-50">
<span className="text-white">生成推文...</span>
</div>
)}
</div>
);
}
全屏 退出全屏
你可以轻松地通过 Tailwind 的样式类来调整颜色、间距等设计元素。
5. 让我们开始项目吧 🚀现在可以开始运行你的项目了：
npm run dev
这是用于运行开发服务器的命令，常用于 Node.js 或 npm 包中。npm 是 Node.js 包管理器。
切换到全屏/退出全屏
在你的浏览器中打开 http://localhost:3000，你将会看到类似推特的时间线！🎉
来给仓库做点贡献吧 💻
我很期待看到你能用这个项目做出些什么！可以随意 fork 这个仓库，创建 issue，甚至提个 pull request。让我们一起把这个项目做得更强吧！
例如，嵌入推特 API 和添加推荐按钮。
在这里查看 GitHub 项目🚀
Jagroop2001 / tweet-craft
Tweet Craft 是一个由 Next.js 构建的基于 AI 的应用程序，可以根据用户的描述生成推文。利用 Gemini 的 API，该应用让用户可以根据输入轻松创作推文，非常适合需要快速创意社交媒体内容的人。
Tweet Craft 是一个利用 Next.js 构建的 AI 驱动的工具，可以根据用户的描述生成推文。通过使用 Gemini 的 API，该应用程序使用户能够根据输入轻松创建推文，非常适合需要快速且有创意的社交媒体内容的人。视频：https://vimeo.com/1043260556?share=copy
- AI生成推文：用户提供描述之后，应用根据输入生成推文。
- Gemini API整合：应用通过Gemini的API处理自然语言描述并生成推文。
先决条件:
- Node.js (18.0 及以上版本)
- npm 或 yarn (包管理工具)
开始步骤
- 克隆代码库：使用以下命令：
请在终端中执行以下命令:
在终端中输入以下命令:
git clone https://github.com/Jagroop2001/tweet-craft 切换到(tweet-craft目录) cd tweet-craft
点击全屏，点击退出全屏
- 安装依赖：
npm install 或者 yarn install # 安装npm依赖或者使用yarn安装依赖
进入全屏 退出全屏
- 设置你的 Gemini API 密钥：
- 在项目根目录创建一个名为
.env.local的文件。 - 将您的 Gemini API 钥匙添加到文件内。
GEMINI_AI_API_KEY="你的 Gemini API 密钥"
进入全屏 退出全屏
- 跑……
在 GitHub 上查看
祝你编程快乐，希望你在2025年过得棒棒的！🎉 让我们一起做出更多的酷炫东西吧！
🚀 保持联系，关注我的旅程！ 🌟
👉 关注我的推特 🐦
👉 来看看我的GitHub 💻
这篇关于?? 用 Gemini API、Next.js 和 TailwindCSS 快速搭建 AI 推文生成项目 ??的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
-
React 19 来了！新的编译器简直太棒了！01-04
-
2025年Node.js与PHP大比拼：挑选最适合的后端技术进行现代web开发01-03
-
Vue CLI多环境配置学习入门12-31
-
Vue CLI学习入门：一步一步搭建你的第一个Vue项目12-31
-
Vue3公共组件学习入门：从零开始搭建实用组件库12-31
-
Vue3公共组件学习入门教程12-31
-
Vue3学习入门：新手必读教程12-31
-
Vue3学习入门：初学者必备指南12-31
-
Vue CLI多环境配置教程：轻松入门指南12-30
-
Vue CLI 多环境配置教程：从入门到实践12-30
-
初学者的vue CLI教程：快速开始你的Vue项目12-30
-
Vue CLI教程：新手入门指南12-30
-
Vue3公共组件教程：新手入门指南12-30
-
Vue3公共组件教程：从入门到实战12-30
-
Vue3教程：初学者快速入门指南12-30
栏目导航
