Model Select

A model picker with provider logos.

"use client";

import { useState } from "react";

import { WorkflowModelSelect } from "../components/workflow-model-select";

export default function WorkflowModelSelectExample() {
  const [model, setModel] = useState("claude-sonnet-5-5");
  return (
    <div className="flex w-64 flex-col gap-1.5">
      <label
        className="text-sm leading-none font-medium"
        htmlFor="model-select"
      >
        Model
      </label>
      <WorkflowModelSelect
        id="model-select"
        onValueChange={setModel}
        value={model}
      />
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/workflow-model-select

WorkflowModelSelect is a shadcn Select over WORKFLOW_MODELS, which covers Claude, GPT, Gemini, Perplexity Sonar, Grok, Mistral and DeepSeek. Pass your own models to change the list.

Used in

GEO Workflow Builder

A workflow builder with a block palette, a playable canvas, a run log and a node sheet.