Skip to content

Add <chat> component type for multi-turn LLM conversations #58

@geoffjay

Description

@geoffjay

Summary

Create a new built-in layout component (<chat>) that renders a persistent multi-turn chat interface backed by an HTTP streaming connection to an LLM API. The component manages conversation history, handles SSE streaming responses, and exposes handler hooks for message interception.

Context

Usage:

<chat id="assistant"
      api-url="${env.ANTHROPIC_API_URL}"
      api-key="${env.ANTHROPIC_API_KEY}"
      model="claude-sonnet-4-6"
      system-prompt="You are a Nemo configuration assistant..."
      placeholder="Describe the UI you want to build..." />

This is a general-purpose component — any Nemo application can embed a chat panel, not just the authoring assistant. It needs to:

  • Render a scrollable message list with user/assistant role indicators
  • Provide a text input area at the bottom
  • Stream LLM responses in real-time via SSE
  • Maintain conversation history in component state
  • Support configurable system prompts and model selection

The HTTP streaming backend reuses nemo-integration::HttpClient with SSE support (built in the generate command work), or can use its own streaming implementation.

Acceptance Criteria

  • <chat> registered as a built-in component in nemo-registry/src/builtins.rs under ComponentCategory::Display or a new category
  • Schema properties:
    • api-url (string, required) — LLM endpoint URL
    • api-key (string, required) — API key
    • model (string, default: provider default) — model name
    • system-prompt (string) — system prompt text
    • placeholder (string, default: "Type a message...") — input placeholder
    • max-tokens (integer) — response token limit
  • Component renders messages with role labels (user/assistant) and timestamp
  • Text input at bottom with send button and Enter-to-send
  • Messages stored in component state (Entity-based, like Table/Tree)
  • SSE streaming: response text appears incrementally as tokens arrive
  • on-message handler hook: RHAI scripts can inspect/transform messages before sending
  • on-response handler hook: scripts can intercept the final assistant response
  • Keyboard shortcut: Escape to clear/focus, Ctrl+Enter for newline
  • Loading indicator during API calls
  • Error display for failed requests (with retry button)

Relevant Files

  • crates/nemo-registry/src/builtins.rs — component registration
  • crates/nemo/src/components/ — component implementations
  • crates/nemo/src/components/state.rs — component state management
  • crates/nemo-integration/src/http.rs — HTTP client
  • crates/nemo-data/src/sources/http.rs — HTTP data source (SSE patterns)

Stack Base

  • Stack on: main
  • Blocked by: none (can be developed independently — chat component needs HTTP streaming but doesn't depend on the generate command)

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions