panel

Side panel

A collapsible vertical panel positioned on the right or left side of a page view with base components (composer bar, results card) to interface with models. Visible alongside a primary workspace to provide context for model interactions.

Dark theme

Page contextPrompt tipsPush or overlay

Northwind LabsProductPricingBlog

Engineering blog · October 21, 2026 · 6 min read

How we cut image generation costs by 38%

Last quarter our image bill grew faster than our user base. Most of the spend went on drafts that people looked at once and threw away, so we changed where those drafts are made.

Drafts now go to a fast, low-cost model. Only the draft a person picks is rendered again on the large model. Because most sessions end after one pick, large-model calls fell by 61%.

We also cache results. When the same prompt and settings come in within 24 hours, we return the stored image instead of generating a new one. About 9% of requests hit the cache, mostly from shared templates.

Finally, free accounts now get 20 images a day, down from 50. Paid plans are unchanged.

Quality held: the average rating stayed at 4.4 out of 5 across the quarter.

Code snippet

The bare minimum is a panel with a title, placed beside your page. With a ChaiProvider, it answers with your reasoning model. Page context and prompt tips are opt-in, and a tip doesn't have to be about the page.

For the stylesheets and the server route that holds your API keys, see Develop.

import type { ReactNode } from "react";
import { SidePanel } from "@chai-ui/react";

// Push mode takes its own width: place the panel beside your page content.
export function Layout({ children }: { children: ReactNode }) {
  return (
    <div style={{ display: "flex" }}>
      <main style={{ flex: 1 }}>{children}</main>
      <SidePanel
        title="Northwind Assistant"
        description="Ask about this page, or anything else."
        pageContext
        promptTips={["Summarize this page", "What changed for free accounts?", "Draft a polite out-of-office reply"]}
      />
    </div>
  );
}

Add more

Feature	Props	Notes
Which side	`side`	Right (default) or left
Push or overlay	`mode`	Push takes its own width beside your content
Page context	`pageContext`	Off by default; sends the page with each question, shown as a chip
Prompt tips	`promptTips`	Short examples in the empty state; a tap sends one
Answer style	`answers`	Simple text, or a full ResultCard each

Preview controls

Side

side: which edge of the page the panel sits on.

Layout

mode: push takes its own width beside your content, so place the panel as a flex sibling of your page. Overlay floats over the page. Below 600px wide, both open as a full-screen sheet.

Answers

answers: simple text on the panel with like, dislike, retry and copy, or each answer in a full ResultCard.

Page context

pageContext: sends the page's title, address, selected text and main text with each question, shown as a This page chip the person can remove to ask something else. Off, the panel is for general questions only.

Prompt tips

promptTips: short examples in the empty state, under Getting started. One here isn't about the page.

Footer note

footer: a short note under the Composer, such as a disclaimer.

Make answers fail

The next answer fails, so the error and its retry are reachable without a real failing model.