import { ParameterSlider } from "@/components/tool-ui/parameter-slider";

export function Example() {
  return (
    <ParameterSlider
      id="parameter-slider-example"
      sliders={[
        { id: "exposure", label: "Exposure", min: -3, max: 3, step: 0.1, value: 0.3, unit: "EV", precision: 1 },
        { id: "contrast", label: "Contrast", min: -100, max: 100, step: 5, value: 15, unit: "%" },
        { id: "highlights", label: "Highlights", min: -100, max: 100, step: 5, value: -20, unit: "%" },
      ]}
      onResponseAction={(actionId, values) => {
        console.log(actionId, values);
      }}
    />
  );
}

pnpm dlx shadcn@latest add button separator slider

"use client";

import { makeAssistantTool } from "@assistant-ui/react";
import {
  ParameterSlider,
  ParameterSliderErrorBoundary,
  parseSerializableParameterSlider,
  SerializableParameterSliderSchema,
  type SerializableParameterSlider,
} from "@/components/tool-ui/parameter-slider";

export const ParameterSliderTool = makeAssistantTool<SerializableParameterSlider>({
  toolName: "adjust_parameters",
  description: "Adjust numeric parameters with sliders",
  parameters: SerializableParameterSliderSchema,
  render: ({ args, result, addResult, toolCallId }) => {
    if (!args?.sliders?.length) return null;

    const data = parseSerializableParameterSlider({
      ...args,
      id: (args as any)?.id ?? `parameter-slider-${toolCallId}`,
    });

    return (
      <ParameterSliderErrorBoundary>
        <ParameterSlider
          {...data}
          onResponseAction={(actionId, values) => {
            if (actionId === "apply") {
              addResult({ values });
            }
          }}
        />
      </ParameterSliderErrorBoundary>
    );
  },
});