feat(ui): configurable headline and subtitle via env vars (fixes #1345) by fl-sean03 · Pull Request #1396 · kagent-dev/kagent

fl-sean03 · 2026-02-27T12:35:27Z

Summary

Add NEXT_PUBLIC_HEADLINE env var to customize the chat greeting (default: "Start a conversation")
Add NEXT_PUBLIC_SUBTITLE env var for an optional tagline below the "Agents" heading on the landing page
ChatInterface accepts optional headline prop, falling back to the default text
AgentList accepts optional subtitle prop, rendered only when provided
Server/page components read process.env and pass values as props
Zero impact on default deployments — both env vars are optional

Changes

File	Change
`ui/src/components/chat/ChatInterface.tsx`	Added optional `headline` prop to interface; use it in the empty-state greeting
`ui/src/components/AgentList.tsx`	Added `AgentListProps` interface with optional `subtitle`; render subtitle below heading when provided
`ui/src/app/agents/[namespace]/[name]/chat/page.tsx`	Read `NEXT_PUBLIC_HEADLINE` and pass as prop
`ui/src/app/agents/[namespace]/[name]/chat/[chatId]/page.tsx`	Read `NEXT_PUBLIC_HEADLINE` and pass as prop
`ui/src/app/page.tsx`	Read `NEXT_PUBLIC_SUBTITLE` and pass as prop
`ui/src/app/agents/page.tsx`	Read `NEXT_PUBLIC_SUBTITLE` and pass as prop

Test plan

npm run build — compiles successfully
npm run lint — no lint errors
npm run test — all 107 tests pass
Set NEXT_PUBLIC_HEADLINE="Hello there" and verify chat greeting changes
Set NEXT_PUBLIC_SUBTITLE="Your AI assistants" and verify subtitle appears on landing page
Verify default behavior is unchanged when env vars are not set

Fixes #1345

Add NEXT_PUBLIC_HEADLINE env var to customize the chat greeting (default: "Start a conversation") and NEXT_PUBLIC_SUBTITLE env var for an optional tagline below the "Agents" heading on the landing page. - ChatInterface accepts optional `headline` prop - AgentList accepts optional `subtitle` prop - Server/page components read process.env and pass as props - Zero impact on default deployments (env vars are optional) Fixes kagent-dev#1345 Signed-off-by: Sean <sean@opspawn.com> Signed-off-by: fl-sean03 <jmhbh@users.noreply.github.com>

Copilot

Pull request overview

This PR adds support for customizable UI text through environment variables NEXT_PUBLIC_HEADLINE (for chat greeting) and NEXT_PUBLIC_SUBTITLE (for landing page tagline). However, the implementation does not fully achieve the stated goal of runtime configuration, as Next.js inlines NEXT_PUBLIC_* variables at build time by default.

Changes:

Added optional headline and subtitle props to ChatInterface and AgentList components respectively
Updated page components to read environment variables and pass them as props
Default values are preserved when env vars are not set

Reviewed changes

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

Show a summary per file

File	Description
`ui/src/components/chat/ChatInterface.tsx`	Added optional `headline` prop with fallback to "Start a conversation"
`ui/src/components/AgentList.tsx`	Added optional `subtitle` prop with conditional rendering
`ui/src/app/page.tsx`	Reads `NEXT_PUBLIC_SUBTITLE` env var and passes to AgentList
`ui/src/app/agents/page.tsx`	Reads `NEXT_PUBLIC_SUBTITLE` env var and passes to AgentList
`ui/src/app/agents/[namespace]/[name]/chat/page.tsx`	Reads `NEXT_PUBLIC_HEADLINE` env var and passes to ChatInterface
`ui/src/app/agents/[namespace]/[name]/chat/[chatId]/page.tsx`	Reads `NEXT_PUBLIC_HEADLINE` env var in client component

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

Copilot · 2026-02-27T12:41:06Z

ui/src/app/page.tsx

@@ -1,5 +1,6 @@
 import AgentList from "@/components/AgentList";



NEXT_PUBLIC_ environment variables are inlined at build time by default in Next.js. To ensure the subtitle can be changed at runtime without rebuilding (as described in the issue #1345), you need to add export const dynamic = "force-dynamic"; before the component function. This forces the page to be dynamically rendered, allowing the env var to be read at runtime from the deployment environment.

Suggested change

export const dynamic = "force-dynamic";

Copilot · 2026-02-27T12:41:06Z

ui/src/app/agents/page.tsx

@@ -1,4 +1,5 @@
 import AgentList from "@/components/AgentList";


NEXT_PUBLIC_ environment variables are inlined at build time by default in Next.js. To ensure the subtitle can be changed at runtime without rebuilding (as described in the issue #1345), you need to add export const dynamic = "force-dynamic"; before the component function. This forces the page to be dynamically rendered, allowing the env var to be read at runtime from the deployment environment.

Suggested change

import AgentList from "@/components/AgentList";

import AgentList from "@/components/AgentList";

export const dynamic = "force-dynamic";

Copilot · 2026-02-27T12:41:07Z

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

 export default function ChatAgentPage({ params }: { params: Promise<{ name: string, namespace: string }> }) {
  const { name, namespace } = use(params);
-  return <ChatInterface selectedAgentName={name} selectedNamespace={namespace} />;
-}
+  const headline = process.env.NEXT_PUBLIC_HEADLINE;
+  return <ChatInterface selectedAgentName={name} selectedNamespace={namespace} headline={headline} />;


NEXT_PUBLIC_ environment variables are inlined at build time by default in Next.js. To ensure the headline can be changed at runtime without rebuilding (as described in the issue #1345), you need to add export const dynamic = "force-dynamic"; before the component function. This forces the page to be dynamically rendered, allowing the env var to be read at runtime from the deployment environment.

Copilot · 2026-02-27T12:41:07Z

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

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


This is a client component (marked with "use client"), but it's trying to read a NEXT_PUBLIC_ environment variable. While NEXT_PUBLIC_ vars are available in client components, they are always inlined at build time and cannot be changed at runtime. Since the issue #1345 requires runtime configuration, this page should either: (1) be converted to a server component by removing "use client" and adding export const dynamic = "force-dynamic";, or (2) receive the headline value from a parent server component via props.

Ensures NEXT_PUBLIC_* env vars are read at runtime on each request, not baked in at build time. This is required for runtime-configurable Next.js deployments as described in issue kagent-dev#1345. Signed-off-by: Sean <sean@opspawn.com> Signed-off-by: fl-sean03 <jmhbh@users.noreply.github.com>

fl-sean03 · 2026-02-27T18:53:56Z

Added export const dynamic = "force-dynamic" to the server component pages that read NEXT_PUBLIC_* env vars:

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

This ensures the env vars are read at runtime (on each request), not baked in at build time. As the issue description specifies, this is the correct pattern for runtime-configurable Next.js env vars.

Skipped ui/src/app/agents/[namespace]/[name]/chat/[chatId]/page.tsx as it's a "use client" component — route segment config exports like dynamic are only respected in server components.

fl-sean03 · 2026-02-27T20:14:06Z

Addressed Copilot feedback in 5f3c694: converted [chatId]/page.tsx from a client component to an async server component with export const dynamic = "force-dynamic". Removed "use client" and replaced use(params) with await params. All four pages that read env vars are now server components with force-dynamic, ensuring runtime configurability. Build succeeds (all routes dynamic), 107 tests pass.

The [chatId]/page.tsx was a "use client" component, which means NEXT_PUBLIC_ env vars are inlined at build time and cannot be changed at runtime. Convert to an async server component with force-dynamic to match the other pages, ensuring the headline env var is read at request time. Signed-off-by: Sean <sean@opspawn.com> Signed-off-by: fl-sean03 <jmhbh@users.noreply.github.com>

Copilot AI review requested due to automatic review settings February 27, 2026 12:35

fl-sean03 requested a review from peterj as a code owner February 27, 2026 12:35

Copilot started reviewing on behalf of fl-sean03 February 27, 2026 12:36 View session

Copilot AI reviewed Feb 27, 2026

View reviewed changes

EItanya and others added 2 commits February 27, 2026 08:40

Merge branch 'main' into feat/1345-configurable-ui-headline

43c7d2f

fl-sean03 force-pushed the feat/1345-configurable-ui-headline branch from 5f3c694 to 78af4eb Compare February 27, 2026 21:10

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): configurable headline and subtitle via env vars (fixes #1345)#1396

feat(ui): configurable headline and subtitle via env vars (fixes #1345)#1396
fl-sean03 wants to merge 4 commits intokagent-dev:mainfrom
fl-sean03:feat/1345-configurable-ui-headline

fl-sean03 commented Feb 27, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Feb 27, 2026

Uh oh!

Copilot AI Feb 27, 2026

Uh oh!

Copilot AI Feb 27, 2026

Uh oh!

Copilot AI Feb 27, 2026

Uh oh!

fl-sean03 commented Feb 27, 2026

Uh oh!

fl-sean03 commented Feb 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		@@ -1,5 +1,6 @@
		import AgentList from "@/components/AgentList";

		@@ -1,4 +1,5 @@
		import AgentList from "@/components/AgentList";

	import AgentList from "@/components/AgentList";
	import AgentList from "@/components/AgentList";
	export const dynamic = "force-dynamic";

Conversation

fl-sean03 commented Feb 27, 2026

Summary

Changes

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 Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Feb 27, 2026

Choose a reason for hiding this comment

Uh oh!

fl-sean03 commented Feb 27, 2026

Uh oh!

fl-sean03 commented Feb 27, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants