The library for every answer.

Cards for what the agent shows, materials for everything around it, a runtime that keeps every request correct, and a backend you host in ten lines.

See the library
pnpm add @supersolutions/super-chat-ui
Signup funnel · last 30 days
Visitors
48,210
+8.2%
Signups
3,904
+3.1%
Activated
1,288
−4.6%
Paid
402
+1.9%
Signups vs activations
0100200W1W3W5W7W9W11W13
SignupsActivations
Vendor shortlist
HalcyonEU$48,200
BrightlineEU$52,900
TessellateUS + EU$39,800
Quarry and ValeEU$61,500
Budget used
72
% of the $60,000 budget
0On trackWatchOver100
Contract summary
Term
36 months
Liability cap
12 months of fees
Notice
90 days
Send the purchase request?
Vendor
Halcyon
Amount
$48,200 / year
Which plan should I price?
Where people drop
Visited
48,210
—
Signed up
3,904
8.1%
Activatedbiggest drop
1,288
33%
Paid
402
31.2%
Clause 7.2
Liability is capped at fees paid.
Liability is capped at fees paid in the twelve months before the claim.
Details for the request
export const POST =
  createProxyHandler({
    providers, authorize,
    onRequest: audit,
  });
Vendor review
  • Gather the quotes
  • Compare SSO and data terms
  • Draft the recommendation
system            included
skill:procurement included
retrieval         truncated
app-state         dropped
headroom  5,778 tok
Sources
  1. Unfair Contract Terms Act 1977
    s.2(1)
  2. Vertex MSA
    cl. 7.2
  3. Playbook: caps and carve-outs
Reading the vendor contracts
{ model: "gpt-5.2",
  tokens: 2188, ms: 4100,
  outcome: "ok" }
Renewal
  1. Notice window opens
    11/1/2026, 12:00:00 AM
  2. Last day to give notice
    1/30/2027, 12:00:00 AM
  3. Auto-renews for 36 months
    4/30/2027, 12:00:00 AM

A card draws while the model is still writing it.

"rows": [
  { "vendor": "Halcyon", "region": "EU", "cost": 48200 },
  { "vendor": "Brightline", "region": "EU", "cost": 52900 },
  { "vendor": "Tessellate", "region": "US + EU", "cost": 39800 },
  { "vendor": "Quarry and Vale", "region": "EU", "cost": 61500 },
  { "vendor": "Lumen Works", "region": "US", "cost": 33100 },
  { "vendor": "Ostrander", "region": "EU", "cost": 45750 },
  { "vendor": "Pinecrest", "region": "UK", "cost": 57300 },
  { "vendor": "Meridian Nine", "region": "US + EU", "cost": 29900 },
]
Vendor shortlist
HalcyonEU$48,200
BrightlineEU$52,900
TessellateUS + EU$39,800
Quarry and ValeEU$61,500
Lumen WorksUS$33,100
OstranderEU$45,750
PinecrestUK$57,300
Meridian NineUS + EU$29,900

Dashboards, charts, forms and documents, chosen by the agent.

Signup funnel · last 30 days
Visitors
48,210
+8.2%
Signups
3,904
+3.1%
Activated
1,288
−4.6%
Paid
402
+1.9%
Signups vs activations
0100200W1W3W5W7W9W11W13
SignupsActivations
Where people drop
Visited
48,210
—
Signed up
3,904
8.1%
Activatedbiggest drop
1,288
33%
Paid
402
31.2%

Your product’s own cards, with the same guarantees.

  • Validated before it renders.
  • Registered with its renderer.
  • A question waits for its answer.
cards.register({
  kind: "vendorQuote",
  summary: "One offer with its price and terms.",
  schema: vendorQuoteSchema,
  validate: checkVendorQuote,
});

<CardRendererProvider
  renderers={{ ...BUILTIN_RENDERERS, vendorQuote: VendorQuoteView }}
/>
Brightline · 3-year term
$52,900per year · SSO included · data in EU

Thinking, plans, tool calls and the composer, as parts.

Comparing SSO and data terms
  1. Gather the three quotes
  2. Compare SSO and data terms
  3. Draft the recommendation
getQuotes0.9s
checkSSO1.4s
fetchDPArunning

A production backend in ten lines. Your server, your keys.

The browsercreateProxyTransport({ url: "/api/agent" })
Your serverallowlistauthorizeforwardrecord
The providerOpenAI · Anthropic · compatible
// app/api/agent/route.ts
import { createProxyHandler } from "@supersolutions/super-chat-server";

export const POST = createProxyHandler({
  providers: {
    openai: {
      baseUrl: "https://api.openai.com/v1",
      apiKey: () => process.env.OPENAI_API_KEY!,
      allowPaths: ["/responses", "/responses/*", "/chat/completions"],
    },
  },
  authorize: (req) => checkSession(req),
  onRequest: (envelope, meta) => audit(envelope, meta),
});
Only the paths you name
Your sessions and quotas
A usage record per step
Any compatible endpoint
Jobs that outlive the tab
Tools from MCP servers

See why the agent knew that.

Context, turn 48,000 tok budget
systemincluded412
skill:procurementincluded214
memoryincluded96
retrieval:contractstruncated380 / 900
historycompacted1,120
app-state:boarddropped0
5,778 tok left for the reply

Two flavors we maintain. Any other you build.

Instrument
Signup funnel · last 30 days
Visitors
48,210
+8.2%
Signups
3,904
+3.1%
Activated
1,288
−4.6%
Paid
402
+1.9%
Send the purchase request?
Vendor
Halcyon
Amount
$48,200 / year
Tactile
Signup funnel · last 30 days
Visitors
48,210
+8.2%
Signups
3,904
+3.1%
Activated
1,288
−4.6%
Paid
402
+1.9%
Send the purchase request?
Vendor
Halcyon
Amount
$48,200 / year
:root {
  --sc-accent: #0f766e;
  --sc-radius: 6px;
  --sc-sans: "IBM Plex Sans", system-ui, sans-serif;
}

Questions before you install.

Getting started →
Is SuperChat a chat app?

No. It is the library you build an agent’s answers with, inside your own product.

Does the model write UI code?

No. It picks a card kind and fills in a spec. The spec is validated before anything renders, and your renderers decide how it looks.

Do I need a hosted gateway?

No. The backend is one route handler on your own server. It holds your key, runs your auth and records usage.

Which providers does it support?

OpenAI (Responses and Chat Completions), Anthropic, and OpenAI-compatible endpoints.

Is it free?

Yes. Apache-2.0.