示例 3: 动态上下文助手

使用 contextHelpers 让 AI 感知当前页面状态，如主题、用户信息等。

主题：
用户：
💡 AI 可以感知你的主题和用户名

学习要点

1. contextHelpers

在 TamboProvider 中配置 contextHelpers，让 AI 访问当前环境信息。

2. 动态上下文

contextHelpers 是函数，每次 AI 请求时都会重新执行，获取最新状态。

3. 实用场景

主题适配、用户偏好、语言设置、权限检查等都可以通过 contextHelpers 实现。

4. 安全性

contextHelpers 只返回必要信息给 AI，不要暴露敏感数据如密码、token 等。

试试这些消息：

  • • "根据当前主题生成一个图表"
  • • "用我的名字打招呼"
  • • "创建一个适合当前主题的可视化界面"
  • • 切换主题和用户名，观察 AI 的响应变化

💡 提示：尝试切换上方的主题和用户名设置，然后让 AI 生成内容。 AI 会根据当前上下文做出相应的调整。例如，深色主题下可能生成深色配色的图表。

代码示例

<TamboProvider
  apiKey={apiKey}
  contextHelpers={{
    currentTheme: () => ({
      key: "theme",
      value: theme === "dark" ? "dark" : "light",
      description: "当前主题设置"
    }),
    currentUser: () => ({
      key: "userName",
      value: userName,
      description: "当前用户名称"
    })
  }}
>
  {children}
</TamboProvider>

contextHelpers 返回的对象包含：

  • key - 上下文的唯一标识符
  • value - 上下文的实际值（字符串或对象）
  • description - 可选的描述信息，帮助 AI 理解上下文含义