Skip to main content

Generative UI Components

Kognar can render interactive components directly inside the chat window — not just plain text. When you ask for a chart, table, form, or live code preview, the AI generates a structured, interactive component rather than a static description.

Charts​

Ask Kognar to visualize data and it renders an interactive chart.

Supported types: Line, Bar, Pie

Features:

  • Switch between chart types with a toggle
  • Hover tooltips with data labels
  • Legend with series names
  • Copy data button to export the underlying JSON

Example prompts:

  • "Show me a bar chart of monthly sales: Jan 1200, Feb 900, Mar 1500"
  • "Create a pie chart of this expense breakdown: [data]"

Tables​

Ask for tabular data and Kognar renders an interactive, sortable table.

Features:

  • Sort by any column (click the column header)
  • Filter per column with a dropdown
  • Global search — filter all rows by keyword
  • Pagination with configurable rows per page
  • Export as JSON or CSV

Example prompts:

  • "List the top 10 countries by population in a sortable table"
  • "Create a comparison table for these three pricing plans: [details]"

Forms​

Kognar can render interactive input forms and collect structured data from you.

Supported field types: Text, Email, Number, Textarea, Select (dropdown), Checkbox, Date

Features:

  • Field validation (required, min/max length, pattern, email format)
  • Inline error messages per field
  • Submit and Cancel buttons
  • Submitted data is returned to the conversation as a message

Example prompts:

  • "Create a form to collect: name, email, budget range, and project description"
  • "Build a survey form with 5 questions about developer tools"

Step Lists​

For processes, workflows, or instructions, Kognar renders a step-by-step card.

Features:

  • Numbered steps with icons
  • Status indicators: pending, in-progress, completed

Example prompts:

  • "Give me a step-by-step guide to deploy a Node.js app to AWS"

Callouts​

Highlighted information blocks for notices, warnings, or tips.

Types: Info (blue), Warning (yellow), Success (green), Error (red)

Example use: The AI automatically uses callouts to draw attention to important caveats, warnings, or key takeaways in a response.

Card Grids​

A grid of structured cards for presenting options, results, or items.

Features:

  • Up to 3 columns on wider screens
  • Icon, title, description, metadata, and optional action link per card
  • Footer showing total card count

Example prompts:

  • "Show me 6 alternatives to Notion as cards with a brief description of each"

Key-Value Pairs​

A clean, structured display for settings, configuration, or data summaries.

Example use: The AI uses key-value components to summarize API responses, environment configs, or structured data clearly.

Images​

Images generated or processed by the AI are displayed inline.

Right-click options:

  • Copy image — Copy to clipboard
  • Save to Downloads — Save directly to your Downloads folder
  • Save As... — Choose a custom save location

Live Code Preview​

When the AI generates web code (HTML, React, Vue, Svelte, Angular, or JavaScript), it renders a live interactive preview with a side-by-side editor.

Tabs:

  • Preview — The rendered output
  • Code — Editable source code with syntax highlighting
  • Console — JavaScript console output from the preview

Device presets:

  • Desktop
  • Tablet
  • Mobile

Other features:

  • Update/refresh the preview after editing code
  • Open in a new window for a full-screen view

Example prompts:

  • "Build a responsive landing page for a SaaS product using Tailwind CSS"
  • "Create an interactive React counter with animations"
  • "Write a JavaScript to-do list app and show me a live preview"
note

Languages like Python, Java, and Ruby show a text response instead of a live preview, since they require a backend runtime to execute.