An onversational agentic platform designed to make financial literacy accessible, actionable, and engaging for youngstars. It explains complex financial concepts in clear, jargon-free language, provides real-life examples with an Indian investment context, and delivers answers in structured formats.

Active Features

• Streaming Responses(SSE): Engage in conversations with LLMs with Chat renders token-by-token from /chat-stream for a interactive user experience.

• Agent Tool Telemetry: Inline stages show what the agent is doing—searching → reading → writing—with tool outputs surfaced where helpful.

• Generative UI-First Rendering: Renders JSON UI specs (charts, tables, KPIs) generated by the agent via C1 UI generation—powered in the app by @thesysai/genui-sdk.

• Web Search Integration: The Agent can perform web searches (web crawl-based) on demand to provide up-to-date and relevant information, showing the user with the concurent information.

⚠️ Features like Chat History, Search Conversation won't work as authentication strategy hasn't been designd/configured yet from the backend.

A Quick Overview of the Agent Architecture

Head over to Backend API Server Repo to know more: Click here

Run your local development enviornment

Since the app is deployed on Vercel, you don’t need 🐳 Docker for local setup now.

Prerequisites

• Node.js (v20+)
• pnpm (or your preferred package manager)

Installation

1. Clone the repository:

   git clone https://github.com/SayantanmPaul/Q-Chat-Client.git
   cd Q-Chat-Client

2. Install dependencies:

   pnpm install

3. Set up environment variables:

   Create a .env.local file in the project root:

   # .env.local
   
   NEXT_PUBLIC_BASE_URL="http://localhost:8000"
   NEXT_PUBLIC_PRODUCTION_URL="https://your-production-api-url.com"

4. Start the dev server:

   pnpm dev

Visit http://localhost:3000 in your browser.

Project Structure

q-chat-client/
├── api/                  # Axios instance and API client functions
├── assets/               # Local fonts
├── public/               # Static assets
├── src/
│   ├── app/              # Main application pages, layouts, and routes
│   ├── components/       # Reusable React components
│   │   ├── branding/
│   │   ├── chat-window/  # Components for the chat interface
│   │   ├── magicui/      # Core UI elements top of shadcn
│   │   ├── motion-primitives/ # Animation-related components
│   │   ├── ui/           # Core UI elements (buttons, cards, etc.)
│   │   └── view/         # Main view wrappers
│   ├── hooks/            # Custom hooks
│   ├── lib/              # utils, queryprovider, and queries
│   ├── store/            # Zustand store (global state)
│   └── types/            # type definitions
└──...

Support the Project

If you find this project helpful, consider hit a star on GitHub! ✨