Model settings

Controls for which model runs and how: a run-settings sidebar for a playground, a quick popover from the chat header, and preset tones with the numbers tucked away.

support-reply-v3DraftLast run 2.4s · 312 tokensRunCtrl ↵

System

You answer support email for Fieldnote. Two short paragraphs at most. Never promise refunds. If a feature is missing, say so plainly and point to the roadmap page.

User

Can I export a notebook to Markdown and keep the images? I tried yesterday and only got the text.

Assistant· Sonnet 5.5

Yes. Open the notebook, choose File, then Export, then Markdown, and tick “Include attachments”. Images are saved to an assets folder next to the .md file.

If the box was unticked yesterday, that would explain the text-only export.

User

Thanks. Does that work for shared notebooks too, or only ones I own?

Assistant· Sonnet 5.5

It works for any notebook you can open, shared or your own. Attachments the owner has restricted are skipped, and the export lists them at the end of the file so you know what is missing.

Add message

Run settings

Model

Temperature

Top P

Max output tokensUp to 64,000

Reasoning effort

Stop sequences2 / 4

\n\nCustomer:</answer>

Loading preview…

Install

1
Run this command in your Tailwind CSS project. It adds components/ai/model-settings-sidebar.tsx and installs its dependencies.
$ npx shadcn@latest add https://gradientdeck.com/ai-components/r/model-settings-sidebar.json

Usage & API

Example

model-settings-sidebar.tsx

import { RunSettings } from "@/components/ai/model-settings-sidebar"

<RunSettings
  models={[]}
  value={value}
  defaults={defaults}
  onChange={() => {}}
/>

Props `RunSettings`

Prop	Type & description	Required
`models`	`RunModel[]`	Required
`value`	`RunSettingsValue`	Required
`defaults`	`RunSettingsValue`	Required
`onChange`	`(value: RunSettingsValue) => void`	Required
`className`	`string`	Optional

Dependencies

React
Tailwind CSS
motion
lucide-react

Implementation notes

Run settings is a narrow column titled Run settings. The model button shows the current name, its context size, and input and output price per million tokens. Opening it lists every model with those prices and a check on the selected row. Below that, temperature runs from 0 to 2 in steps of 0.05, top P from 0 to 1 in steps of 0.01, and max output tokens is a number field capped at the selected model's max, with the ceiling written under the label. Reasoning effort is a four-way control, Off, Low, Medium and High, dimmed and disabled when the model has no reasoning, with the note Not on followed by the model name. Stop sequences sit at the bottom with a count out of 4. Reset restores the defaults object in one click.

Example

model-settings-popover.tsx

import { ModelPopover } from "@/components/ai/model-settings-popover"

<ModelPopover
  models={[]}
  value={value}
  onChange={() => {}}
/>

Props `ModelPopover`

Prop	Type & description	Required
`models`	`HeaderModel[]`	Required
`value`	`ChatModelSettings`	Required
`onChange`	`(value: ChatModelSettings) => void`	Required
`budgets`	`number[]`Thinking budget steps in tokens.	Optional
`defaultOpen`	`boolean`Start open, for demos.	Optional

Dependencies

React
Tailwind CSS
motion
lucide-react

Implementation notes

Header popover is a button that reads the model name, a middle dot, and the creativity label, with a chevron. A brain icon sits in front when extended thinking is on. The dialog, labelled Model settings, lists each model as a radio with its name and a short note, and a check on the current one. Creativity is a segmented control: Precise, Balanced, Creative. Extended thinking is a switch. If the current model cannot think, the switch is disabled and the note says it is not available on that model. While thinking is on, a Thinking budget slider appears over the steps you pass, defaulting to 1K through 32K tokens, and the chosen step is written out beside the label. A checkbox at the bottom says Use as default for new chats. Escape or a click outside closes the dialog and returns focus to the button.

Example

model-settings-presets.tsx

import { TonePresets } from "@/components/ai/model-settings-presets"

<TonePresets
  presets={[]}
  value={value}
  onChange={() => {}}
/>

Props `TonePresets`

Prop	Type & description	Required
`presets`	`TonePreset[]`	Required
`value`	`ToneValue`	Required
`onChange`	`(value: ToneValue) => void`	Required
`defaultAdvancedOpen`	`boolean`	Optional

Dependencies

React
Tailwind CSS
motion
lucide-react

Implementation notes

Presets is a tone radio group. You pass the preset list. Each card shows a name, a note, and three figures: Temp, Top P and Max. A Custom card is always appended, labelled Your numbers, and it shows the live values instead of a stored preset. Choosing a named card copies that preset's temperature, top P and max tokens into the value. Advanced is a disclosure. It is forced open for Custom, and the button is disabled in that state so it cannot be collapsed away from the numbers. Inside are three sliders: Temperature from 0 to 2 by 0.1, Top P from 0.1 to 1 by 0.05, and Max length from 256 to 8192 by 256. The current figure sits to the right of each track. Hand-editing any of them selects the preset whose three numbers match, or Custom if none do.

Choosing a layout

Use the sidebar on a playground or eval screen, where the person comparing runs needs to see 0.40 and a stop sequence, not a friendlier label. The changed dots matter there, because a run that looked odd is often one knob away from the saved default. Put the popover in a chat header when the choice is per conversation and should stay one click from the thread. Creativity and a thinking budget are enough for that moment. A full sampling form would cover the messages.

Use presets on the model page of an assistant, next to instructions, where most people should pick a tone and only some should open the numbers. The cards stay readable when the page is narrow, and Advanced stays shut until someone asks or the value is already Custom. Skip all three when the product has one fixed model and no knobs. The model list, prices and context sizes are data you pass in. These files do not fetch a catalog, and they do not persist a default until you handle onChange.

Does dragging a slider run the model?

No. Every control only calls onChange with the next value. The sidebar also needs the defaults object so it can mark what changed and offer Reset. Sending the value, and saving a default for new chats, is up to the screen that holds the state.

What happens if the model cannot reason?

In the sidebar, picking that model sets effort to Off and disables the four effort buttons. In the popover, the extended thinking switch disables and the thinking budget hides. Presets have no reasoning control at all. They only carry temperature, top P and max length.

Instructions editor3 variants

Where people write what an assistant should always know or do: project instructions, a system prompt with variables to test, and a list of rules with where each applies.

Agent card4 variants

One agent shown where people find and run it: a card in their agents grid, a row in a list, a listing in a shared directory, and the header at the top of its chat.

Agent create2 variants

Set up a new agent, by describing it in a sentence or filling in its name, instructions, model and tools, with a preview to try it as you go.

Model settings

Install

Usage & API

Example

Props RunSettings

Dependencies

Example

Props ModelPopover

Dependencies

Example

Props TonePresets

Dependencies

More in Configure

Props `RunSettings`

Props `ModelPopover`

Props `TonePresets`