mcpField
C
components

components

github.com/tambo-ai开发11.2k99 次安装3 周前更新
代码仓库

关于 components

这是用于定义 Tambo React 组件的技能，AI 可按需生成组件，也可更新已放入界面的组件。适合构建包含临时内容和持久交互元素的 AI 界面的开发者。

主要功能

  1. 01按需生成组件
  2. 02AI 更新交互组件
  3. 03使用 Zod 定义属性结构
  4. 04在消息中渲染组件
  5. 05自动注册与更新

适用场景

  1. 01渲染 AI 选择的聊天回复
  2. 02用生成组件构建仪表板
  3. 03让 AI 更新设置和表单
  4. 04创建持久任务看板

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/tambo-ai/tambo --skill components

安装后在 Claude Code 中输入/components确认已加载。

详细介绍

Tambo 组件

两种组件类型：生成式（由 AI 按需创建）和可交互式（预先放置，由 AI 更新）。

快速入门

// Generative: AI creates when needed
const components: TamboComponent[] = [
  {
    name: "WeatherCard",
    component: WeatherCard,
    description: "Shows weather. Use when user asks about weather.",
    propsSchema: z.object({ city: z.string(), temp: z.number() }),
  },
];

<TamboProvider components={components}>
  <App />
</TamboProvider>;

生成式组件

AI 会根据用户消息动态选择并渲染这些组件。

import { TamboProvider, TamboComponent } from "@tambo-ai/react";
import { z } from "zod";

const WeatherCardSchema = z.object({
  city: z.string().describe("City name"),
  temperature: z.number().describe("Temperature in Celsius"),
  condition: z.string().describe("Weather condition"),
});

const components: TamboComponent[] = [
  {
    name: "WeatherCard",
    component: WeatherCard,
    description:
      "Displays weather for a city. Use when user asks about weather.",
    propsSchema: WeatherCardSchema,
  },
];

<TamboProvider apiKey={apiKey} components={components}>
  <App />
</TamboProvider>;
渲染生成式组件

使用 ComponentRenderer 在消息列表中渲染 AI 生成的组件：

import { ComponentRenderer } from "@tambo-ai/react";

function Message({
  message,
  threadId,
}: {
  message: TamboThreadMessage;
  threadId: string;
}) {
  return (
    <div>
      {message.content.map((block) => {
        switch (block.type) {
          case "text":
            return <p key={`${message.id}:text`}>{block.text}</p>;
          case "component":
            return (
              <ComponentRenderer
                key={block.id}
                content={block}
                threadId={threadId}
                messageId={message.id}
              />
            );
          default:
            return null;
        }
      })}
    </div>
  );
}
生成式组件要点
  • propsSchema：Zod 对象，每个字段都需使用 .describe()
  • description：告知 AI 何时使用该组件
  • 流式传输：Props 初始值为 undefined，请将其设为可选，或妥善处理
  • 使用 z.infer<typeof Schema> 作为 TypeScript props 类型

可交互组件

在 UI 中预先放置；AI 可以通过自然语言观察并更新 props。

import { withTamboInteractable } from "@tambo-ai/react";
import { z } from "zod";

const NoteSchema = z.object({
  title: z.string().describe("Note title"),
  content: z.string().describe("Note content"),
  color: z.enum(["white", "yellow", "blue"]).optional(),
});

function Note({ title, content, color = "white" }: Props) {
  return (
    <div style={{ backgroundColor: color }}>
      <h3>{title}</h3>
      <p>{content}</p>
    </div>
  );
}

export const InteractableNote = withTamboInteractable(Note, {
  componentName: "Note",
  description: "A note with editable title, content, and color",
  propsSchema: NoteSchema,
});
可交互组件的工作原理
  1. 自动注册：组件挂载时自动注册
  2. 发送上下文：当前 props 会自动提供给 AI
  3. 工具注册：更新工具会自动注册
  4. 双向交互：用户编辑和 AI 更新均可生效
如何选择
生成式可交互式
AI 按需创建由你在 UI 中预先放置
一次性渲染在整个会话中保持
Props 仅生成一次AI 可以更新 props
聊天响应、仪表板设置、表单、任务看板

评论

支持 Markdown