Skip to the main content

Select

Generate, sort, select and label content in dropdowns or lists.

<Select> Server Component

A smart dropdown component that creates all of its own options.

Live Example

<Select
  prompt="Selecting a time zone in GMT"
  context="The time zone for Sydney should be selected"
/>

useSelect hook

useSelect is a utility hook that lets you generate options for custom dropdown components or any list type content.

Live Example

    'use client'
 
import { useSelect } from '@trikinco/fullstack-components/client'
 
export default function Page() {
  const { isLoading, isError, data } = useSelect({
    prompt:
      'The nearest countries to Australia. Include a flag emoji in the label.',
    count: 10,
  })
 
  if (isLoading) {
    return 'Loading "The 10 nearest countries to Australia"'
  }
 
  if (isError) {
    return 'Could not load "The 10 nearest countries to Australia"'
  }
 
  return (
    <>
      <p className="font-bold mt-0">{data?.label}</p>
      <ul className="mb-0">
        {data?.content?.map((item) => (
          <li key={item.value}>{item.label}</li>
        ))}
      </ul>
    </>
  )
}

    Custom Server Component with getSelect

    Server Component
    import { getSelect } from '@trikinco/fullstack-components'
 
export default async function Page() {
  const { label, content } = await getSelect({
    prompt:
      'The nearest countries to Australia. Add a flag emoji in the label.',
    count: 10,
  })
 
  return (
    <>
      <p id="label" role="label">
        {label}
      </p>
      <div
        role="listbox"
        tabindex="0"
        id="dropdown"
        aria-labelledby="label"
        aria-activedescendant="dropdown-1"
        // ...other required attributes
      >
        {content?.map(({ label, value }) => (
          <div role="option" id={`dropdown-${value}`} key={value}>
            {label}
          </div>
        ))}
      </div>
    </>
  )
}

    Setup

    Add select: handleSelectRequest() to the API route handler.

    app/api/fsutils/[...fscomponents]/route.ts
    import {
  handleFSComponents,
  handleSelectRequest,
  type FSCOptions,
} from '@trikinco/fullstack-components'
 
const fscOptions: FSCOptions = {
  select: handleSelectRequest({
    openAiApiKey: process.env.OPENAI_API_KEY || '',
  }),
  // Additional options and handlers...
}
 
const fscHandler = handleFSComponents(fscOptions)
 
export { fscHandler as GET, fscHandler as POST }

    API Reference

    Types

    SelectOptions

    Select API route handler options.
    Properties

    openAiApiKeystring

    • default`process.env.OPENAI_API_KEY`.

    SelectRequestBodyinterface

    Select request body.
    Properties

    promptstring

    A text description for creating the dropdown.
    • example'All the GMT time zones'

    purposestring

    A text description of the purpose of the dropdown.
    • example'Selecting your time zone'

    contextstring

    A text description of additional context or information to help create the dropdown.
    • example'The time zone for Sydney should be selected'

    countnumber

    The number of dropdown options or list items to create.
    • example10

    SelectResponseinterface

    Select response body.
    Properties

    contentarray

    An array of options to list or display in a dropdown.
    • example[{ label: 'GMT+10:00 Brisbane, Melbourne, Sydney', value: 'Australia/Sydney', selected: true }, { label: 'GMT+12:00 Auckland, Wellington', value: 'Pacific/Auckland' }, ...]

    labelstring

    The overall associated label for the dropdown.
    • example'Select Time Zone (GMT)'

    ChatGptCompletionResponse

    The response body for `getSelect`.
    Properties

    responseTextstring

    The response text extracted from the completion message content.

    tokensUsednumber

    Total number of tokens used in the request (prompt + completion).

    finishReasonstring

    The reason the chat stopped. This will be `stop` if the model hit a natural stop point or a provided stop sequence, `length` if the maximum number of tokens specified in the request was reached, `content_filter` if content was omitted due to a flag from our content filters, `tool_calls` if the model called a tool, or `function_call` (deprecated) if the model called a function.

    errorMessagestring

    The error message if there was an error.

    Components

    SelectPropsinterface<object>

    Props to pass to the `<Select>` Server Component.
    Properties

    promptstring

    A text description for creating the dropdown.
    • example'All the GMT time zones'

    purposestring

    A text description of the purpose of the dropdown.
    • example'Selecting your time zone'

    contextstring

    A text description of additional context or information to help create the dropdown.
    • example'The time zone for Sydney should be selected'

    countnumber

    The number of dropdown options or list items to create.
    • example10

    labelReactNode

    Visible text in the `<label>` element. Overrides any generated `label` from the response.

    labelPropsHTMLAttributes<object>

    Additional props to pass to the `<label>` element.

    Selectfunction

    import { Select } from '@trikinco/fullstack-components'
    Select is a smart Server Component for dropdowns that creates, labels and sorts all its own options. Uses a native `<select>` element.
    Parameters

    propsSelectPropsrequired

    returnsPromise<JSX.Element>

    Hooks

    useSelectfunction

    import { useSelect } from '@trikinco/fullstack-components/client'
    A client-side fetch handler hook for generating a `label` and a list of options in `content` based on the provided `SelectRequestBody`.
    Parameters

    bodySelectRequestBodyrequired

    configUseRequestConsumerConfig<SelectRequestBody>

    Fetch utility hook request options without the `fetcher`. Allows for overriding the default `request` config.
    Returns

    isLoadingboolean

    Fetch loading state. `true` if the fetch is in progress.

    isErrorboolean

    Fetch error state. `true` if an error occurred.

    errorunknown

    Fetch error object if `isError` is `true`

    dataSelectResponse | undefined

    Fetch response data if the fetch was successful.

    refetchfunction

    Refetches the data.
    returnsundefined

    Utilities

    getSelectfunction

    import { getSelect } from '@trikinco/fullstack-components'
    Generates a list of options to list or display in a dropdown. Server Action that calls the third-party API directly on the server. This avoids calling the Next.js API route handler allowing for performant Server Components.
    Parameters

    requestSelectRequestBodyrequired

    optionsSelectOptions

    returnsPromise<ChatGptCompletionResponse>

    fetchSelectfunction

    import { fetchSelect } from '@trikinco/fullstack-components/client'
    Generates a `label` and a list of options in `content` based on the provided `SelectRequestBody`. Client-side fetch handler that calls the internal Next.js API route handler, then the third-party API. Best used for Client Components and functionality.
    Parameters

    bodySelectRequestBodyrequired

    configRequestConfigOnly

    Fetch utility request options without the `body`
    returnsPromise<SelectResponse>