An intent-driven brokerage interface concept. This application uses Large Language Models (LLMs) to shift the user's role from navigating screens and filling out forms to making financial decisions.
Users describe their objectives in plain language. The AI routes their intent to dynamically generate interactive interfaces (Trade Tickets, Goal Calculators, Portfolio Analyzers) pre-populated with context.
-
Strict Intent Routing The AI acts strictly as a router and context-population layer. It maps natural language to a required schema and triggers a UI tool. The AI cannot execute financial actions. The UI generates review components to maintain a human-in-the-loop guardrail.
-
Streaming Generative UI Utilizes the Vercel AI SDK tool-calling paradigm. The chat panel listens to the stream, and when a tool call is finalized, the renderer mounts the interactive React component onto the spatial canvas.
-
Client-Side Component Reactivity Rendered components are fully interactive. Tools like the savings goal planner allow the user to adjust inputs, updating charts and metrics client-side without demanding additional LLM round-trips.
- Next.js (App Router)
- Tailwind CSS
- Framer Motion
- Zod
- TypeScript
- Node.js
- LLM Provider API Key (Google Generative AI or OpenAI)
npm installCreate a .env.local file in the root directory:
GOOGLE_GENERATIVE_AI_API_KEY="your_api_key_here"
# OR
OPENAI_API_KEY="your_api_key_here"Review /src/lib/ai-config.ts to ensure the correct provider model is exported based on your key.
npm run dev- "What is in my portfolio?"
- "How do I reach a savings goal of $10,000?"
- "How is the market today?"
- "I want to buy $500 of NVDA but don't want to lose more than $50"
- "Put my entire life savings into TSLA"