21 个开发者必备 AI 工具速览

我见过数百个 AI 工具，其中许多正在改变世界。

作为开发者，总有很多东西要学习，重要的是要专注于节省时间来做真正重要的事情。

我将介绍 21 个开发工具，可以让你的生活更轻松，特别是在开发者体验方面。

相信我，这份列表会让你感到惊喜！

1. Taipy - 将数据和 AI 算法转化为生产就绪的 Web 应用

Taipy 是一个开源的 Python 库，用于简单、端到端的应用开发，提供假设情景分析、智能管道执行、内置调度和部署工具。

我相信你们中的大多数人不太理解，所以让我解释一下：Taipy 用于为基于 Python 的应用创建 GUI 界面，并改进数据流管理。

关键是性能，Taipy 是完美的选择。

虽然 Streamlit 是一个流行的工具，但在处理大型数据集时其性能会显著下降，这使其不适合生产级使用。另一方面，Taipy 提供了简单易用，同时不牺牲性能。通过尝试 Taipy，你会亲身体验其用户友好的界面和高效的数据处理能力。

Taipy 有很多集成选项，可以与领先的数据平台无缝连接。

使用以下命令快速开始。

pip install taipy

让我们讨论一下最新的 Taipy v3.1 发布。

最新版本使在 Taipy 的多功能部分对象中可视化任何 HTML 或 Python 对象成为可能。这意味着像 Folium、Bokeh、Vega-Altair 和 Matplotlib 这样的库现在可用于可视化。

这也为 Plotly python 带来了本地支持，使绘制图表更加容易。

他们还通过分布式计算改进了性能，但最好的是 Taipy 和它的所有依赖现在完全兼容 Python 3.12，所以你可以在使用 Taipy 进行项目时使用最新的工具和库。

你可以阅读文档。

另一个有用的是 Taipy 团队提供了一个叫做 Taipy Studio 的 VSCode 扩展，可以加快 Taipy 应用的构建。

你也可以使用 Taipy 云部署你的应用。

如果你想阅读博客来查看代码库结构，你可以阅读 HuggingFace 的《使用 Taipy 在 Python 中为你的 LLM 创建 Web 界面》。

尝试新技术通常很困难，但 Taipy 提供了 10+ 个演示教程，带有代码和适当的文档供你跟随。

例如，一些演示示例和项目想法：

实时污染仪表板

一个使用工厂周围的传感器测量空气质量的用例，展示 Taipy 仪表板流数据的能力。查看 GitHub 仓库。

信用卡欺诈检测

一个分析信用卡交易以检测欺诈的 Taipy 应用。查看 GitHub 仓库。

COVID 数据分析

这使用了 2020 年的 COVID 数据集。页面显示不同的图表和 COVID 信息。还有一个预测页面来预测死亡人数。查看 GitHub 仓库。

创建一个 LLM 聊天机器人

这个演示展示了 Taipy 使最终用户能够使用 LLM 运行推理的能力。这里，我们使用 GPT-3 创建一个聊天机器人，并在交互式聊天界面中显示对话。你可以轻松更改代码以使用任何其他 API 或模型。查看 GitHub 仓库。

实时人脸识别

这个演示无缝地将人脸识别集成到我们的平台中，使用你的网络摄像头提供友好的实时人脸检测体验。查看 GitHub 仓库。

用例很棒，所以一定要查看它们。

Taipy 在 GitHub 上有 8.2k+ Stars，版本是 v3.1，所以他们在不断改进。

2. DevToys - 开发者的瑞士军刀

DevToys 帮助处理日常开发任务，如格式化 JSON、比较文本和测试正则表达式。

有了这个，就不需要使用不可信任的网站来处理数据的简单任务。通过智能检测，DevToys 可以检测到复制到 Windows 剪贴板的数据的最佳工具。

紧凑覆盖让你保持应用小巧并在其他窗口之上。最好的是可以同时使用应用的多个实例。

我可以肯定地说，开发者甚至不知道这个很棒的项目。

最后，一个为 Windows 生态设计的软件。哈哈！

他们提供的一些工具包括：

Hash（MD5、SHA1、SHA256、SHA512）

检查器和大小写转换器

色盲模拟器

颜色选择器和对比度

PNG / JPEG 压缩器

我不知道你怎么样，但我不会错过这个！

你可以阅读如何运行 DevToys。

关于许可证的说明。DevToys 使用允许重新分发应用作为试用版或共享软件而不做更改的许可证。但是，作者 Etienne BAUDOUX 和 BenjaminT 更希望你不要这样做。如果你认为有充分理由这样做，请先与我们联系讨论。

他们在 GitHub 上有 23k Stars，使用 C#。

3. Pieces - 你的工作流助手

Pieces 是一个支持 AI 的生产力工具，旨在通过智能代码片段管理、上下文化的助手交互和主动呈现有用的材料来帮助开发者管理工作流的混乱。

它最小化上下文切换，简化你的工作流，提升你的整体开发体验，同时通过完全离线的 AI 方法保持你的工作隐私和安全。很棒 :D

它与你最喜爱的工具无缝集成，以简化、理解和提升你的编码过程。

它有许多比表面上看起来更令人兴奋的功能。

它可以通过闪电般快速的搜索体验找到你需要的材料，让你按自然语言、代码、标签和其他语义查询，取决于你的偏好。可以说是"你的个人离线谷歌"。

Pieces 使用 OCR 和边缘 ML 升级屏幕截图以提取代码并修复无效字符。结果，你得到极其准确的代码提取和深层元数据丰富。

你可以看到 Pieces 可用的完整功能列表。

你可以阅读文档并访问网站。

他们为 Pieces OS 客户端提供了多个 SDK 选项，包括 TypeScript、Kotlin、Python 和 Dart。

就开源受欢迎程度而言，他们仍然是新手，但他们的社区是我迄今为止看到的最好的。加入他们，成为 Pieces 的一部分！

4. Infisical - 密钥管理平台

Infisical 是一个开源的密钥管理平台，团队使用它来集中管理他们的密钥，如 API 密钥、数据库凭证和配置。

他们正在让密钥管理对每个人都更加可访问，而不仅仅是安全团队，这意味着从头开始重新设计整个开发者体验。

个人而言，我不介意使用 .env 文件，因为我不是特别谨慎。不过，你可以阅读 Gregory 的《现在停止使用 .env 文件！》来理解。

他们提供四个 SDK，分别针对 Node.js、Python、Java 和 .Net。你可以自托管或使用他们的云。

使用以下 npm 命令快速开始。

npm install @infisical/sdk

这是你快速开始的方式（Node.js SDK）。

import { InfisicalClient, LogLevel } from "@infisical/sdk";

const client = new InfisicalClient({
    clientId: "YOUR_CLIENT_ID",
    clientSecret: "YOUR_CLIENT_SECRET",
    logLevel: LogLevel.Error
});

const secrets = await client.listSecrets({
    environment: "dev",
    projectId: "PROJECT_ID",
    path: "/foo/bar/",
    includeImports: false
});

Infisical 还提供一套工具来自动防止密钥泄露到 git 历史记录。这个功能可以在 Infisical CLI 级别使用预提交钩子或通过与 GitHub 等平台的直接集成来设置。

你可以阅读文档并查看如何安装 CLI，这是使用它的最佳方式。

Infisical 还可以用来将密钥注入 Kubernetes 集群和自动部署，以便应用使用最新的密钥。有很多集成选项可用。

在使用整个源代码前请检查他们的许可证，因为他们有一些企业级代码受 MIT Expat 保护，但别担心，大部分代码都可以自由使用。

他们在 GitHub 上有 11k+ Stars 和 125+ 个版本，所以他们在不断演进。加上 Infisical CLI 被安装了超过 540 万次，所以它非常值得信赖。

5. Mintlify - 在你构建时自动出现的文档

Mintlify 是一个 AI 驱动的文档编写器，你可以在 1 秒内为代码编写文档 :D

几个月前，我发现了 Mintlify，从那以后就一直很喜欢它。我见过很多公司使用它，我自己也曾用企业邮箱生成过完整的文档，事实证明整个过程非常简单，效果也很不错。如果你想要详尽的文档，Mintlify 就是解决方案。

这里要讨论的主要用例，是根据代码生成文档。在你编写代码时，它会自动为代码生成文档，让其他人更容易理解并跟上进度。

你可以安装 VSCode 扩展，也可以将其安装到 IntelliJ 中。

你只需高亮选中代码，或将光标放在想要生成文档的代码行上，然后点击 Write Docs 按钮（或按下 ⌘ + .）。

你可以阅读相关文档和安全指南。

如果你更喜欢通过教程学习，可以观看 How Mintlify works。它支持 10 多种编程语言，以及 JSDoc、reST、NumPy 等多种文档字符串格式。

顺便说一下，他们的网站地址是 writer.mintlify.com；仓库中当前提供的地址似乎是错误的。

Mintlify 是一款非常实用的代码文档工具，而编写文档正是每位开发者都应该努力做到的事情。它能帮助其他人更有效地理解你的代码。

它在 GitHub 上拥有约 2.5k 个 Star，使用 TypeScript 构建，深受许多开发者喜爱。

6. Replexica——由 AI 驱动的 React i18n 工具包

本地化确实很折磨人，因此让 AI 来帮忙绝对是个很酷的想法。

Replexica 是一款面向 React 的 i18n 工具包，可帮助你快速发布多语言应用。它不要求将文本提取到 JSON 文件中，而是使用由 AI 驱动的 API 处理内容。

它由以下两个部分组成：

Replexica Compiler——一个面向 React 的开源编译器插件。

Replexica Compiler——一个面向 React 的开源编译器插件。

Replexica API——云端 i18n API，使用 LLM 执行翻译。（按用量计费，提供免费套餐）

Replexica API——云端 i18n API，使用 LLM 执行翻译。（按用量计费，提供免费套餐）

它支持的一些 i18n 格式包括：

• 无需 JSON 的 Replexica compiler 格式。
• 用于 Markdown 内容的 .md 文件。
• 传统的基于 JSON 和 YAML 的格式。

当他们达到 500 个 Star 时，还在 DEV 上发布了官方公告。我是最早的一批读者之一（当时还不到 3 个 reaction）。文章涵盖了很多内容，因此你应该读一读 Max 的 We Got 500 Stars What Next。

为了让你大致了解 Replexica，下面展示了将一个基础 Next.js 应用改造成多语言应用所需的唯一改动。

使用以下 npm 命令开始：

// install
pnpm add replexica @replexica/react @replexica/compiler

// login to Replexica API.
pnpm replexica auth --login

用法如下：

// next.config.mjs

// Import Replexica Compiler
import replexica from '@replexica/compiler';

/** @type {import('next').NextConfig} */
const nextConfig = {};

// Define Replexica configuration
/** @type {import('@replexica/compiler').ReplexicaConfig} */
const replexicaConfig = {
  locale: {
    source: 'en',
    targets: ['es'],
  },
};

// Wrap Next.js config with Replexica Compiler
export default replexica.next(
  replexicaConfig,
  nextConfig,
);

你可以阅读入门指南，以及清晰说明其底层使用了哪些技术的文档。

Replexica Compiler 支持 Next.js App Router，Replexica API 支持英语 🇺🇸 和西班牙语 🇪🇸。他们下一步计划推出对 Next.js Pages Router 和法语 🇫🇷 的支持！

它在 GitHub 上拥有 740 多个 Star，并使用 TypeScript 构建。这是一个值得持续关注后续进展的项目！

7. Flowise——通过拖放式 UI 构建自定义 LLM 流程

Flowise 是一个开源的可视化 UI 工具，用于构建自定义的 LLM 编排流程和 AI 智能体。

使用以下 npm 命令开始：

npm install -g flowise
npx flowise start
OR
npx flowise start --FLOWISE_USERNAME=user --FLOWISE_PASSWORD=1234

API 的集成方式如下：

import requests

url = "/api/v1/prediction/:id"

def query(payload):
  response = requests.post(
    url,
    json = payload
  )
  return response.json()

output = query({
  question: "hello!"
)}

你可以阅读相关文档。

目前不提供云托管服务，因此你需要按照这些说明自行托管。

让我们探索一些使用场景：

假设你有一个网站（可以是商店、电商网站或博客），想抓取该网站的所有相关链接，并让 LLM 回答关于你网站的任何问题。你可以按照这个分步教程实现这一目标。

你还可以创建一个自定义工具，让它能够调用 webhook 端点，并将必要的参数传入 webhook 请求体。按照这篇指南操作，其中将使用 Make.com 创建 webhook 工作流。

此外还有许多其他使用场景，例如构建 SQL 问答系统或与 API 交互。

FlowiseAI 在 GitHub 上拥有 27.5k 多个 Star 和超过 10k 个 fork，因此整体的 Star 与 fork 比例相当不错。

8. Hexo——快速、简洁且强大的博客框架

大多数开发者都更喜欢拥有自己的博客，如果你也是如此，Hexo 或许就是那款你之前并不了解的工具。

Hexo 支持许多功能，例如极快的生成速度、GitHub Flavored Markdown 和大多数 Octopress 插件；它还能通过一条命令部署到 GitHub Pages、Heroku 等平台，并提供强大的 API，实现无限扩展能力，同时拥有数百款主题和插件。

这意味着你可以使用 Markdown（或其他标记语言）撰写文章，而 Hexo 能在几秒钟内生成带有精美主题的静态文件。

使用以下 npm 命令开始：

npm install hexo-cli -g

用法如下：

// Setup your blog
hexo init blog

// Start the server
hexo server

// Create a new post
hexo new "Hello Hexo"

你可以阅读相关文档，并查看 Hexo 提供的 400 多款插件和主题。就我所见，这些插件支持广泛的使用场景，例如 Hexo 的 Ansible 部署插件。

你可以观看这个关于在 Hexo 上编写和组织内容的 YouTube 教程。

Hexo 在 GitHub 上拥有 38k 多个 Star，并被 GitHub 上超过 125k 名开发者使用。目前已发布 v7 版本，解压后的大小为 629 kB。

9. Screenshot to Code——拖入截图并将其转换为整洁的代码

这个开源项目广受欢迎，但仍有许多开发者不了解它。它可以帮助你将构建用户界面的速度提升 10 倍。

这是一个简单的工具，能够使用 AI 将截图、模型稿和 Figma 设计转换成整洁且可运行的代码。

该应用采用 React/Vite 前端和 FastAPI 后端。你需要一个有权访问 GPT-4 Vision API 的 OpenAI API key；如果想使用 Claude Sonnet 或实验性的视频支持，则需要 Anthropic key。你可以阅读入门指南。

你可以在托管版本中在线试用，并查看 wiki 中提供的一系列演示视频。

它在 GitHub 上拥有 47k 多个 Star，支持 React、Vue 等多种技术栈，并支持 GPT-4 Vision、Claude 3 Sonnet 和 DALL-E 3 等优秀的 AI 模型。

为 Screenshot to Code 点个 Star ⭐️

10. Appsmith——用于构建管理面板、内部工具和仪表盘的平台

管理面板和仪表盘是大多数软件创意中常见的组成部分，我曾尝试从零开始构建它们，整个过程非常痛苦，还需要付出大量不必要的工作。

你应该见过一些组织构建内部应用，例如仪表盘、数据库 GUI、管理面板、审批应用、客户支持仪表盘等，以帮助团队执行日常运营工作。正如我所说，Appsmith 是一款开源工具，可以帮助你快速开发这些内部应用。

首先，可以观看这段用 100 秒介绍 Appsmith 的 YouTube 视频。

它提供用于构建 UI 的拖放式组件。你可以使用 45 种以上可自定义的组件，在几分钟内创建美观的响应式 UI，而无须编写任何 HTML/CSS。你还可以查看完整的组件列表。

Appsmith 允许你在 GUI 中几乎所有位置编写 JavaScript 代码，包括组件属性、事件监听器、查询和其他设置。Appsmith 支持在 {{ }} 中编写单行代码，并会将括号之间的所有内容解释为 JavaScript 表达式。

/*Filter the data array received from a query*/
{{ QueryName.data.filter((row) => row.id > 5 ) }}

or

{{
  storeValue("userID", 42);  
  console.log(appsmith.store.userID); 
  showAlert("userID saved");
}}

编写多行代码时，需要使用立即调用函数表达式（IIFE）。

下面分别是无效和有效的代码。

// invalid code
/*Call a query to fetch the results and filter the data*/
{{ 
   const array = QueryName.data;
   const filterArray = array.filter((row) => row.id > 5);
   return filterArray;
}}

/* Check the selected option and return the value*/
{{ 
  if (Dropdown.selectedOptionValue === "1") {
      return "Option 1";
  } else {
      return "Option 2";
  }
}}

/* 调用查询，然后操作其结果 */
{{ 
  (function() {
      const array = QueryName.data;
      const filterArray = array.filter((row) => row.id > 5);
      return filterArray;
   })()
}}

/* 验证选中的选项并返回值 */

{{ 
  (function() {
      if (Dropdown.selectedOptionValue === "1") {
        return "Option 1";
      } else {
        return "Option 2";
      }
   })()
}}

你可以通过几个简单的步骤创建从简单的 CRUD 应用到复杂的多步工作流的任何应用：

与数据库或 API 集成。Appsmith 支持最受欢迎的数据库和 REST API。

与数据库或 API 集成。Appsmith 支持最受欢迎的数据库和 REST API。

使用内置小组件构建应用布局。

使用内置小组件构建应用布局。

在编辑器中的任何地方使用查询和 JavaScript 表达你的业务逻辑。

在编辑器中的任何地方使用查询和 JavaScript 表达你的业务逻辑。

Appsmith 支持使用 Git 进行版本控制，以便通过分支进行协作开发、跟踪和回滚变更。部署应用并共享它 :)

Appsmith 支持使用 Git 进行版本控制，以便通过分支进行协作开发、跟踪和回滚变更。部署应用并共享它 :)

你可以阅读文档和操作指南，比如如何连接到本地数据源或如何与第三方工具集成。

你可以自托管或使用云服务。他们还提供 20+ 个模板，让你快速开始。一些有用的模板包括：

维护订单管理

内容管理系统

Appsmith 在 GitHub 上有 31k+ 的星标，已发布 200+ 个版本。

11. BlockNote - 基于块的（Notion 风格）可扩展富文本编辑器

常言道，除非你在学习新东西，否则不要重新发明轮子。

BlockNote 是开源的基于块的 React 富文本编辑器。你可以轻松地为应用添加现代化的文本编辑体验。

BlockNote 构建在 Prosemirror 和 Tiptap 之上。

它具有许多功能，如下所示。

你可以轻松自定义内置的 UI 组件，或创建自己的块、内联内容和样式。如果你想走得更远，可以使用额外的 Prosemirror 或 TipTap 插件扩展核心编辑器。

其他库虽然功能强大，但往往学习曲线陡峭，需要你自定义编辑器的每一个细节。这可能需要数月的专业工作。

BlockNote 则提供了良好的体验，同时设置最少，包括现成的且动画丰富的 UI。

使用以下 npm 命令开始。

npm install @blocknote/core @blocknote/react

以下是你的使用方式。使用 useCreateBlockNote hook，我们可以创建一个新的编辑器实例，然后使用 BlockNoteView 组件渲染它。

还导入了 @blocknote/react/style.css 以为编辑器和 BlockNote 导出的 Inter 字体添加默认样式（可选）。

import "@blocknote/core/fonts/inter.css";
import { BlockNoteView, useCreateBlockNote } from "@blocknote/react";
import "@blocknote/react/style.css";

export default function App() {
  // 创建一个新的编辑器实例
  const editor = useCreateBlockNote();

  // 使用 React 组件渲染编辑器实例
  return <BlockNoteView editor={editor} />;
}

你可以阅读文档和可用的 UI 组件。

你应该尝试一下，特别是因为它包括大量功能，如"斜杠"菜单、平滑动画，以及创建实时协作应用的潜力。

他们还提供了 20+ 个示例，包括预览和代码，你可以快速参考。

BlockNote 在 GitHub 上有 5k+ 的星标，被 1.5k+ 开发者使用。

12. CopilotKit - 在几小时内为你的产品添加 AI 智能体

在 React 中集成 AI 功能很困难，这就是 CopilotKit 派上用场的地方。一个简单快速的解决方案，将生产就绪的 AI 智能体集成到任何产品中！

你可以使用两个 React 组件将关键 AI 功能集成到 React 应用中。他们还提供内置的（完全可定制的）AI 智能体原生 UX 组件，如 <CopilotKit />、<CopilotPopup />、<CopilotSidebar />、<CopilotTextarea />。

使用以下 npm 命令开始。

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

Copilot Portal 是 CopilotKit 提供的组件之一，它是一个应用内 AI 聊天机器人，可以查看当前应用状态并在你的应用内采取行动。它与应用前端和后端以及第三方服务通过插件进行通信。

以下是你可以如何集成聊天机器人。

CopilotKit 必须包装所有与 CopilotKit 交互的组件。建议你也从 CopilotSidebar 开始（你可以稍后切换到不同的 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>
  );
}

你可以使用此快速入门指南设置 Copilot 后端端点。

之后，你可以让 Copilot 采取行动。你可以阅读如何提供外部上下文。你可以使用 useMakeCopilotReadable 和 useMakeCopilotDocumentReadable React hooks 来执行此操作。

"use client";

import { useMakeCopilotActionable } from '@copilotkit/react-core';

// 让 AI 智能体代表用户采取行动
useMakeCopilotActionable(
  {
    name: "setEmployeesAsSelected", // 函数名中不允许有空格
    description: "Set the given employees as 'selected'",
    argumentAnnotations: [
      {
        name: "employeeIds",
        type: "array", items: { type: "string" }
        description: "The IDs of employees to set as selected",
        required: true
      }
    ],
    implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds),
  },
  []
);

你可以阅读文档并查看演示视频。

你可以