8 个带有完整源代码的应用创意

大前端爱好者
240 阅读6分钟

你好，前端开发爱好者。

本文为创意应用整理的第一期，将会在实际开发中绝对实用的一些工具库以及创意应用。

1. CopilotKit - 快速集成AI助手

github.com/CopilotKit/…

基本介绍

CopilotKit提供了一种简单快速的解决方案，帮助你在React应用中集成生产就绪的AI助手。你可以通过两个React组件来集成关键的AI功能，并且他们提供了可定制的原生用户体验组件，如<CopilotKit /> 、<CopilotPopup />、<CopilotSidebar />、<CopilotTextarea />。

如何开始

npm i @copilotkit/react-core @copilotkit/react-ui

集成示例

"use client";
import { CopilotKit } from "@copilotkit/react-core";
import { CopilotSidebar } from "@copilotkit/react-ui";
import "@copilotkit/react-ui/styles.css";

export default function RootLayout({ children }) {
  return (
    <CopilotKit url="/path_to_copilotkit_endpoint/see_below">
      <CopilotSidebar>
        {children}
      </CopilotSidebar>
    </CopilotKit>
  );
}

常见应用

AI驱动的博客平台：

文本转PowerPoint应用：

V0.dev 克隆版：

与简历对话

2. Appwrite - 轻松管理后端

github.com/appwrite/ap…

基本介绍

Appwrite是一个开源平台，它让你能轻松地给产品添加认证、数据库、函数和存储功能，支持任意规模的应用构建，且所有数据归你所有。

如何开始

npm install appwrite

创建登录组件

"use client";
import { useState } from "react";
import { account, ID } from "./appwrite";

const LoginPage = () => {
  const [loggedInUser, setLoggedInUser] = useState(null);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [name, setName] = useState("");

  const login = async (email, password) => {
    const session = await account.createEmailSession(email, password);
    setLoggedInUser(await account.get());
  };

  const register = async () => {
    await account.create(ID.unique(), email, password, name);
    login(email, password);
  };

  const logout = async () => {
    await account.deleteSession("current");
    setLoggedInUser(null);
  };

  return loggedInUser ? (
    <div>
      <p>Logged in as {loggedInUser.name}</p>
      <button type="button" onClick={logout}>
        Logout
      </button>
    </div>
  ) : (
    <div>
      <p>Not logged in</p>
      <form>
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <input
          type="password"
          placeholder="Password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
        <input
          type="text"
          placeholder="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <button type="button" onClick={() => login(email, password)}>
          Login
        </button>
        <button type="button" onClick={register}>
          Register
        </button>
      </form>
    </div>
  );
};

export default LoginPage;

常见应用

增强现实食品应用：

GitHub仓库评分应用：

Twitter克隆版：

3. Resend - 开发者邮件API

github.com/resend

基本介绍

使用 React 构建并发送邮件。Resend 提供了众多SDK选项，你可以无需更换你喜欢的技术栈。

如何开始

npm install @react-email/components -E

集成示例

import { EmailTemplate } from "@/components/email-template";
import { Resend } from 'resend';

const resend = new Resend(process.env.RESEND_API_KEY);

export async function POST() {
  const { data, error } = await resend.emails.send({
    from: 'onboarding@resend.dev',
    to: 'delivered@resend.dev',
    subject: 'Hello world',
    react: EmailTemplate({ firstName: 'John' }),
  });

  return error ? Response.json({ error }) : Response.json(data);
}

常见应用

Gitroom

  • 预先安排社交媒体帖子和文章，使用 NX (Monorepo), NextJS, NestJS, Prisma, Redis 和 Resend 构建。
  • github.com/gitroomhq/g…

Anymail

Badget

  • 简化财务管理，后端强大，使用 Next.js 14, Turborepo, Drizzle ORM 和其他工具构建。
  • github.com/projectx-co…

4. Shadcn UI - 可复制粘贴的组件库

ui.shadcn.com/docs

基本介绍

一个开源项目，提供了简单、可定制和灵活的组件。

如何开始

npx shadcn-ui@latest init

常见应用

10000+ Shadcn UI 主题

Openv0

5. Buildship – 低代码可视化后端构建器

buildship.com/

基本介绍

Buildship 提供了一种完全可视化的方式来构建可扩展的后端任务，使构建和交付变得简单快捷。它允许你通过可视化界面创建后端，而无需编写繁琐的代码，专为无代码应用构建器和前端框架量身打造。

如何开始

你可以直接在 Buildship 官网获取更多使用教程和文档。

常见应用

1. 构建旅行Web应用

这是一个使用 Buildship 和 Locofy 共同构建的旅行应用，设计源自Figma，可以实时计算旅程的距离和费用。

  • 使用 Buildship 处理后端逻辑
  • 使用 Locofy 过渡前端设计

www.youtube.com/watch?v=Pj0…

2. Telegram上的AI助手

利用 Buildship 无需编码即可创建一个智能的Telegram机器人，可以与数据进行对话。

  • 集成 OpenAI Assistant

www.youtube.com/watch?v=Pz1…

3. AI YouTube时间戳生成器

通过 Buildship 轻松生成YouTube视频的时间戳，学习和应用AI技术于视频内容管理。

www.youtube.com/watch?v=7Dk…

6. Taipy - 面向生产的Web应用数据与AI算法

github.com/Avaiga/taip…

基本介绍

Taipy 是一个开源的 Python 库，用于创建GUI界面和改进数据流管理。它提供了易用的端到端应用开发工具，特别适合需要处理大规模数据的场景。

如何开始

pip install taipy

常见应用

1. Walletwise

这个应用帮助用户跟踪收入和支出，并提供财务建议。使用 Gemini 进行交易，通过 Taipy 分析支出。

  • 提供可视化的收支分析
  • 显示改进财务决策的7条建议

github.com/Ujj1225/fro…

2. 人口普查应用

通过动态可视化展示尼泊尔2021年的人口普查数据，让用户方便地探索人口和住房信息。

github.com/SusheelThap…

3. Taipy Chess

基于20000局棋局的数据可视化工具，可显示所有游戏、开局、对手、成功的开局等信息，还可以生成热图和图表进行深入分析。

github.com/KorieDrakeC…

7. xyflow - 构建基于节点的UI

github.com/xyflow/xyfl…

基本介绍

xyflow 是一个功能强大的开源库，用于构建基于节点的UI，支持 React 和 Svelte。

如何开始

npm install reactflow

集成示例

创建两个节点 Hello 和 World ，并通过一条边连接它们，初始位置以及样式都预定义好，防止重叠：

import ReactFlow, { Controls, Background } from 'reactflow';
import 'reactflow/dist/style.css';

const edges = [{ id: '1-2', source: '1', target: '2' }];

const nodes = [
  {
    id: '1',
    data: { label: 'Hello' },
    position: { x: 0, y: 0 },
    type: 'input',
  },
  {
    id: '2',
    data: { label: 'World' },
    position: { x: 100, y: 100 },
  },
];

function Flow() {
  return (
    <div style={{ height: '100%' }}>
      <ReactFlow nodes={nodes} edges={edges}>
        <Background />
        <Controls />
      </ReactFlow>
    </div>
  );
}

export default Flow;

常见应用

1. Stripe文档

展示如何使用 Stripe 结账功能，学习如何集成支付系统。

docs.stripe.com/payments/ch…

2. Shaderfrog

展示通过项目如何使用 Shaderfrog 进行着色器编辑。

shaderfrog.com/2/editor/cl…

3. Typeform

展示逻辑图的使用方法，通过节点UI管理复杂逻辑。

www.typeform.com/help/a/use-…

8. Pieces - 工作流助手

github.com/pieces-app

基本介绍

Pieces 是一款AI赋能的生产力工具，通过智能代码片段管理简化开发者的工作流程，同时确保隐私和安全。

常见应用

1. DeskBuddy

社区项目，用于通过分析和对话助手了解、评估和改进编码习惯。

2. CLI Agent

与 Pieces OS 无缝互动的命令行工具，提供了众多功能，如资产管理、应用交互等。

3. Streamlit & Pieces

使用 Streamlit 构建的交互式聊天机器人应用，提供实时问答界面。

最后

如果今天的文章有帮到你，希望能够得到一个免费的点赞和关注～

avatar
文章
阅读
粉丝