oracle-ai-developer-hub

Generative UI Data Chat

Copyright (c) 2026 Oracle and/or its affiliates.

A Next.js and OpenUI reference app showing how Oracle AI Database 26ai can back a data chatbot experience that returns typed UI components instead of plain text. The model chooses a query strategy and rendering shape, the server validates that plan, Oracle executes SQL/vector/hybrid retrieval, and React renders the result with @openuidev/react-ui as charts, tables, KPI cards, source cards, or mixed insight views.

Demo

https://github.com/user-attachments/assets/34cb03eb-5648-4fa0-9cba-8de8faebaa81

Architecture

Browser (Next.js App Router)
  |-- Chat transcript and composer
  |-- OpenUI / @openuidev/react-ui generative UI renderer
  |-- Oracle query trace
        |
Next.js Node runtime API route (/api/chat)
  |-- OpenAI-compatible LLM call (OCI GenAI proxy or hosted endpoint)
  |-- Zod validation for the plan and response envelope
  |-- SQL / vector / hybrid query executors
        |
Oracle AI Database 26ai
  |-- Revenue, account, and active-user tables
  |-- Contract chunks with VECTOR embeddings
  |-- Oracle Text index for hybrid evidence search

What This Demonstrates

• Structured questions map to SQL-backed UI, including line charts, area charts, bar charts, horizontal rankings, donut charts, tables, and KPI cards.
• Contract/evidence questions map to vector-backed source cards with citations.
• Mixed questions use hybrid retrieval, combining revenue trend SQL with Oracle Text and vector evidence.
• OpenUI (@openuidev/react-ui) supplies the app shell primitives, chart, table, cards, tags, callouts, follow-up buttons, and trace accordion styling.
• The API response is a typed DataChatResponse JSON envelope, not markdown.

Prerequisites

• Node.js 20+
• Docker Desktop
• Access to an OpenAI-compatible chat-completions endpoint. For OCI Generative AI, you can use a local OpenAI-compatible proxy and set LLM_BASE_URL to that proxy.

Quick Start

All commands assume you are in apps/generative-ui-data-chat.

npm install
cp .env.example .env.local
bash scripts/setup_db.sh
npm run db:seed
npm run dev

Open http://localhost:3000.

Environment Variables

Variable	Required	Description
LLM_BASE_URL	Yes	OpenAI-compatible base URL, for example http://localhost:9999/v1 for an OCI GenAI proxy.
LLM_API_KEY	Yes	API key or proxy token.
LLM_MODEL	No	Model id. Defaults to xai.grok-4.3; override with any OCI-hosted model id exposed by your proxy, for example meta.llama-3.3-70b-instruct.
ORACLE_USER	Yes	App user. Local default: DATA_CHAT.
ORACLE_PASSWORD	Yes	App password. Local default: DataChatPwd_2026.
ORACLE_CONNECTION_STRING	Yes	Local default: 127.0.0.1:1522/FREEPDB1.
ORACLE_ADMIN_PWD	Local setup only	Admin password used by the Docker setup script.

Demo Prompts

• Revenue trend over the last 12 months
• Top 5 accounts by region in Q1
• Active users this month
• Which contracts mention auto-renewal?
• What's driving the dip in March?
• Can you analyse the data into a dashboard?

API Contract

POST /api/chat
Content-Type: application/json

{ "message": "Revenue trend over the last 12 months" }

Response:

{
  "answer": {
    "title": "Revenue trend",
    "summary": "Revenue ended at ...",
    "components": [
      {
        "type": "lineChart",
        "title": "Revenue over the last 12 months",
        "xKey": "month",
        "yKey": "revenue",
        "data": []
      }
    ]
  },
  "queryTrace": [
    {
      "strategy": "sql",
      "label": "Revenue trend",
      "statement": "SELECT ...",
      "elapsedMs": 42,
      "rowCount": 13
    }
  ]
}

Supported component types are lineChart, areaChart, barChart, horizontalBarChart, pieChart, comparisonTable, kpiCard, sourceCards, and mixedInsight.

Database Notes

The seed script creates:

• revenue_metrics
• accounts
• active_user_metrics
• contracts
• contract_chunks
• Oracle Text index on contract_chunks.chunk_text
• Optional vector index on contract_chunks.embedding

The demo uses deterministic 8-dimensional vectors so it can run without a separate embedding service. In a production implementation, replace those seed vectors with embeddings generated by OCI Generative AI, ONNX in-database embeddings, or another approved embedding model.

Development

npm run test
npm run build

V1 Limitations

• No authentication, RBAC, tenant isolation, or query policy enforcement.
• The model chooses from five supported demo intents.
• The server owns executable SQL and vector queries for reliability; the model returns a validated plan rather than arbitrary SQL.
• Full OCI deployment automation is intentionally out of scope for the first PR.

License

Licensed under the Universal Permissive License (UPL), Version 1.0. See LICENSE.