ChatGPT Model Selector

A ChatGPT-inspired model intelligence picker in two zero-dependency implementations:

• JavaScript: a standards-based Web Component that runs directly in the browser.
• SwiftUI: a reusable Swift Package for iOS 17+ and macOS 14+, plus a native demo app.

The two versions share the same five intelligence levels, magnetic snapping, animated color progression, reduced-motion behavior, and Ultra celebration.

Demo

https://github.com/user-attachments/assets/1025109b-c19d-42a1-8fb4-a035cc104bbf

JavaScript version

Open index.html in a browser, or include the component in your own page:

Listen for selection changes through the standard change event:

const selector = document.querySelector('chatgpt-model-selector');

selector.addEventListener('change', (event) => {
  console.log(event.detail.index, event.detail.tier, event.detail.model);
});

Web Component API

• value gets or sets the tier index.
• tier returns the current tier name.
• change emits { index, tier, model } in event.detail.

The component supports modern browsers with Web Components, Shadow DOM, Canvas 2D, and ResizeObserver.

SwiftUI version

Requirements

• Xcode 16 or newer
• Swift 6.0 or newer
• iOS 17 or newer
• macOS 14 or newer
• XcodeGen only when regenerating the iOS demo project

Add the package

In Xcode, choose File → Add Package Dependencies and enter:

https://github.com/zanwei/chatgpt-model-selector

Or add the package in Package.swift:

dependencies: [
  .package(
    url: "https://github.com/zanwei/chatgpt-model-selector.git",
    branch: "main"
  )
]

Then add the ChatGPTModelSelector library product to your target.

Use the component

import ChatGPTModelSelector
import SwiftUI

struct ComposerView: View {
  @State private var tier: ModelTier = .medium

  var body: some View {
    ModelSelector(
      modelName: "GPT-5.4",
      selection: $tier
    )
  }
}

The binding is the source of truth: user interaction updates it, and external writes move the sel