FeatureDrop v3 — 您的应用程序现在决定何时以及如何展示功能
Sure! I’m ready to translate the article for you, but I’ll need the actual text you’d like translated. Could you please paste the content (or the portion you want translated) here? I’ll keep the source link at the top exactly as you provided and preserve all formatting, markdown, and code blocks.
GitHub | 文档 | npm | shadcn 组件 | 示例应用
TL;DR
- 客户端行为引擎 – 4 kB，无服务器
- 自动格式选择（徽章 / toast / 模态）针对每个用户
- 免费，MIT 许可证 – 479 个测试，兼容 Next.js、Remix、Astro、Nuxt + shadcn
每个产品采纳工具 — Pendo、Appcues、Chameleon — 的工作方式相同：
- 收集数周的服务器端分析数据。
- 告诉你哪些用户需要被提示。
它们的收费为 $250–$7,000 / month。
我们构建了一个 4 kB 客户端引擎，能够在 session 1 就做出相同的决策。无需服务器。无需数据收集。MIT 许可证。
FeatureDrop v3（如果想了解背景，可查看 v2 发布帖 [here] —— 它火了，所以我继续构建。）
v3 的内容
| Metric | v2.7 | v3.0 |
|---|---|---|
| Core bundle (gzip) | 3.01 kB | 3.02 kB |
| Engine bundle (gzip) | — | 4.08 kB |
| Tests | 374 | 479 |
| Sub‑path exports | 20 | 26 |
| Framework integrations | 7 | 11 |
| shadcn components | 0 | 5 |
| CLI commands | 9 | 10 |
核心体积未增长。零运行时依赖。引擎是一个 opt‑in 4 kB add‑on ——如果你不导入它，就不需要为它付费。
npm install featuredrop@3AdoptionEngine – 系统的核心
┌─────────────────────────────────────────┐
│ AdoptionEngine │
├──────────────┬──────────────────────────┤
│ Behavior │ Tracks sessions, dismiss │
│ Tracker │ patterns, engagement │
├──────────────┼──────────────────────────┤
│ Timing │ Cooldowns, fatigue │
│ Optimizer │ detection, optimal gaps │
├──────────────┼──────────────────────────┤
│ Format │ Badge vs toast vs modal │
│ Selector │ based on user behavior │
├──────────────┼──────────────────────────┤
│ Adoption │ A‑F grading, breakdown, │
│ Scorer │ recommendations │
└──────────────┴──────────────────────────┘基本用法
import { FeatureDropProvider } from 'featuredrop/react';
import { createAdoptionEngine } from 'featuredrop/engine';
import { LocalStorageAdapter } from 'featuredrop';
import features from './features.json';
const engine = createAdoptionEngine();
function App() {
return (
<FeatureDropProvider engine={engine} features={features}>
{/* Your app goes here */}
</FeatureDropProvider>
);
}就是这样。引擎现在会观察用户行为并做出决策。无需额外配置。
智能钩子 – 让引擎决定格式
import { useSmartFeature } from 'featuredrop/react/hooks';
function Sidebar() {
const { show, format, feature, dismiss, confidence } =
useSmartFeature('ai-search');
if (!show) return null;
// Engine decided: badge for power users, toast for new users
if (format === 'badge')
return <>{feature.label}</>;
if (format === 'toast')
return <>{feature.description}</>;
if (format === 'banner')
return <>{feature.label}</>;
}confidence告诉你引擎有多确定。- 第一次会话 → 低置信度 → 保守的格式。
- 第十次会话且模式明确 → 高置信度 → 最佳格式。
没有引擎时，钩子会优雅降级 — 始终显示，始终使用徽章格式。零破坏性变更。
单组件解决方案
import { SmartAnnouncement } from 'featuredrop/react';
// Engine picks the format automatically
<SmartAnnouncement featureId="new-feature" />;
// Or bring your own UI with render props
<SmartAnnouncement featureId="new-feature">
{({ feature, format, dismiss }) => (
<div className={format}>
<h3>{feature.label}</h3>
<button onClick={dismiss}>Dismiss</button>
</div>
)}
</SmartAnnouncement>内置格式渲染器（6）：badge、toast、banner、inline、modal、spotlight。每个都会适配用户。
一流框架集成
Next.js（服务器组件）
// app/layout.tsx
import { getNewCountServer, FeatureDropScript } from 'featuredrop/next';
export default async function Layout({ children }) {
const manifest = await getManifest();
const dismissed = await getDismissedIds(userId);
const newCount = getNewCountServer(manifest, dismissed);
return (
<html>
<head>
<FeatureDropScript />
</head>
<body>
<header>
What’s New {newCount > 0 && <span>{newCount}</span>}
</header>
{children}
</body>
</html>
);
}类似的原生集成还支持 Remix、Astro 和 Nuxt —— 每次请求都会创建一个全新的
MemoryAdapter，从而避免共享状态和竞争条件。
shadcn/ui 组件
# Changelog widget for React — yours to customize
npx shadcn@latest add https://featuredrop.dev/r/changelog-widget.json
npx shadcn@latest add https://featuredrop.dev/r/new-badge.json
npx shadcn@latest add https://featuredrop.dev/r/tour.json
npx shadcn@latest add https://featuredrop.dev/r/checklist.json
npx shadcn@latest add https://featuredrop.dev/r/feedback-widget.jsonshadcn 注册表 将 FeatureDrop 转换为一个位于您代码库中的 React 组件库。
- 使用您已有的 shadcn 基础组件（
Badge、Sheet、Dialog）。 - 尊重您的 Tailwind 主题和设计令牌。
- 没有我们额外的 CSS —— 由您。
AI‑assisted setup
npx featuredrop ai-setup该命令会自动检测您的编辑器并创建正确的上下文，使每个 AI 编码助手现在都能理解 FeatureDrop。
编辑器
它创建的内容
| 工具 | 文件 / 配置 |
|---|---|
| Claude Code | .claude/skills/featuredrop.md + MCP config |
| Cursor | .cursorrules + .cursor/mcp.json |
| VS Code | .vscode/mcp.json |
MCP 服务器 为你的 AI 助手提供：
- 5 个工具 – 脚手架功能、验证清单、建议组件，…
- 6 个资源 – 钩子参考、组件目录、适配器指南，…
示例： 告诉 Claude “在我的侧边栏添加变更日志”，它将在第一次尝试时生成正确的导入、钩子和提供者设置。
产品采用工具对比
| 功能 | Pendo | FeatureDrop v3 |
|---|---|---|
| 功能公告 | ✅ | ✅ |
| 产品导览 | ✅ | ✅ |
| 清单 | ✅ | ✅ |
| NPS / 调查 | ✅ | ✅ |
| 反馈收集 | ✅ | ✅ |
| 智能时机 | 服务器端，数周数据 | 客户端，会话 1 |
| 格式适配 | 手动规则 | 自动 |
| 采用评分 | 仅仪表盘 | 应用内钩子 |
| 包大小 | 100–300 kB | 3 kB 核心 + 4 kB 引擎 |
| 数据收集 | 他们的服务器 | 你的浏览器——仅此而已 |
| 价格 | $7,000+/year | $0 |
| 供应商锁定 | ✅ | MIT 许可证 |
关键要点： 您不需要价值 7 k 美元的分析管道来做出智能的采用决策。一个 4 kB 的客户端引擎配合 localStorage 就足够了。
入门
npm install featuredrop- 创建
features.json并写入你的功能定义。 - 用
<FeatureDropProvider …>包裹你的应用。 - 在任意位置放置
<SmartAnnouncement …>。
就这样——引擎会处理其余工作。
资源：
[GitHub] | [Docs] | [shadcn Components] | [Example App]
FeatureDrop Cloud（面向团队的托管仪表盘）即将上线。开源库将永远免费。
Discussion
如果你使用过 Pendo、Appcues 或 Beamer，是什么原因让你选择付费使用而不是自行内部构建？欢迎在评论中分享你的想法。
我是 GDS K S，正在 GLINR Studios 构建 FeatureDrop。⭐️ 如果觉得有用，请给仓库加星。