Skip to content
Anton GoncharovAI systems developer
RUEN

Next.js website · customer account, AI assistant, Telegram

Customer account portal

A print shop customer calls the manager to find out where the print run is, searches their email for the invoice and the third version of the layout, and the accountant waits for the original closing documents. Here it’s all in one account: you see what stage each order is at, a layout is approved in two clicks and comments are pinned as dots right on the layout, invoices are paid via SBP, and documents are signed electronically. The AI assistant answers from the account data — where an order is, what to pay, how much a print run costs — and when it can’t cope, it hands the conversation to a manager.

Scenario: Ottisk print shop from Novosibirsk and its client, the Severnaya Kofeynya coffee chain — fictional: eight orders at different stages, three open invoices (one overdue), three documents awaiting signature.

Demo screenshot: Customer account portal

Open the demo

Open the website

The SMS code in the demo is 4237, or press “Sign in with demo access”.

Leads from the demo website are visible only to you, in the “Owner dashboard”: the server validates the form and stores nothing.

What the demo shows

  • Sign-in with a phone number and an SMS code; without it the account is closed

  • Overview: what needs the customer’s action right now — layouts, invoices, signatures — orders in progress with progress bars and an activity feed

  • Orders with filters and search; the order card has seven production stages, print run parameters, courier tracking, the invoice, documents and history

  • Layout approval: comments are pinned as dots on the layout itself; approval is possible only after confirming the check — and the order goes straight to print

  • Invoices paid via SBP (QR code), card or bank transfer; payment moves the order on — the designer prepares the layout

  • Documents: contract, closing documents, reconciliation statements with preview and an electronic signature under a machine-readable power of attorney; sign them all at once

  • A new order with a calculator: quantity, paper, finishing, urgency, price per item and ready date; “Repeat” fills in the parameters of a past order

  • A chat with an AI assistant that answers from the account data and shows which functions it called; if it fails to understand twice, it offers a manager

  • Handover to a manager with the conversation history: the request goes to the CRM, and the manager replies in the same chat

  • Telegram notifications: connection via a bot, choice of events and message previews

How to try it

  1. Sign in

    Enter any Russian number; the SMS code in the demo is 4237. Or press “Sign in with demo access”.

  2. Mark a change on a layout

    Open “Approve layout — No. 2481”, click the misspelled pumpkin latte on the menu and write what to fix. Send the changes.

  3. Pay an invoice

    From the bell or in “Invoices”, pay invoice No. 1183 via SBP — the sticker order moves on to the layout, which you can approve and send to print.

  4. Ask the assistant

    In the chat, press “Where are my cup holders?” or “How much are 500 business cards?”, then “How it works” — you’ll see the functions it called. Press “Call a manager”.

  5. Open the owner dashboard

    The payment, the layout decision, the new order and the question to the manager are in the “Leads” tab — the way the print shop’s CRM would see them.

No paid neural networks

There are no paid neural network requests: in place of a language model there’s local question parsing that calls the same functions (order, invoices, documents, price calculation, handover to a manager) and answers from the account data. SMS, payment, signing and Telegram are simulated. Your actions are stored only in your browser, and leads are visible only to you in the “Owner dashboard”. The print shop, client, prices and documents are fictional.

The demo runs without OpenAI, YandexGPT or GigaChat API keys. Wherever a production system calls a model, there’s a local stub with the same interface — so the demo is free, always available and never makes things up.

What a production project adds

  • Data from the print shop’s accounting system (1C, a CRM or its own MIS) via API; stage statuses from production in real time
  • SMS sign-in through a gateway (SMS.ru, SMSC) with attempt limits; roles for the client’s staff — orders, invoices, view only
  • Payment via acquiring with SBP (YooKassa, T-Bank); the invoice and receipt are generated automatically
  • Document signing through an e-document operator (Diadoc, SBIS) with a machine-readable power of attorney
  • The AI assistant is a language model with function calling (YandexGPT or GigaChat) on this client’s data only; handover to a manager in the CRM
  • A Telegram bot linked via a one-time link, with “Approve layout” and “Pay” buttons right in the message

Stack

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Server Actions

Developer’s comment

Anton Goncharov

AI systems developer · Python

For business

  • Customers can see where their print run is and don’t call the manager five times per order — the manager has time for sales.
  • Proofs are approved the same day, and comments pinned to the proof don’t get lost in correspondence — printing starts sooner.
  • Invoices are paid via SBP from the account, documents are signed with an electronic signature — money arrives faster, and originals don’t need to be delivered.

For developers

  • Account state is seed data plus customer actions, reduced by the pure functions orders, invoices, docs and todos: payment moves an order to the proof stage, approval moves it to printing. Covered by tests.
  • The AI assistant is built like a model with function calling: get_order, list_invoices, list_documents, calc_price, escalate. In the demo they’re chosen by question parsing, and the answer is built from the same data the customer sees.
  • Every action is a Server Action with server-side field validation: requests about payment, proof decisions, new orders and questions to the manager land in the owner’s panel, as in a CRM.

Tips

  • Tip 01

    Show customers on the first screen what’s waiting for their action: an unapproved proof and an unpaid invoice slow production more than any breakdown.

  • Tip 02

    Give the AI assistant only functions with this customer’s data, and always a “call a human” button: that way it won’t make up a status or anger the customer.

Want the same for your business?

Tell me about your task — I’ll tell you what from the demo fits, how long it will take and what I’ll need from you.

Message me on TelegramSend a request

Other demos in this section

All demos

  • Next.js website · service landing page

    live

    Dental clinic landing page

    A one-page clinic website that brings in patients: a quiz suggests a treatment, a calculator prices the plan with installments, online booking shows doctors’ free time, and an AI consultant answers from the price list. The headline is A/B-tested; leads and goals are visible in the owner dashboard.

    • Next.js
    • React
    • TypeScript

  • Next.js website · B2B, multi-page

    live

    Manufacturing company website

    A multi-page website for a steel structures plant that sells on its own: a calculator prices a building with a live drawing, a builder assembles a technical specification, case studies filter by industry, you can apply for a job with a CV, and site search understands queries in plain words.

    • Next.js
    • React
    • TypeScript

  • Next.js website · catalog, map, comparison

    live

    Real estate catalog with smart search

    A real estate agency’s apartment catalog: type “two-bedroom near the metro under 12 million” and the search sets the filters itself, shows apartments on a city map, compares up to four and sends new ones to Telegram.

    • Next.js
    • React
    • TypeScript

  • Next.js website · AI translation, per-language SEO

    live

    An export website in four languages

    A website for an Altai honey exporter in Russian, English, Chinese and Arabic: translated page URLs, per-language SEO, a wholesale price calculator with delivery and a translation studio that checks the neural network’s draft against a glossary.

    • Next.js
    • React
    • TypeScript

  • Next.js website · Python in the browser, AI mentor

    live

    Online school with a student account

    An online analytics school: a landing page with a Python task checked right in the browser, a level test with a personal curriculum, installments with a tax deduction estimate, a student account with homework and AI review, an AI mentor that answers from course materials and a certificate verified by QR code.

    • Next.js
    • React
    • TypeScript

  • Next.js website · booking by plate number, photo report, approval

    live

    Car service with booking and repair status

    A car service website: booking by plate number or VIN into free bay slots, a “what’s knocking?” diagnosis with likely causes and a price range, repair status with a photo report, approval of extra work and payment by link, and a garage with service history and a forecast of the next maintenance.

    • Next.js
    • React
    • TypeScript

  • Next.js website · case analysis, claim letters, calculators

    live

    Law firm with AI case analysis

    A law firm website: describe your situation in your own words right in the hero, get an AI analysis with an assessment of prospects, a claim letter in Word, court fee, penalty and limitation period calculators, a document checklist, case progress in a client account, a price builder and booking with a lawyer.

    • Next.js
    • React
    • TypeScript

  • Next.js SaaS website · sandbox, dashboard, API

    live

    SaaS: AI replies to WB and Ozon reviews

    The website and dashboard of a SaaS service that replies to Wildberries and Ozon reviews: a sandbox with review analysis and checks, autopilot by rating, a queue with approval, topic analytics, plans with a payback calculator, store connection by key, an invoice by tax ID and API documentation with a live console.

    • Next.js
    • React
    • TypeScript

  • Next.js restaurant website · menu, table booking, delivery

    live

    Restaurant with delivery

    A restaurant website with delivery: a menu with allergen and diet filters, AI dinner selection from a plain phrase, table booking on a floor plan showing free tables for the chosen time, a cart with delivery zones, a minimum order and promo codes, and order tracking with the courier on a map.

    • Next.js
    • React
    • TypeScript

  • Next.js fitness studio website · booking, memberships, account

    live

    Fitness studio

    A small-group fitness studio website: a weekly schedule with spots and two-click booking, a waiting list that moves you into the group automatically, memberships you can freeze from your account, an AI 4-week training plan from five questions and a personal account with attendance stats.

    • Next.js
    • React
    • TypeScript

  • Next.js IT conference website · program, tickets, networking

    live

    Conference website

    A two-day conference website: a program by room and track with a personal schedule, AI selection of talks without overlaps by role and free text, tickets in price waves with promo codes and a team discount, a QR code for every attendee checked at the entrance, and networking with matching and meetings during breaks.

    • Next.js
    • React
    • TypeScript

  • Next.js corporate logistics website · calculator, tracking, AI request

    live

    Transport company website

    A transport company’s corporate website: a calculator that compares groupage and a dedicated truck at once, shipment tracking with the truck on a map, AI parsing of a request from an email or waybill with missing fields highlighted, a map of warehouses and terminals with a storage calculation, a carrier application with an eligibility check, and company details with checksum validation.

    • Next.js
    • React
    • TypeScript