AI Prompt 在大语言模型（LLM）应用开发中扮演着至关重要的角色。然而，在 React 应用中管理和维护复杂的 AI Prompt 并非易事。ai-prompt-panel 应运而生，它作为一个 React 组件，提供了一个灵活且功能丰富的 AI Prompt 编辑体验，旨在简化 React 开发者的 AI Prompt 工程流程，提升开发效率和应用质量。

挑战：传统 AI Prompt 管理的痛点

在将大语言模型（LLM）集成到软件开发流程中时，AI Prompt 的管理问题日益凸显。直接在 React 应用代码中嵌入冗长、动态的 AI Prompt 字符串会导致以下问题：

• 代码混乱： 难以维护的字符串使得组件的可读性降低。想象一下，在一个大型电商应用中，你需要针对不同的商品类别和用户行为生成个性化的产品推荐 AI Prompt。如果没有良好的管理工具，这些 AI Prompt 将散落在代码各处，导致代码臃肿且难以维护。
• 复用性差： 复制粘贴 AI Prompt 会导致不一致和维护噩梦。例如，在一个客户服务应用中，你可能需要针对不同的客户问题类型使用类似的 AI Prompt 模板。如果仅仅通过复制粘贴来实现，一旦 AI Prompt 模板需要修改，就需要在所有复制的地方进行更改，极易出错。
• 参数处理困难： 手动将动态数据注入到 AI Prompt 中容易出错。比如，在一个旅游预订应用中，你需要根据用户选择的出发地、目的地和日期动态生成 AI Prompt。手动拼接这些参数不仅繁琐，而且容易因为数据类型错误或格式问题导致 AI Prompt 执行失败。
• 缺乏用户友好的界面： 开发人员甚至最终用户可能需要一种直观的方式来构建或选择 AI Prompt。例如，在一个内容创作平台中，用户可能希望通过可视化界面自定义 AI Prompt，以生成不同风格的文章或图片。传统的代码嵌入方式显然无法满足这种需求。

解决方案：ai-prompt-panel 的核心功能

ai-prompt-panel 通过提供以下核心功能，有效解决了上述 AI Prompt 管理的痛点：

• 富文本编辑器集成： 提供一个复杂的文本输入区域，用于制作和管理 AI Prompt。ai-prompt-panel 基于强大的 Tiptap 编辑器构建，支持 Markdown 语法、代码高亮等功能，让 AI Prompt 的编写更加便捷和高效。
• 可重用的 AI Prompt 模板定义： 创建和管理具有自定义触发器的 AI Prompt 模板库。例如，你可以创建一个名为“翻译”的 AI Prompt 模板，并将其触发器设置为“/translate”。当用户在编辑器中输入“/translate”时，该模板就会自动弹出，方便用户快速选择。
• 触发器和浮动菜单： 输入特殊字符（如 @ 或 /）以激活浮动菜单，从而可以轻松选择和插入预定义的模板。这种交互方式类似于 Slack 或 Discord 中的命令提示，极大地提升了 AI Prompt 的输入效率。
• AI Prompt 参数化： 在模板中包含动态占位符，并通过用户友好的模态框对其进行编辑。例如，你可以创建一个包含 {{input}} 和 {{language}} 两个占位符的翻译 AI Prompt 模板。当用户选择该模板时，会弹出一个模态框，要求用户输入需要翻译的文本和目标语言。
• 自定义菜单项： 轻松定义自己的浮动菜单项，包括标签、图标、触发器、模板和默认参数。这使得 ai-prompt-panel 可以灵活地适应各种不同的应用场景和 AI Prompt 需求。

优势：提升开发效率和用户体验

使用 ai-prompt-panel 为 React 应用赋能，可以带来以下显著优势：

• 增强的开发者体验： 只需定义一次复杂 AI Prompt，即可通过简单的触发器轻松调用。开发者无需再手动编写和维护大量的 AI Prompt 字符串，从而节省了大量时间和精力。
• 用户友好的 AI Prompt 构建： 为用户（可以是开发者，甚至是应用程序的最终用户）提供了一种从模板构建 AI Prompt 的直观方式。这使得 AI Prompt 的创建不再是专业人士的专属技能，而是可以开放给更广泛的用户群体。
• 类型感知（概念上）： 虽然组件本身是 React，但你定义的模板可以用 TypeScript 管理，从而鼓励为你的参数建立更好的数据契约。这意味着你可以在编译时就发现 AI Prompt 中的类型错误，避免运行时出现意外情况。
• 减少错误： 参数模态框有助于确保为你的动态 AI Prompt 提供正确的数据。这可以有效地避免因参数缺失或格式错误导致的 AI Prompt 执行失败。
• 集中式 AI Prompt 管理： 鼓励保持你的 AI Prompt 模板井然有序。ai-prompt-panel 可以作为 AI Prompt 的中央存储库，方便团队成员共享和协作。

实践：集成 ai-prompt-panel 到 React 项目

将 ai-prompt-panel 集成到 React 项目中非常简单。

安装

你可以使用你喜欢的包管理器进行安装：

npm install ai-prompt-panel
# or
yarn add ai-prompt-panel

你可能还需要导入其样式表（如果它是分开的）：

import 'ai-prompt-panel/dist/style.css'; // 请查看组件文档以获取正确的路径

代码示例：实际应用

让我们看看如何使用 ai-prompt-panel，以下代码示例改编自官方示例。

1. 导入和基本设置

// example_app_src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { AiPromptPanel, FloatingMenuItem, PromptEntity } from 'ai-prompt-panel';
import 'ai-prompt-panel/dist/style.css'; // 假设这是正确的路径

const App = () => {
  // 定义自定义浮动菜单项（AI Prompt 模板）
  const myActionItem = FloatingMenuItem.instance()
    .setLabel('My Action')
    .setIcon(<span>🚀</span>) // 使用你喜欢的图标
    .setTrigger('@myaction') // 输入 @myaction 触发
    .setTemplate('Executing my action with {{param1}}!') // 带有参数的模板
    .setParams({ param1: 'default value' }) // 参数的默认值
    .setShowParamsModal(true); // 显示模态框以编辑参数

  const anotherItem = FloatingMenuItem.instance()
    .setLabel('Slash Command')
    .setIcon(<span>📄</span>)
    .setTrigger('/') // 输入 / 触发
    .setTemplate('Running slash command: {{commandName}}')
    .setParams({ commandName: 'help' })
    .setShowParamsModal(true); // 如果此项不需要模态框，则可以为 false

  const allMyMenuItems: Array<FloatingMenuItem<PromptEntity>> = [myActionItem, anotherItem];

  return (
    <div style={{ fontFamily: 'Arial, sans-serif', padding: '20px' }}>
      <h1>AI Prompt Panel Demo</h1>
      <AiPromptPanel
        allMenuItems={allMyMenuItems}
        onContentChange={(htmlContent, textContent) => {
          console.log("HTML:", htmlContent);
          console.log("Text:", textContent);
        }}
        onSave={(htmlContent) => {
          console.log("Content to save:", htmlContent);
          alert("Content saved! Check the console.");
        }}
        // 你也可以设置初始内容
        // initialContent="<p>Hello world! Try typing @ or /</p>"
      />
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

2. 工作原理（用户视角）

• 用户在 AiPromptPanel 富文本编辑器中输入内容。
• 如果他们输入 @myaction 或 /，将出现一个浮动菜单，分别建议“My Action”或“Slash Command”。
• 选择一个项目（例如，“My Action”）后，文本“Executing my action with {{param1}}!”可能会被插入，并且会弹出一个模态框，允许用户编辑 param1。
• onContentChange 和 onSave 属性允许你获取最终组成的 AI Prompt 内容。

3. 示例中的关键概念

• AiPromptPanel 组件：主要的富文本编辑器区域。
• FloatingMenuItem.instance()：用于创建你的 AI Prompt 模板的构建器。
• .setLabel()：浮动菜单中的显示名称。
• .setIcon()：可选图标。
• .setTrigger()：使此项目出现的文本（例如，@myaction，/）。
• .setTemplate()：带有 {{param}} 样式占位符的实际 AI Prompt 字符串。
• .setParams()：一个对象，定义你的参数的默认值。
• .setShowParamsModal()：一个布尔值，用于控制在选择模板时是否出现用于参数编辑的模态框。
• allMenuItems 属性：传递给面板的你的定义的 FloatingMenuItem 实例的数组。
• onContentChange，onSave：用于获取编辑器内容的callback。

这个例子演示了 ai-prompt-panel 如何提供一种完全交互的方式来构建复杂的、参数化的 AI Prompt。你最初请求中提到的对 URL 和外部文档的引用可以通过让模板直接包含这些 URL 来处理，或者通过在你的 React 应用程序中获取内容，然后将其馈送到模板的参数中。

贡献与探索：开源的力量

ai-prompt-panel 是一个开源项目，欢迎您的贡献、反馈和使用！

• GitHub 仓库： https://github.com/halilagin/ai-prompt-panel 深入研究源代码，探索 example_app_src 以获取工作演示，阅读完整的 README，并通过打开 issue 或 pull request 进行贡献。
• npmjs 包： https://www.npmjs.com/package/ai-prompt-panel 获取最新版本和安装说明。

总结：告别混乱，拥抱高效的 AI Prompt 工程

停止在你的 React 代码中与混乱的 AI Prompt 字符串作斗争。ai-prompt-panel 提供了一种干净、交互式和强大的方式来管理和利用 AI Prompt 模板。通过提供带有可自定义触发器的富文本编辑器、参数化模板和基于模态框的编辑，它显着增强了开发人员和用户在使用 LLM 时的体验。

在你的下一个 AI 驱动的 React 项目中尝试使用 ai-prompt-panel，看看它如何简化你的 AI Prompt 工程工作流程！