feat(ui): align prompt examples with a2a (#992)

kapetr · web-flow · commit e6ae868c0bc5 · 2025-07-31T16:30:50.000+02:00
Signed-off-by: Petr Kadlec &lt;petr@puradesign.cz&gt;
diff --git a/agents/ui/hello/src/extensions.py b/agents/ui/hello/src/extensions.py
@@ -16,9 +16,9 @@ class AgentDetailContributor(BaseModel):
 class BeeAIUI(AgentExtension):
     def __init__(self, ui_type: str, user_greeting: str, tools: list[BeeAIUITool], framework: str, license: str, programming_language: str, 
                  source_code_url: str, container_image_url: str | None = None, author: AgentDetailContributor | None = None, 
-                 contributors: list[AgentDetailContributor] | None = None, starter_prompts: list[str] |None = None ):
+                 contributors: list[AgentDetailContributor] | None = None):
         super().__init__(
-            uri="beeai_ui",
+            uri="https://a2a-extensions.beeai.dev/ui/agent-detail/v1",
             params={
                 "ui_type": ui_type,
                 "user_greeting": user_greeting,
@@ -29,7 +29,5 @@ def __init__(self, ui_type: str, user_greeting: str, tools: list[BeeAIUITool], f
                 "source_code_url": source_code_url,
                 "container_image_url": container_image_url,
                 "author": author,
-                "contributors": contributors,
-                "starter_prompts": starter_prompts,
-            }
+                "contributors": contributors,            }
         )
diff --git a/agents/ui/hello/src/main.py b/agents/ui/hello/src/main.py
@@ -4,7 +4,10 @@
 from sdk import Server
 from extensions import BeeAIUITool, AgentDetailContributor, BeeAIUI
 from models import CitationMetadata, TextPart, TrajectoryMetadata
-from fastapi.middleware.cors import CORSMiddleware
+from a2a.types import (
+    AgentSkill,
+    TextPart,
+)
 
 server = Server()
 
@@ -39,8 +42,23 @@
             AgentDetailContributor(name= 'Petr Kadlec', email="petr.kadlec@ibm.com"),
             AgentDetailContributor(name= 'Petr Bulánek', email="petr.bulanek@ibm.com"),
         ],
-        starter_prompts=['Write a research report about Generative AI','Should I buy Apple stock now?','Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolor. This is what a long query would look like, 2 lines maximum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolor. This is what a long query would look like, 2 lines maximum...','What is the meaning of life?','Tell me a joke','What is the capital of France?','How do I make a cake?']
     ),
+    skills=[
+        AgentSkill(
+            id="echo",
+            name="Echo",
+            description="This is echo skill",
+            tags=["echo"],
+            examples=['Should I buy Apple stock now?','Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolor. This is what a long query would look like, 2 lines maximum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolor. This is what a long query would look like, 2 lines maximum...','What is the meaning of life?','Tell me a joke','What is the capital of France?','How do I make a cake?']
+        ),
+        AgentSkill(
+            id="echo2",
+            name="Echo 2",
+            description="This is echo 2 skill",
+            tags=["echo"],
+            examples=['What is the meaning of life?','Tell me a joke','What is the capital of France?','How do I make a cake?']
+        )
+    ],
 )
 async def hello_world(input: list[TextPart]):
     yield TextPart(content="Hello World")
diff --git a/agents/ui/hello/src/sdk.py b/agents/ui/hello/src/sdk.py
@@ -11,6 +11,7 @@
     AgentCard,
     AgentCapabilities,
     TaskState,
+    AgentSkill,
     Role,
     Part,
     TextPart as A2ATextPart,
@@ -42,6 +43,7 @@ def agent_decorator(
     input_content_types: list[str] | None = None,
     output_content_types: list[str] | None = None,
     ui: BeeAIUI | None = None,
+    skills: list[AgentSkill] = [],
 ) -> Callable[[Callable], RunnableAgent]:
     def decorator(fn: Callable) -> RunnableAgent:
         class DecoratedAgent(RunnableAgent):
@@ -62,7 +64,7 @@ def run(self, input: list[str]) -> AsyncGenerator[str, str]:
                 streaming=True,
                 extensions=extensions,
             ),
-            skills=[],
+            skills=skills,
             tags=[],
             examples=[],
         )
@@ -123,6 +125,7 @@ def agent(
         input_content_types: list[str] | None = None,
         output_content_types: list[str] | None = None,
         ui: BeeAIUI | None = None,
+        skills: list[AgentSkill] = []
     ) -> Callable:
         def decorator(fn: Callable) -> Callable:
             runnable_agent = agent_decorator(
@@ -131,6 +134,7 @@ def decorator(fn: Callable) -> Callable:
                 input_content_types=input_content_types,
                 output_content_types=output_content_types,
                 ui=ui,
+                skills=skills
             )(fn)
             self.agent_card = runnable_agent
             self.agent = DefaultAgentExecutor(runnable_agent)
diff --git a/apps/beeai-ui/src/modules/agents/api/types.ts b/apps/beeai-ui/src/modules/agents/api/types.ts
@@ -39,7 +39,6 @@ export interface UIExtensionParams {
   container_image_url?: string;
   author?: AgentContributor;
   contributors?: AgentContributor[];
-  starter_prompts?: string[];
 }
 
 /**
diff --git a/apps/beeai-ui/src/modules/agents/utils.ts b/apps/beeai-ui/src/modules/agents/utils.ts
@@ -53,3 +53,10 @@ export function getAgentTags(agent: Agent) {
     (a, b) => a.toLocaleLowerCase() === b.toLocaleLowerCase(),
   );
 }
+
+export function getAgentPromptExamples(agent: Agent) {
+  return uniqWith(
+    agent.skills.flatMap(({ examples }) => examples).filter(isNotNull),
+    (a, b) => a.toLocaleLowerCase() === b.toLocaleLowerCase(),
+  );
+}
diff --git a/apps/beeai-ui/src/modules/runs/components/PromptExamples.module.scss b/apps/beeai-ui/src/modules/runs/components/PromptExamples.module.scss
@@ -11,7 +11,10 @@
 
 .root {
   z-index: z('modal') - 1;
-  padding: 0 !important;
+
+  // use grid-margin to align with run input
+  padding-inline: var(--cds-grid-margin) !important;
+  margin-inline-start: calc(-1 * var(--cds-grid-margin));
 }
 
 .content {
diff --git a/apps/beeai-ui/src/modules/runs/components/PromptExamples.tsx b/apps/beeai-ui/src/modules/runs/components/PromptExamples.tsx
@@ -23,17 +23,17 @@ import { Container } from '#components/layouts/Container.tsx';
 import { Tooltip } from '#components/Tooltip/Tooltip.tsx';
 import { fadeProps } from '#utils/fadeProps.ts';
 
-import classes from './PromptSuggestions.module.scss';
+import classes from './PromptExamples.module.scss';
 
 interface Props {
   inputRef: RefObject<HTMLTextAreaElement | null>;
   isOpen: boolean;
-  suggestions: string[];
+  examples: string[];
   setIsOpen: Dispatch<SetStateAction<boolean>>;
   onSubmit: (input: string) => void;
 }
 
-export function PromptSuggestions({ inputRef, isOpen, suggestions, setIsOpen, onSubmit }: Props) {
+export function PromptExamples({ inputRef, isOpen, examples, setIsOpen, onSubmit }: Props) {
   const { refs, floatingStyles, context, placement } = useFloating({
     placement: 'bottom-start',
     open: isOpen,
@@ -86,9 +86,9 @@ export function PromptSuggestions({ inputRef, isOpen, suggestions, setIsOpen, on
     };
   });
 
-  const visibleSuggestions = useMemo(() => suggestions.slice(0, ITEMS_MAX_LENGTH), [suggestions]);
+  const visibleExamples = useMemo(() => examples.slice(0, ITEMS_MAX_LENGTH), [examples]);
 
-  if (!suggestions.length) {
+  if (!examples.length) {
     return;
   }
 
@@ -100,7 +100,7 @@ export function PromptSuggestions({ inputRef, isOpen, suggestions, setIsOpen, on
         {isOpen && (
           <FloatingPortal>
             <div ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
-              <Container size="md" className={classes.root}>
+              <Container size="sm" className={classes.root}>
                 <motion.div
                   {...fadeProps({
                     hidden: {
@@ -115,9 +115,9 @@ export function PromptSuggestions({ inputRef, isOpen, suggestions, setIsOpen, on
                     <h3 className={classes.heading}>Suggested</h3>
 
                     <ul className={classes.list}>
-                      {visibleSuggestions.map((prompt, idx) => (
+                      {visibleExamples.map((prompt, idx) => (
                         <li key={idx} className={classes.item}>
-                          <SuggestionButton content={prompt} onSubmit={onSubmit} />
+                          <ExampleButton content={prompt} onSubmit={onSubmit} />
                         </li>
                       ))}
                     </ul>
@@ -132,7 +132,7 @@ export function PromptSuggestions({ inputRef, isOpen, suggestions, setIsOpen, on
   );
 }
 
-function SuggestionButton({ content, onSubmit }: { content: string; onSubmit: (input: string) => void }) {
+function ExampleButton({ content, onSubmit }: { content: string; onSubmit: (input: string) => void }) {
   const ref = useRef<HTMLSpanElement>(null);
   const [isTruncated, setIsTruncated] = useState(false);
 
@@ -191,7 +191,7 @@ function SuggestionButton({ content, onSubmit }: { content: string; onSubmit: (i
 }
 
 const OFFSET = {
-  mainAxis: 27, // Space between the input and the suggestions
+  mainAxis: 27, // Space between the input and the examples
 };
 
 const ITEMS_MAX_LENGTH = 5;
diff --git a/apps/beeai-ui/src/modules/runs/components/RunInput.tsx b/apps/beeai-ui/src/modules/runs/components/RunInput.tsx
@@ -16,22 +16,22 @@ import { dispatchInputEventOnTextarea, submitFormOnEnter } from '#utils/form-uti
 import { ChatDefaultTools } from '../chat/constants';
 import { useAgentRun } from '../contexts/agent-run';
 import type { RunAgentFormValues } from '../types';
-import { PromptSuggestions } from './PromptSuggestions';
+import { PromptExamples } from './PromptExamples';
 import { RunFiles } from './RunFiles';
 import classes from './RunInput.module.scss';
 // import { RunSettings } from './RunSettings';
 import { RunSubmit } from './RunSubmit';
 
 interface Props {
-  promptSuggestions?: string[];
+  promptExamples?: string[];
   onSubmit?: () => void;
 }
 
-export function RunInput({ promptSuggestions, onSubmit }: Props) {
+export function RunInput({ promptExamples, onSubmit }: Props) {
   const formRef = useRef<HTMLFormElement>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
 
-  const [promptSuggestionsOpen, setPromptSuggestionsOpen] = useState(false);
+  const [promptExamplesOpen, setPromptExamplesOpen] = useState(false);
 
   const {
     agent: {
@@ -79,7 +79,7 @@ export function RunInput({ promptSuggestions, onSubmit }: Props) {
   const fillWithInput = useCallback(
     (value: string) => {
       setValue('input', value, { shouldValidate: true });
-      setPromptSuggestionsOpen(false);
+      setPromptExamplesOpen(false);
       dispatchInputEventAndFocus();
     },
     [setValue, dispatchInputEventAndFocus],
@@ -135,12 +135,12 @@ export function RunInput({ promptSuggestions, onSubmit }: Props) {
           </div>
         </div>
 
-        {promptSuggestions && (
-          <PromptSuggestions
+        {promptExamples && (
+          <PromptExamples
             inputRef={inputRef}
-            suggestions={promptSuggestions}
-            isOpen={promptSuggestionsOpen}
-            setIsOpen={setPromptSuggestionsOpen}
+            examples={promptExamples}
+            isOpen={promptExamplesOpen}
+            setIsOpen={setPromptExamplesOpen}
             onSubmit={fillWithInput}
           />
         )}
diff --git a/apps/beeai-ui/src/modules/runs/components/RunLandingView.tsx b/apps/beeai-ui/src/modules/runs/components/RunLandingView.tsx
@@ -3,8 +3,11 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { useMemo } from 'react';
+
 import { Container } from '#components/layouts/Container.tsx';
 import { AgentGreeting } from '#modules/agents/components/AgentGreeting.tsx';
+import { getAgentPromptExamples } from '#modules/agents/utils.ts';
 
 import { FileUpload } from '../../files/components/FileUpload';
 import { useAgentRun } from '../contexts/agent-run';
@@ -13,16 +16,15 @@ import classes from './RunLandingView.module.scss';
 
 export function RunLandingView() {
   const { agent } = useAgentRun();
-  const {
-    ui: { starter_prompts },
-  } = agent;
+
+  const promptExamples = useMemo(() => getAgentPromptExamples(agent), [agent]);
 
   return (
     <FileUpload>
       <Container size="sm" className={classes.root}>
         <AgentGreeting agent={agent} />
 
-        <RunInput promptSuggestions={starter_prompts} />
+        <RunInput promptExamples={promptExamples} />
       </Container>
     </FileUpload>
   );

Original file line number	Diff line number	Diff line change
`@@ -39,7 +39,6 @@ export interface UIExtensionParams {`
`39`	`39`	`container_image_url?: string;`
`40`	`40`	`author?: AgentContributor;`
`41`	`41`	`contributors?: AgentContributor[];`
`42`		`- starter_prompts?: string[];`
`43`	`42`	`}`
`44`	`43`
`45`	`44`	`/**`