Prompt Area

嘿，Product Hunt 👋

我是Juma（原 Team-GPT）团队的一员。在构建 AI 聊天界面的过程中，我们总是遇到同一个难题：每个输入框都需要@提及、/命令、#标签、行内 markdown 和文件附件，但目前想要实现这些功能，只能把提及库 + 命令面板 + 标签输入框 + markdown 编辑器 + 上传组件拼凑在一起。一个输入框就要用到五个依赖、集成五套 API。

大多数所谓的富文本编辑器其实就是把文档编辑器（ProseMirror、Lexical、Slate）硬塞进聊天框里。

我们想要的恰好相反：一个专为提示词输入场景打造的组件。

因此我们开发了 Prompt Area 并开源了它：

• 单个 contentEditable 组件，集成全部功能：@提及、/命令、#标签、行内 markdown、文件与图片、撤销/重做、IME（中日韩）输入、复制粘贴保留标签块、深色模式、ARIA 无障碍支持。

• 两种安装方式，同一套源码，无厂商锁定。npm 安装：「npm install prompt-area」（自带 CSS，无需 Tailwind）。shadcn 安装：「npx shadcn@latest add https://prompt-area.com/r/prompt-area.json」（将源码直接复制到你的仓库，每一行代码都由你掌控）。

• 极少依赖：不依赖 ProseMirror / Slate / Lexical，零打包运行时依赖，压缩后约 37 kB。

• 附带配套组件：操作栏、状态栏、紧凑模式和聊天布局。足够重建出Claude Code、Codex、ChatGPT 或 Slack同款输入框。

耳听为虚眼见为实：这里有一个运行在你浏览器中的完整 Vite + React 应用（无需环境配置），点击访问 https://prompt-area.com/docs/try-it-live，你可以直接编辑代码，实时查看标签块和 markdown 的渲染效果。

它采用 MIT 许可证，完全免费。

我们真心期待你的反馈：目前缺少什么功能，做哪些改进就能直接接入你的技术栈，你还希望新增哪些触发行为。我今天一整天都会在这里回答大家的问题 🙏

代码仓库：https://github.com/just-marketing/prompt-area

文档与在线演示：https://prompt-area.com