AI10xTech
Log inGet started
AI10xTech
Get started
Login
HOME/HOW ABOUT US?

THE ELEVATOR PITCH

An AI Design Thinking Assistant
that turns fuzzy problems into testable concepts

This project is a coaching surface for the five phases of design thinking — Empathize, Define, Ideate, Prototype, Test — built on Next.js 15, Azure OpenAI, and a wallet-aware SQLite conversation store. Everything below is how it is actually wired.

WHAT YOU SEE

The user journey in one screen

  1. Land on /chatflow. A Design Thinking Assistant greets you and asks about your user, problem, or idea.
  2. Chat freely. The assistant replies in Markdown with tables, code blocks, and Mermaid diagrams — including journey maps and affinity diagrams rendered inline.
  3. Attach PDFs, folders, or individual files from the + menu. File contents are extracted client-side (pdfjs for PDFs) and sent as context.
  4. After your fifth message the app silently hits the same endpoint as a competitive-landscape researcher, streams the JSON back, and renders a multi-page PDF in-browser via @react-pdf/renderer. The PDF auto- downloads.
  5. Connect a wallet and the whole conversation persists server-side, keyed on your web3 address. Disconnect and reconnect on another device, the history returns.

UNDER THE HOOD

Architecture

Frontend

Next.js 15 App Router, React 19, TypeScript. Bootstrap 5 + SCSS for the marketing surface, CSS Modules for the chat surface. Mermaid and pdfjs are dynamically imported to keep the initial bundle lean.

Server

All model calls are server actions — no API route boilerplate. A single fetch against the Azure OpenAI /openai/v1/chat/completions endpoint using the gpt-oss-120b deployment, authenticated with api-key.

Data

A single SQLite file at ./data/chat.db via better-sqlite3. One table keyed on the connected wallet address. Mount a volume on /app/data in production for persistence.

THE CODEBASE

Where things live

Frontend (chat surface)
  • src/app/chatflow/page.tsx

    The chat route. Fills the viewport and mounts the Chatflow component.

  • src/components/Chatflow.tsx

    The main chat UI. Manages messages, attachments, wallet-aware hydration, auto-scroll, and the 5-message PDF trigger.

  • src/components/MarkdownMessage.tsx

    Renders assistant replies as GitHub-flavored Markdown with syntax highlighting and Mermaid diagram blocks.

  • src/components/MermaidDiagram.tsx

    Lazy-loads mermaid and renders diagrams inside message bubbles.

  • src/components/CompetitiveLandscapePDF.tsx

    Defines the @react-pdf/renderer Document and builds the competitive landscape PDF in the browser.

Server actions & data
  • src/actions/chatAction.ts

    Server action that calls the Azure OpenAI endpoint with the full conversation and a design thinking methodology system prompt. Persists both sides of the exchange when a wallet address is provided.

  • src/actions/reportAction.ts

    Server action that prompts the same endpoint as a competitive-landscape researcher and returns a typed JSON report.

  • src/actions/conversationAction.ts

    Server actions to load and clear a wallet address's conversation from SQLite.

  • src/lib/chatDb.ts

    Lazy-initialized better-sqlite3 data layer. One table, chat_messages, keyed on (address, created_at).

Wallet integration
  • src/wagmi.ts

    Server-safe wagmi config (chains + cookie storage) — used by layout.tsx to compute cookieToInitialState during SSR.

  • src/wagmi-client.ts

    Full wagmi config with RainbowKit connectors and the Farcaster miniapp connector. Client-only.

  • src/components/Providers.tsx

    WagmiProvider + QueryClientProvider + RainbowKitProvider, plus Farcaster miniapp SDK ready() call.

WHY THESE PIECES

Design decisions, briefly

Server actions over API routes. Co-locates the call site with the handler, keeps the Azure API key out of the browser, and makes the fetch a normal async function call.

Client-side PDF rendering. @react-pdf/renderer is pure JavaScript, so the same library ships into the browser bundle and builds the PDF there. The server action only returns structured JSON — the serverless function stays small.

SQLite, not Postgres. Conversation history is append-only and keyed on a single column. A file-backed embedded database gives us durability without a separate service; swap to libSQL or Turso later with minimal changes if you outgrow a single node.

Wallet as identity. Instead of building an auth system, we let wagmi + RainbowKit supply an address. No wallet connected means no persistence, and that is fine — the chat still works client-side.

Full conversation to the model. The gpt-oss-120b deployment has a 128k window; we send the entire history (no slicing) so the assistant keeps continuity across phases.

RUN IT

Local setup

  1. cd qore-nextjs && npm install
  2. Set AZURE_OPENAI_API_KEY (and optionally AZURE_OPENAI_ENDPOINT / AZURE_OPENAI_DEPLOYMENT / CHAT_DB_PATH).
  3. npm run dev then open /chatflow.

For production, the included Dockerfile builds a standalone Node server; mount a volume on /app/data so the SQLite file survives restarts.

That's the tour.

The quickest way to understand the rest of it is to try the chat and open the network tab.

Open the Design Thinking Assistant
How about us? | AI10xTech