gengineEA
Launch App
Beginner

Learn how to use the gengine Web Chat Panel — topic tabs, asset mentions, image paste, and provider settings.

Web Chat Panel

The Web Chat Panel is gengine's browser-based chat interface. It runs inside the Unreal Editor's Command Center and provides a full-featured AI chat experience with topic organization, asset autocomplete, image paste, and persistent conversation memory.

Overview

The Web Chat Panel is a React application that runs in an embedded browser view inside the Unreal Editor. It connects to the gengine MCP bridge over localhost and routes your messages to whichever AI provider you have configured.

Because it runs in a browser context, the panel supports the full range of modern web UI features: syntax-highlighted code blocks, Markdown rendering, image display, and real-time streaming responses. You can also open the panel in a standalone browser window by navigating to http://localhost:3000 while the editor is running.

Tip: The standalone browser version is useful when you want to use the panel on a second monitor while keeping the editor on your primary display. Both the embedded and standalone views share the same conversation state.

Topic tabs

Topics are named conversation threads. Each topic has its own message history, persistent memory, and context. They appear as tabs across the top of the chat panel.

Creating a topic

Click the + button at the right end of the tab bar. Type a name for the topic — something descriptive like "Lighting Pass Q2" or "Blueprint Refactor Enemies" — and press Enter. The new topic opens immediately.

Switching topics

Click any topic tab to switch to it. The conversation history loads instantly. The AI provider and model setting are global, but the conversation context is per-topic.

Renaming and closing topics

Right-click a topic tab to rename or close it. Closed topics are archived — their history is preserved and searchable from the topic search menu (magnifying glass icon).

Organizing with topics

A good topic strategy keeps your sessions productive. Recommended patterns:

  • One topic per major feature or system ("Combat Abilities", "World Gen")
  • One topic per work session if you prefer chronological organization
  • One topic per level ("L01_Dungeon", "L02_Village") for level-specific work

Persistent memory per topic

Each topic can store persistent memory — facts about your project that the AI should always know within that topic. Memory persists across editor restarts and new sessions.

To add a memory, click the brain icon in the toolbar or type /remember in the chat input followed by the fact:

/remember The main player character class is BP_Player_Controller.
/remember All rock static meshes use the M_Rock_Base master material.
/remember Lighting budget: max 8 dynamic shadows per frame.

Memories are injected into the system prompt for every message in that topic. The AI reads them before responding, so it always has the right project context without you repeating yourself.

To view or delete memories, click the brain icon and use the memory manager modal. You can edit any memory inline or delete ones that are no longer relevant.

Note: Memories count toward your token usage since they are included in every request. Keep memories concise — one or two sentences each. Delete stale memories when project details change.

@ asset mentions with autocomplete

Type @ anywhere in the message input to trigger the asset autocomplete dropdown. Start typing an asset name and the panel searches your project's asset registry in real time.

# Reference a Blueprint
Create a new variable in @BP_Enemy_Goblin called "AggroRange" of type float with default 800.

# Reference a material
Set the base color of @MI_Rock_Mossy to a darker green (hex #2D4A2D).

# Reference a static mesh
Spawn @SM_Tree_Pine at every actor tagged "TreeSpawnPoint" in the current level.

When you select an asset from the dropdown, gengine inserts its full content path (e.g., /Game/Characters/Enemies/BP_Enemy_Goblin) into the message. This eliminates path errors — the AI receives the exact reference the plugin needs to locate the asset.

Supported asset types

  • Blueprints (BP_)
  • Static Meshes (SM_)
  • Skeletal Meshes (SK_)
  • Materials and Material Instances (M_, MI_)
  • Textures (T_)
  • Data Tables (DT_)
  • Animation Blueprints (ABP_)
  • Sound assets (S_, SFX_)
  • Any other registered asset type

Image paste (Ctrl+V)

Paste any image into the chat input with Ctrl+V (Cmd+V on Mac). The panel accepts clipboard images, making it easy to share viewport screenshots, reference photos, or UI mockups with the AI.

Typical workflows

  • Lighting review: Capture a viewport screenshot, paste it, and ask "why does this area look washed out?"
  • Visual reference: Paste a concept art image and ask "arrange rocks and trees in the current level to match this composition"
  • Error screenshots: Paste a Blueprint compile error screenshot and ask "what is causing this and how do I fix it?"
  • UI mockups: Paste a wireframe and ask "create a UMG widget that matches this layout"

After pasting, a thumbnail preview appears in the input box below your text. You can remove it by clicking the X on the thumbnail before sending.

Warning: Image paste requires a multimodal AI provider. Claude 3.5 Sonnet and GPT-4o support images. If you are using Ollama or LM Studio, you need a vision-capable model such as llava or moondream. The panel will show a warning if your current model does not support images.

Provider settings

Click the gear icon in the top-right corner of the panel to open the Provider Settings modal. Settings are organized into two sections:

Provider and model

Select your AI provider from the dropdown. Available options depend on what you have configured in the gengine settings. Each provider shows a connection status indicator — green for connected, red for error.

Within a provider, you can select the specific model. For Anthropic this might be claude-sonnet-4-5 or claude-opus-4. For OpenAI it might be gpt-4o or o3. Local providers list available models from your running server.

Display options

  • Show Tool Details: Expands tool call information inline in chat (operation name, parameters, execution time, raw result)
  • Stream responses: Shows the AI reply word-by-word as it generates (enabled by default)
  • Dark / Light mode: Panel respects your OS theme by default, or you can override it here

Markdown rendering and syntax highlighting

The panel renders AI responses as Markdown with full formatting support. This means:

  • Code blocks with syntax highlighting for C++, Blueprint pseudocode, JSON, and shell
  • Bold, italic, and inline code formatting
  • Numbered and bulleted lists
  • Tables for structured data like asset lists or parameter comparisons
  • Blockquotes for referenced content

Code blocks include a Copy button so you can paste generated C++ or Blueprint logic directly into your IDE without retyping.

// The AI might respond with this kind of formatted output:

Here's the C++ to override TakeDamage in your character class:

float AMyCharacter::TakeDamage(
    float DamageAmount,
    FDamageEvent const& DamageEvent,
    AController* EventInstigator,
    AActor* DamageCauser)
{
    const float Actual = Super::TakeDamage(
        DamageAmount, DamageEvent, EventInstigator, DamageCauser);
    Health = FMath::Clamp(Health - Actual, 0.f, MaxHealth);
    return Actual;
}
← PreviousNext →