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

标签：github const 应用 com 构建 https 带有源代码创意

你好，前端开发爱好者。

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

1. `CopilotKit` - 快速集成AI助手

https://github.com/CopilotKit/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驱动的博客平台：

使用 Next.js, Langchain, Supabase 和 CopilotKit 构建。
https://dev.to/copilotkit/how-to-build-an-ai-powered-blogging-platform-nextjs-langchain-supabase-1hdp

文本转PowerPoint应用：

使用 Next.js, OpenAI 和 CopilotKit 构建。
https://dev.to/copilotkit/how-to-build-ai-powered-powerpoint-app-nextjs-openai-copilotkit-ji2

V0.dev 克隆版：

使用 Next.js, GPT4 和 CopilotKit 构建。
https://dev.to/copilotkit/i-created-a-v0-clone-with-nextjs-gpt4-copilotkit-3cmb

与简历对话

使用 Next.js, OpenAI 和 CopilotKit 构建。
https://dev.to/copilotkit/how-to-build-the-with-nextjs-openai-1mhb

2. `Appwrite` - 轻松管理后端

https://github.com/appwrite/appwrite

基本介绍

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;

常见应用

增强现实食品应用：

使用 Appwrite 和 Flutter 构建。
https://github.com/Sameerkash/FoodMagic

GitHub仓库评分应用：

使用 Appwrite, Headless UI (React) 和 Next.js 构建。
https://github.com/EddieHubCommunity/RepoRater

Twitter克隆版：

使用 Flutter, Appwrite 和 Riverpod 构建。
https://www.youtube.com/watch?v=njLEDvoDjtk

3. `Resend` - 开发者邮件API

https://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: '[email protected]',
    to: '[email protected]',
    subject: 'Hello world',
    react: EmailTemplate({ firstName: 'John' }),
  });

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

常见应用

Gitroom

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

Anymail

在 Django 中发送和接收电子邮件，使用多个ESP服务。
https://github.com/anymail/django-anymail

Badget

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

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

https://ui.shadcn.com/docs

基本介绍

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

如何开始

npx shadcn-ui@latest init

常见应用

10000+ Shadcn UI 主题

可以探索、保存、生成和投票主题。
https://github.com/jln13x/ui.jln.dev/

Openv0

通过多个通过插件进行的AI UI组件生成。
https://github.com/raidendotai/openv0

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

https://buildship.com/

基本介绍

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

如何开始

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

常见应用

1. 构建旅行Web应用

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

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

https://www.youtube.com/watch?v=Pj08uTOzNPQ

2. Telegram上的AI助手

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

集成 OpenAI Assistant

https://www.youtube.com/watch?v=Pz1t1KCnrbs

3. AI YouTube时间戳生成器

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

https://www.youtube.com/watch?v=7DkLUY6kfTg

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

https://github.com/Avaiga/taipy

基本介绍

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

如何开始

pip install taipy

常见应用

1. Walletwise

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

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

https://github.com/Ujj1225/from_Taipy-walletWISE

2. 人口普查应用

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

https://github.com/SusheelThapa/from_taipy_census

3. Taipy Chess

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

https://github.com/KorieDrakeChaney/taipy-chess

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

https://github.com/xyflow/xyflow

基本介绍

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 结账功能，学习如何集成支付系统。

https://docs.stripe.com/payments/checkout/how-checkout-works#lifecycle

2. Shaderfrog

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

https://shaderfrog.com/2/editor/cln84z4950000pan66v5fcunv

3. Typeform

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

https://www.typeform.com/help/a/use-the-logic-map-to-add-logic-to-your-forms-5514792640916/

8. Pieces - 工作流助手

https://github.com/pieces-app

基本介绍

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

常见应用

1. DeskBuddy

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

主要使用 TypeScript 实现
https://github.com/ayothekingg/deskbuddy

2. CLI Agent

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

主要使用 Python 实现
https://github.com/pieces-app/cli-agent

3. Streamlit & Pieces

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

主要使用 Python 实现
https://github.com/pieces-app/pieces-copilot-streamlit-example

最后

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

标签：github,const,应用,com,构建,https,带有,源代码,创意
From： https://blog.csdn.net/ConardLi/article/details/143206346

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

1. `CopilotKit` - 快速集成AI助手

基本介绍

如何开始

集成示例

常见应用

2. `Appwrite` - 轻松管理后端

基本介绍

如何开始

创建登录组件

常见应用

3. `Resend` - 开发者邮件API

基本介绍

如何开始

集成示例

常见应用

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

基本介绍

如何开始

常见应用

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

基本介绍

如何开始

常见应用

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

基本介绍

如何开始

常见应用

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

基本介绍

如何开始

集成示例

常见应用

8. Pieces - 工作流助手

基本介绍

常见应用

最后

相关文章

赞助商

阅读排行

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

1. CopilotKit - 快速集成AI助手

基本介绍

如何开始

集成示例

常见应用

2. Appwrite - 轻松管理后端

基本介绍

如何开始

创建登录组件

常见应用

3. Resend - 开发者邮件API

基本介绍

如何开始

集成示例

常见应用

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

基本介绍

如何开始

常见应用

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

基本介绍

如何开始

常见应用

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

基本介绍

如何开始

常见应用

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

基本介绍

如何开始

集成示例

常见应用

8. Pieces - 工作流助手

基本介绍

常见应用

最后

相关文章

赞助商

阅读排行

1. `CopilotKit` - 快速集成AI助手

2. `Appwrite` - 轻松管理后端

3. `Resend` - 开发者邮件API

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