Vefapp
Stofusíða með MFA-varið stjórnborð og Claude-knúinn aðstoðarmann.
Yfirlit
Vefapp er vefur deildarinnar sjálfrar og um leið virk dæmisaga. Á yfirborðinu ritstjórnarútlit, breytilegt fyrirsagnaletur, ósamhverf grind, hreint CSS-korn, en undir niðri býr fullbúið viðskiptabakland: Edda, spjallmenni knúin með , -varið stjórnborð fyrir innhólfin og kostnaðargreiningu, og innan stjórnborðsins Project Starter sem breytir fyrirspurnum í Code-leiðbeiningar. Allt server-rendað á með og React-þýandanum að sinna memóíseringunni í bakgrunni, allt í CSS-first config og hýst á .
Hugbúnaðardeild
Áskorun
Stofusíður enda venjulega sem skjágluggi: stórt forsíðuorð, þrískipt grind, mýking við skrun. Það segir lítið um vinnuna sem fer fram á bakvið. Við vildum að okkar læsi eins og prentað ársfjórðungsrit á yfirborðinu og á sama tíma að hún kæmi með eigin bakland, innhólf fyrir fyrirspurnir, kostnaðartöflu fyrir spjallmennið, og verkfæri til að breyta þeim fyrirspurnum í verkáætlun, því deildin er vinnan en ekki bara markaðsefnið.
Nálgun
Almenni vefurinn er hljóðlátur á netinu: á , statískt smíðaðar dæmisögur með , á milli yfirlits og dæmisögu. Edda, spjallmenni Vefapps byggt á með skyndiminntum system prompt og 30 fyrirspurna á mínútu hraðatakmörkun í gegnum , situr innbyggð í síðunni. Stjórnborðið á /admin er gætt af tveggja-þátta -auðkenningu á öllum innskráningum, og -reglur í krefjast í á öllum lestri. Inni í stjórnborðinu birtist Project Starter: -arkítekt með og tool use sem tekur við innlímdum kynningartexta og skilar uppbyggðri verkáætlun ásamt fullbúinni Code leiðbeiningu.
Niðurstaða
Síða sem stendur á eigin leturfræðum frekar en hreyfimyndum, hröð á netinu vegna þss að mestur partur hennar er þegar hún kemur til lesandans, og með bakland hannað til að styðja við vinnuna frá fyrsta fyrirspurnar-pósti yfir í tilbúna verkáætlun.
Lykileiginleikar
- 01Edda, site-wide spjallmenni byggt á með skyndiminntum system prompt og lead-capture intro form
- 02Stjórnborð á /admin gætt af tveggja-þátta -auðkenningu á öllum innskráningum
- 03Project Starter: -arkítekt sem skilar uppbyggðri verkáætlun og Code prompt
- 04 á sérhverri -töflu krefst í á öllum lestri
- 0530 fyrirspurnir á mínutu á /api/chat með
- 06 streymi með session-cookie-eign á samtali
- 07 milli verkayfirlits og dæmisögu með shared-element morph
- 08Tvímála vefur (íslenska / enska) með og strangri lykla-paritet
- 09Innbyggð kostnaðartafla fyrir -notkun, brotin niður eftir líkani
- 10Hreint CSS filmukorn, engin myndaskrá send
Spjallmenni, Edda
- 01Site-wide spjallmenni knúin ( vanalega; og valanleg af stjórnanda)
- 02-skyndiminni á korpus stofunnar, 5 mínútna TTL, mikill sparnaður á endurteknu prefix-i
- 03Lead-capture intro form: nafn + póstur fyrir fyrstu skilaboð, 7 daga TTL í localStorage
- 04Streymis-output orð fyrir orð gegnum
- 05Session-token-cookie tengir conversationId við ákveðna setu, stöðvar UUID-afrit milli flipa
- 06Hraðatakmörkun í (30/mín á IP-hash); minnis-aðstoðar-fötur per -instance í þróunarumhverfi
- 07Markdown-mýking á svörum með smitumskoðun á tenglum
- 08Stillanlegt frá stjórnanda: líkan, effort, max-tokens, viðbótarleiðbeiningar í <admin_guidance> XML-grindarmótum
Stjórnborð og Project Starter
- 01Tveggja-þátta -auðkenning skylda á öllum innskráningum ( Auth )
- 02Sjálfvirk QR-skrá við fyrstu -innskráningu
- 03Inn-hólf fyrir samband og tilboðsbeiðnir með stöðu-vinnslu (nýtt → í vinnslu → svarað → skjalfest)
- 04Spjall-samtöl skoðuð aftur með nafni og pósti gesta, kostnaður birtur per turn
- 05Kostnaðartafla fyrir -notkun rúlluð yfir 30 daga, brotin niður eftir líkani og táknategund
- 06Project Starter: -arkítekt með og tool use sem skilar uppbyggðri BuildPlan
- 07Sniðmáta-safn (pattern_cards) með cache_control prefix svo endurkeyrslur kosta brot
- 08Sniðmáta-stillingar á spjallmenni, persóna, líkan, effort, max-tokens, viðbótarleiðbeiningar, sjálfsmiðjað
Öryggi
- 01Tveggja-þátta -auðkenning skylda á öllum stjórnendum
- 02 á sérhverri -töflu krefst í á öllum lestri
- 03Server-actions endurskoða setu og inni í aðgerðinni, leakaður Next-Action ID hefur ekkert að segja
- 04Sniðmáta-stillingar á max-tokens og lengd viðbótarleiðbeininga koma í veg fyrir leka í -reikninginn
- 05 sliding-window hraðatakmörkun á /api/chat, fail-closed í framleiðslu þegar er ekki stillt
- 06, X-Frame-Options DENY, Permissions-Policy lokað, í report-only áður en það er staðfest
- 07-samhæft samþykki vafrakaka (fjórir flokkar)
- 08 lykill einangraður í framleiðsluumhverfi
Hraði og verkfæri
- 01Server-rendað alls staðar á , mestur partur er við fyrstu birtingu
- 02Statískt smíðaðar dæmisögur með , ekkert gagnagrunnskall per heimsókn
- 03 í build (~8 sek í fullri framleiðslu-byggingu)
- 04 fjarlægir handvirku memóíseringuna, engin useMemo / memo() í kóðanum
- 05 prompt-skyndiminni á system prompt, ~30k tokens lesin á 0.1× rate frá öðru kalli
- 06 CSS-first config, engin tailwind.config.js
- 07ESLint 9 með flat config og plugin
- 08Hreint CSS filmukorn, engin myndaskrá send
Tæknistakkur
- Next.js 16.2
- Turbopack
- React 19.2
- React Compiler
- TypeScript
- Tailwind CSS v4
- next-intl
- View Transitions
- Supabase Postgres
- Supabase Auth (TOTP MFA)
- Anthropic Claude (Sonnet 4.6, Opus 4.7, Haiku 4.5)
- Anthropic SDK
- Upstash Redis
- Server-Sent Events
- react-markdown
- ESLint 9
- Vercel
