feat: configurable UI headline and subtitle via environment variables by optimus-fulcria · Pull Request #1434 · kagent-dev/kagent

optimus-fulcria · 2026-03-05T10:38:28Z

Summary

Adds two optional environment variables that customize UI text at runtime:

Environment Variable	Component	Default	Description
`NEXT_PUBLIC_HEADLINE`	ChatInterface	`"Start a conversation"`	Replaces the default chat headline shown before the first message
`NEXT_PUBLIC_SUBTITLE`	AgentList	(none)	Optional tagline displayed below the "Agents" heading on the landing page

Implementation

ChatInterface component accepts an optional headline prop, falling back to the default when unset
Chat page server component reads process.env.NEXT_PUBLIC_HEADLINE and passes it as a prop
AgentList component accepts an optional subtitle prop, rendered only when provided
Landing page and agents page server components read process.env.NEXT_PUBLIC_SUBTITLE and pass it as a prop
Pages use export const dynamic = "force-dynamic" to ensure env vars are read at runtime, not baked in at build time

Behavior when env vars are not set: Everything works exactly as today — zero impact on default deployments.

Test plan

Verify default behavior: without env vars set, UI shows "Start a conversation" and no subtitle
Set NEXT_PUBLIC_HEADLINE="Ask your DevOps assistant" and verify chat page shows custom headline
Set NEXT_PUBLIC_SUBTITLE="Internal AI Agent Platform" and verify landing page shows subtitle under "Agents"
Verify build succeeds with npx next build (confirmed locally)
Verify TypeScript type checking passes with npx tsc --noEmit (confirmed locally)

🤖 Generated with Claude Code

Copilot

Pull request overview

Adds runtime-configurable UI copy for the chat empty-state headline and an optional agents page subtitle via environment variables, enabling deployments to customize these strings without forking the UI.

Changes:

Add optional headline prop to ChatInterface and wire it to the empty-state headline text.
Add optional subtitle prop to AgentList and render it under the “Agents” heading when provided.
Read NEXT_PUBLIC_HEADLINE / NEXT_PUBLIC_SUBTITLE from process.env in relevant app routes (and force dynamic rendering on the agents/landing pages).

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
ui/src/components/chat/ChatInterface.tsx	Accepts `headline` prop and uses it for the empty-state headline fallback.
ui/src/components/AgentList.tsx	Accepts `subtitle` prop and conditionally renders it under “Agents”.
ui/src/app/page.tsx	Reads `NEXT_PUBLIC_SUBTITLE` at runtime (via `force-dynamic`) and passes to `AgentList`.
ui/src/app/agents/page.tsx	Reads `NEXT_PUBLIC_SUBTITLE` at runtime (via `force-dynamic`) and passes to `AgentList`.
ui/src/app/agents/[namespace]/[name]/chat/page.tsx	Reads `NEXT_PUBLIC_HEADLINE` and passes to `ChatInterface` (currently without forcing dynamic).
ui/src/app/agents/[namespace]/[name]/chat/[chatId]/page.tsx	Passes `NEXT_PUBLIC_HEADLINE` to `ChatInterface` but does so from a Client Component page (build-time inlining risk).

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-05T10:42:46Z

ui/src/app/agents/[namespace]/[name]/chat/[chatId]/page.tsx

    sessionId={chatId}
+    headline={process.env.NEXT_PUBLIC_HEADLINE}
  />;


process.env.NEXT_PUBLIC_HEADLINE is being read inside a Client Component page (this file has "use client"), which means the value is inlined at build time and won’t reflect runtime env var changes. To achieve runtime configurability, read the env var in a Server Component (remove "use client" from this page or move the env read into the server layout/page) and pass it to ChatInterface as a prop (and force dynamic rendering for the route or layout).

Copilot · 2026-03-05T10:42:47Z

ui/src/app/agents/[namespace]/[name]/chat/page.tsx

+  const headline = process.env.NEXT_PUBLIC_HEADLINE;
+  return <ChatInterface selectedAgentName={name} selectedNamespace={namespace} headline={headline} />;


This page reads process.env.NEXT_PUBLIC_HEADLINE but does not opt out of static optimization. If this route ends up being statically rendered, the env value can be baked in at build time rather than read at runtime. Add export const dynamic = "force-dynamic" here or in the enclosing chat/layout.tsx to guarantee runtime evaluation of the env var.

Copilot · 2026-03-05T10:42:47Z

ui/src/components/chat/ChatInterface.tsx

              <div className="flex items-center justify-center h-full min-h-[50vh]">
                <div className="bg-card p-6 rounded-lg shadow-sm border max-w-md text-center">
-                  <h3 className="text-lg font-medium mb-2">Start a conversation</h3>
+                  <h3 className="text-lg font-medium mb-2">{headline || "Start a conversation"}</h3>


Using headline || "Start a conversation" will treat an intentionally provided empty string as “unset” and fall back to the default. If you want the prop/env var to override the default whenever it’s defined (even if empty), use nullish coalescing so only null/undefined trigger the fallback.

Suggested change

<h3 className="text-lg font-medium mb-2">{headline || "Start a conversation"}</h3>

<h3 className="text-lg font-medium mb-2">{headline ?? "Start a conversation"}</h3>

peterj · 2026-03-05T20:47:03Z

what is the problem/scenario this change addresses?

optimus-fulcria · 2026-03-05T21:02:01Z

This addresses issue #1345 — enterprise/team deployments want to customize the chat headline and landing page subtitle without forking the UI. For example, changing "Start a conversation" to "Ask your DevOps assistant" or adding a subtitle like "Internal AI Agent Platform" on the agents page.

The env vars (NEXT_PUBLIC_HEADLINE, NEXT_PUBLIC_SUBTITLE) are optional with zero impact on default deployments.

…bles Allow customizing the chat headline text and the landing page subtitle via NEXT_PUBLIC_HEADLINE and NEXT_PUBLIC_SUBTITLE environment variables, enabling enterprise deployments to personalize the UI without forking. Closes kagent-dev#1345 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Optimus (AI Agent) <agent@fulcria.com>

- Convert chat pages to async server components so process.env reads happen at runtime instead of build time - Add force-dynamic to all routes reading env vars - Use nullish coalescing (??) instead of logical OR (||) for headline fallback to allow intentionally empty strings Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> Signed-off-by: Optimus (AI Agent) <agent@fulcria.com>

Copilot AI review requested due to automatic review settings March 5, 2026 10:38

optimus-fulcria requested a review from peterj as a code owner March 5, 2026 10:38

Copilot started reviewing on behalf of optimus-fulcria March 5, 2026 10:39 View session

Copilot AI reviewed Mar 5, 2026

View reviewed changes

optimus-fulcria and others added 2 commits March 5, 2026 21:02

optimus-fulcria force-pushed the feat/configurable-ui-text branch from 036be33 to 7dce822 Compare March 5, 2026 21:02

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: configurable UI headline and subtitle via environment variables#1434

feat: configurable UI headline and subtitle via environment variables#1434
optimus-fulcria wants to merge 2 commits intokagent-dev:mainfrom
optimus-fulcria:feat/configurable-ui-text

optimus-fulcria commented Mar 5, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 5, 2026

Uh oh!

Copilot AI Mar 5, 2026

Uh oh!

Copilot AI Mar 5, 2026

Uh oh!

peterj commented Mar 5, 2026

Uh oh!

optimus-fulcria commented Mar 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		const headline = process.env.NEXT_PUBLIC_HEADLINE;
		return <ChatInterface selectedAgentName={name} selectedNamespace={namespace} headline={headline} />;

	<h3 className="text-lg font-medium mb-2">{headline \|\| "Start a conversation"}</h3>
	<h3 className="text-lg font-medium mb-2">{headline ?? "Start a conversation"}</h3>

Conversation

optimus-fulcria commented Mar 5, 2026

Summary

Implementation

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 5, 2026

Choose a reason for hiding this comment

Uh oh!

peterj commented Mar 5, 2026

Uh oh!

optimus-fulcria commented Mar 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants