或者
简述根据上下文选择更合适的翻译。如果需要直接翻译，可以使用：
TL;DR但是通常“TL;DR”在中文中更常被直接音译或意译为“要点”或“简述”。
在这份教程中，我们将一步步教您如何构建一个AI驱动的投资与储蓄助手，它将帮助您使用Maybe Finance、Next.js和CopilotKit来规划储蓄和投资。🪁
我们将会谈到以下内容：
- 构建一个Next.js项目，用于AI投资与储蓄副驾。
- 将CopilotKit的UI组件和API端点添加到你的应用程序中。
- 集成Maybe Finance API以提供个性化的投资和储蓄见解。
AI赋能的理财应用预览：
咱们开始吧！
什么是CopilotKit呢？你知道吗？CopilotKit 是一个构建用户交互式代理和副手的全栈框架。它为代理提供了使用你应用程序的工具，并提供了一个功能丰富的 SDK，包括 LangGraph，支持各种 AI 副手用例，包括 上下文理解、副手操作 和 生成式用户界面。
<!-- CopilotKit注释或定义可在此处添加，如果需要的话 -->
这让你可以定义助手的任务，而无需担心复杂的设置和集成。
访问 CopilotKit 的 GitHub 页面 ⭐️
Maybe Finance是什么？这是一家金融公司吗？
Maybe Finance 是个人财务管理的开源软件，提供工具帮助您安全管理和优化您的财务，让财务管理更加高效。
在我们的项目中，我们将利用 Maybe Finance（可能金融）的实时数据和分析结果来让我们的副驾助手提供更深入的见解——帮助用户更好地规划储蓄和投资。
先决条件在我们开始之前，请确保你准备好了：
技术方面的知识
- 熟悉 Next.js 和 React 的中级水平
- 了解 TypeScript 基础知识
- 对 MongoDB 的了解
所需账号
- CopilotKit Cloud 获取您的 AI 助手的 API 密钥
- SynthFinance 访问 Maybe Finance 的 API
- 使用 MongoDB Atlas 托管数据库
- 通过 Google Cloud Platform 帐户进行 OAuth 身份验证
开发环境
Node.js 18+ 和 npm
代码编辑器（推荐使用VS Code）
搞定之后，咱们就开始开发啦！🚀
这是我们即将开发的应用程序
……
初始化项目或者
设置项目环境1. 创建一个新的 Next.js 项目吧
打开你的终端，运行以下命令来创建一个新的 Next.js 项目:
npm create next-appnpx create-next-app@latest finance_ai --typescript运行此命令以使用 TypeScript 创建名为 finance_ai 的 Next.js 应用程序。
进入全屏 退出全屏
导航到项目目录，然后启动开发服务器。
cd finance_ai
npm run dev（切换到finance_ai目录并运行开发模式）
点击这里进入全屏模式 点击这里退出全屏模式
您的应用现在应该在http://本地主机:3000运行了。
2. 安装软件包：
接下来我们为这个项目安装必要的依赖。这些包括：
- CopilotKit 包。
- Axios（用于抓取 API）
- Shadcn/ui（用于预制的 UI 组件）
- Recharts（用于图表绘制）
运行以下命令来安装它们：
npm install @copilotkit/react-ui @copilotkit/react-core axios （在终端中运行此命令）进入全屏模式，退出全屏
接下来，对于 Shadcn UI，运行下面的命令
npx shadcn@latest 安装 按钮 组件 卡片 输入 标签 页签 badge tabs全屏，退出。
注意：如果你使用 CopilotKit Cloud，你就不需要包含运行时包，因为 CopilotKit Cloud 会自动管理运行时环境，所以你不需要担心这些。然而，如果你自己托管后端，你可能需要手动处理运行时的配置。本教程将重点介绍如何自托管，不过，如果你需要，CopilotKit Cloud 也是一个简化运行时管理的好选择。
现在，我们来设置项目的结构。要创建的关键文件和目录有：
src/app/ui/service/index.ts– 处理从 API 获取金融数据的请求。src/app/ui/components/FinanceCopilot.tsx– 我们 AI 驱动的金融助手的主要 UI 组件。src/app/lib/types/investment.ts– 定义投资和储蓄数据的 TypeScript 类型定义。src/app/lib/data/mockData.ts– 包含用于测试的模拟金融数据。src/app/api/copilotkit/route.ts– CopilotKit 的 API 路由。src/app/api/finance/route.ts– 用于获取金融洞察的 API 接口。
项目架构
以下是我们的应用程序的文件目录：
……
金融AI前端开发1. 在 layout.tsx 中配置全局提供器
首先，前往cloud.copilotkit.ai 获取你的CopilotKit Cloud密钥，用于认证和访问API。你可以用GitHub或Google注册。
然后，复制你的 API 密钥值并粘贴到你的 .env 文件中。接着，更新全局布局，用 CopilotKit 提供程序包裹你的应用。这样，CopilotKit 功能就能在整个应用程序中使用了。
设置好之后，请在该文件路径 finance_ai/app/layout.tsx 加入以下代码：
import { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
import { CopilotKit } from "@copilotkit/react-core";
import "@copilotkit/react-ui/styles.css";
// 加载字体以进行样式设置
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
// 为 SEO 和显示设置元数据
export const metadata: Metadata = {
title: "Coyamin - AI 投资助手",
description: "利用 AI 动力见解，做出明智的金融决定。",
};
// 从环境变量中获取 Copilot API 密钥
const copilotApiKey = process.env.NEXT_PUBLIC_COPILOTKIT_API_KEY;
// 获取 Copilot API 密钥
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>
{/* 如果 API 密钥可用，则条件性地使用 CopilotKit 包裹内容 */}
{copilotApiKey ? (
<CopilotKit publicApiKey={copilotApiKey}>{children}</CopilotKit>
) : (
<>{children}</>
)}
</body>
</html>
);
}
点击全屏；点击恢复
……
我们首先导入了整个应用中一致使用的样式和字体，这确保了整个应用的设计风格一致。
接下来，我们将应用包裹在 CopilotKit 提供者中，以使用 API 密钥；<CopilotKitProvider apiKey={process.env.NEXT_PUBLIC_COPILOTKIT_API_KEY}><App /></CopilotKitProvider>
这样的设置让AI功能在应用程序的所有组件中都能使用。
2. 创建登录和引导页面步骤
要在登录表单组件中创建，请在app/api/auth/[...nextauth]/route.ts 文件中输入以下代码内容：
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { prisma } from "@/lib/db";
export const authOptions = {
adapter: PrismaAdapter(prisma), // 适配器
providers: [
GoogleProvider({
clientId: process.env.GOOGLE_CLIENT_ID as string,
clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
}),
],
callbacks: {
async session({ session, user }) { // 回调
if (session?.user) {
session.user.id = user.id;
session.user.isOnboarded = user.isOnboarded; // 已引导
}
return session;
},
},
pages: {
signIn: "/", // 登录页面
},
};
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST }; // 处理器进入全屏 退出全屏
认证页分为两个标签页：登录和注册。每个表单都使用带标签的输入框和一个按钮，该按钮在认证成功后跳转到引导页面。
新手引导页面
注册页面有一个聊天窗口，会询问诸如财务目标和风险承受等方面的问题，作为新用户引导流程的一部分。
在 app/onboarding 文件夹中，创建一个名为 page.tsx 的文件，并在其中输入以下代码：
"use client"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { ArrowRight, Bot, User, Sparkles } from "lucide-react"
interface 消息 {
type: "bot" | "user"
内容: string
options?: string[]
}
export default function OnboardingChat() {
const router = useRouter()
const [messages, setMessages] = useState<消息[]>([
{
type: "bot",
内容: "欢迎来到Coyamin！我是您的AI投资与储蓄副驾。让我们开始您的财务规划。您的主要财务目标是什么?",
options: [
"短期储蓄（1至2年）",
"长期投资（5年以上）",
"退休计划",
"紧急储蓄",
"财富积累",
],
},
])
const [currentStep, setCurrentStep] = useState(0)
const [selectedOptions, setSelectedOptions] = useState<Record<number, string[]>>({})
全屏模式 退出全屏
在这里，我们导入了 Shadcn UI 的按钮、卡片和徽章组件，并且通过 import { useState, useEffect } from "react"; 引入了状态管理。我们还包含了一个 OnboardingChat() 函数，该函数在向用户发送一条欢迎信息并询问他们的财务目标时，用户可以从下面的选项中选择。
这是一个Shadcn的图片
管理用户选择和对话过程
当你选择一个选项时，聊天机器人会根据你的选择做出响应，并根据不同的阶段引导你。我们还提供了下拉菜单，解释每个风险承受等级：
// 定义引导流程的步骤
const steps = [
{ title: "财务目标", progress: 33 },
{ title: "风险承受度", progress: 66 },
{ title: "投资偏好", progress: 100 },
];
const handleOptionSelect = (option: string) => {
setMessages((prev) => [...prev, { type: "user", content: option }]);
setSelectedOptions((prev) => ({
...prev,
[currentStep]: [...(prev[currentStep] || []), option],
}));
setTimeout(() => {
if (currentStep === 0) {
setMessages((prev) => [
...prev,
{
type: "bot",
content: "好选择！接下来，请告诉我您的风险承受度是？",
options: ["保守（低风险）", "中等（中风险）", "进取（高风险）"],
},
]);
setCurrentStep(1);
} else if (currentStep === 1) {
setMessages((prev) => [
...prev,
{
type: "bot",
content: "完美！最后，请告诉我您感兴趣的有哪些投资类型？（例如：交易所交易基金、股票、债券、加密币、房地产、共同基金）",
options: ["股票", "交易所交易基金", "债券", "加密币", "房地产", "共同基金"],
},
]);
setCurrentStep(2);
} else if (currentStep === 2) {
setMessages((prev) => [
...prev,
{
type: "bot",
content: "谢谢！我们将根据您的偏好为您定制投资档案。",
},
]);
setTimeout(() => {
router.push("/dashboard");
}, 1500);
}
}, 500);
};全屏 退出全屏
3.
创建仪表板
控制面板显示财务概要和AI生成的建议。在文件 app/dashboard/page.tsx 中输入以下代码片段
将仪表板容器与CopilotKit侧边栏集成
这会将整个仪表板用CopilotSidebar组件包起来，并为主仪表板内容设定主要的弹性布局容器。
"use client"
import { CopilotSidebar } from "@copilotkit/react-ui";
export default function DashboardPage() {
return (
<CopilotSidebar
defaultOpen={true}
instructions="根据你拥有的数据，尽可能给出最好的回答。"
labels={{
title: "Coyamin助手",
initial: "今天我怎么帮您？",
}}
>
{/* 主要容器：填充可用视口高度 */}
<div className="flex h-[calc(100vh-3.5rem)]">
<div className="flex-1 p-4 sm:p-6 lg:p-8 overflow-auto">
{/* Dashboard内容放在这里 */}
</div>
</div>
</CopilotSidebar>
);
}切换到全屏模式 退出全屏
CopilotSidebar 提供了一个持久的 AI 聊天界面，而弹性布局容器（一个具有 flex h-[calc(100vh-3.5rem)] 样式的 div）确保仪表板占据整个视口高度，但会减去顶部的偏移量。
此外，内部容器（<div className="flex-1 p-4 sm:p-6 lg:p-8 overflow-auto">）内边距设置好并可滚动，准备好放置我们的概述和图表组件。
实施仪表板中的概要卡片。
仪表板的“概览区”定义了一个卡片网格，每个卡片显示一个关键财务指标，如总余额数、投资总额、每月储蓄和风险等级。
仍然在该文件中，输入以下代码 page.tsx
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">总余额：</CardTitle>
</CardHeader>
<CardContent>
<div className="text-xl sm:text-2xl font-bold">$45,231.89</div>
<p className="text-xs sm:text-sm text-muted-foreground">较上月增长20.1%</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">投资：</CardTitle>
</CardHeader>
<CardContent>
<div className="text-xl sm:text-2xl font-bold">$32,123.45</div>
<p className="text-xs sm:text-sm text-muted-foreground">78个活跃仓位</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">月储蓄：</CardTitle>
</CardHeader>
<CardContent>
<div className="text-xl sm:text-2xl font-bold">$2,400.00</div>
<p className="text-xs sm:text-sm text-muted-foreground">较上月增长12%</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">风险评分：</CardTitle>
</CardHeader>
<CardContent>
<div className="text-xl sm:text-2xl font-bold">7.2/10</div>
<p className="text-xs sm:text-sm text-muted-foreground">中等风险水平</p>
</CardContent>
</Card>
</div>点击全屏 切换 点击退出全屏
每个 Card 由标题（包括 CardHeader 和 CardTitle）和内容（CardContent）组成，分别用于标签、数值指标和描述。网格布局（grid gap-4 sm:grid-cols-2 lg:grid-cols-4）确保卡片之间间距均匀且响应式。
使用 Recharts 添加图表
我们使用 Recharts 在应用中创建两种类型的图表：一种用于资产组合概览的折线图和另一种用于资产分配的饼图。这些图表旨在清晰地展示财务趋势和资产分配情况。有关 Recharts 的更多信息，请参阅 Recharts 官方文档。
运行下面的命令来安装 Recharts：
使用 npm 安装 recharts 包: npm install recharts. 这里的 npm 是 Node.js 的包管理器.
全屏模式。退出全屏。
然后在仪表盘文件夹中的 page.tsx 文件里添加这段代码：
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
PieChart,
Pie,
Cell,
} from "recharts";
const chartData = [
{ name: "Jan", value: 4000 },
{ name: "Feb", value: 3000 },
{ name: "Mar", value: 2000 },
{ name: "Apr", value: 2780 },
{ name: "May", value: 1890 },
{ name: "Jun", value: 2390 },
];
const pieData = [
{ name: "股票", value: 400 },
{ name: "债券", value: 300 },
{ name: "房地产", value: 300 },
{ name: "数字货币", value: 200 },
];
const COLORS = ["#0088FE", "#00C49F", "#FFBB28", "#FF8042"];
export default function ChartsSection() {
return (
<div className="grid gap-4 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-7 mt-4">
{/* 投资组合概览 - 折线图 */}
<div className="col-span-1 md:col-span-2 lg:col-span-4">
<div className="border rounded shadow p-4">
<h3 className="text-lg font-semibold mb-2">投资组合概览</h3>
<ResponsiveContainer width="100%" height="250px">
<LineChart data={chartData}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Line type="monotone" dataKey="value" stroke="#8884d8" />
</LineChart>
</ResponsiveContainer>
</div>
</div>
{/* 资产分配 - 饼图 */}
<div className="col-span-1 md:col-span-2 lg:col-span-3">
<div className="border rounded shadow p-4">
<h3 className="text-lg font-semibold mb-2">资产分配</h3>
<ResponsiveContainer width="100%" height="250px">
<PieChart>
<Pie data={pieData} innerRadius={50} outerRadius={80} paddingAngle={5} dataKey="value">
{pieData.map((entry, index) => (
<Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
))}
</Pie>
<Tooltip />
</PieChart>
</ResponsiveContainer>
</div>
</div>
</div>
);
}
进入全屏。退出全屏。
在上述代码中，折线图（投资组合概览图） 使用 ResponsiveContainer 使图表完全响应。LineChart 组件使用 CartesianGrid 作为视觉参考来绘制数据，而 XAxis 和 YAxis 则提供了标签以增强可读性。以这种方式使用 Recharts 可以使代码保持清晰且易于维护。
接着，更新 pages/index.tsx ，以让主应用程序显示仪表盘。
import Dashboard from '../components/Dashboard';
export default function Home() {
return (
<main className="min-h-screen bg-gray-100 p-10">
<Dashboard />
</main>
);
}
全屏模式：进入，退出
4. 设置后端接口
CopilotKit API
在 pages/api/copilotkit.ts 文件中，设置后端端点来处理来自 Copilot UI 的请求。此端点会将请求发送到我们的 AI 引擎（并与 Maybe Finance 进行对接）。如下所示：
import { NextApiRequest, NextApiResponse } from 'next';
// 引入 CopilotKit 运行时 NextJS 路由端点
import { copilotRuntimeNextJSAppRouterEndpoint } from '@copilotkit/runtime';全屏模式:/退出全屏
可能的财务 API 端点
现在，我们来把Maybe Finance和我们的Coyamin应用集成起来吧。我们将创建几个API接口，作为前端和Maybe Finance API之间的安全桥梁。
首先，设置一些环境变量来存储我们的API密钥
API_KEY=你的finance API密钥
BASE_URL=https://api.synthfinance.com进入全屏，退出全屏
（点击可查看图片）
我们将创建一系列API路由，用以处理我们的金融数据流。每个路由将专门处理一种特定类型的金融数据。
货币信息 API：
这会帮你获取聊天过程中可能需要的各种货币信息。在 app/api/rates/live 目录下创建一个名为 route.ts 的文件：
import { NextResponse } from "next/server";
import axios from "axios";
const API_KEY = process.env.API_KEY;
const BASE_URL = process.env.BASE_URL;
export async function GET(req: Request) {
try {
const { searchParams } = new URL(req.url);
const to = searchParams.get("to");
if (!to) {
return NextResponse.json(
{ message: "缺少必要的查询参数：to" },
{ status: 400 }
);
}
const response = await axios.get(`${BASE_URL}/rates/live`, {
params: { to },
headers: {
Authorization: `Bearer ${API_KEY}`,
Accept: "application/json",
},
});
return NextResponse.json(response.data, { status: 200 });
} catch (error: unknown) {
if (error instanceof Error) {
return NextResponse.json(
{ message: "获取实时汇率信息失败", error: error.message },
{ status: 500 }
);
}
return NextResponse.json(
{ message: "无法获取实时汇率信息" },
{ status: 500 }
);
}
}
切换到全屏模式，退出全屏
这个端点允许你查看货币价值和投资机会的变化随时间如何变化，以便做出基于数据的决策。
5. 启动应用
启动你的开发服务器吧
运行开发模式的命令如下：npm run dev
切换到全屏，退出全屏
在您的浏览器中打开这个网址：http://localhost:3000。您应该能看到带有Copilot侧边栏的仪表盘页面。登录之后，完成引导对话，然后和Copilot互动来获取由CopilotKit和Maybe Finance提供的财务洞察。
注册
入门指南
这是一款功能完备的AI驱动财务管理应用，使用了 CopilotKit：
从GitHub克隆该项目并在本地运行，如下所示：在终端中运行以下命令：
git clone https://github.com/Tabintel/finance_ai.git这将克隆一个远程仓库的本地版本，以便你可以开始使用和修改代码。
全屏切换。
然后运行 npm install，来安装所有必要的依赖，再运行 npm run dev，来运行 web 应用。
在本指南中，我们介绍了如何使用CopilotKit和Maybe Finance来构建一个AI驱动的投资与储蓄助手（Copilot），帮助用户更高效地管理财务。
虽然我们已经介绍了一些关键功能，但这仅仅是开始——CopilotKit可以实现无数的AI驱动应用场景，从个性化的财务顾问到金融科技应用中的智能自动化功能。
请在GitHub上查看完整的源代码：https://github.com/CopilotKit/CopilotKit/blob/main/community/demos_2025/finance_ai.md
关注 CopilotKit 的 Twitter，打声招呼吧。如果你想做一些酷炫的事情，可以来加入 Discord 大家庭。
共同學習，寫下你的評論
評論加載中...
作者其他優質文章
