AWSAWS Certified Generative AI Developer - Professional2026-102.5 Implement application integration patterns and development tools
Connect accessible interfaces to explicit contracts
Completed by the knowledge check
Learning objective
Build accessible GenAI interfaces with AWS Amplify UI components and OpenAPI-first contracts
Core idea
An accessible generative AI interface lets people understand the same operation through different interaction modes. A sighted reader watching a stream, a keyboard user submitting a prompt, and a screen-reader user hearing a status update all need to know what started, what is incomplete, and what they can do next.
AWS Amplify UI supplies components and accessibility mechanisms, but the application still owns its interaction policy. OpenAPI-first design supplies the other half: define the public operation, inputs, outcomes, and failures before wiring controls to a backend. A polished chat surface cannot compensate for an API that reports every interruption as success.
Treat these as related contracts. The API describes machine-observable states; the interface translates those states into perceivable feedback and available actions. Keep generated content separate from operational status so an answer’s wording cannot redefine whether the request actually succeeded.
How it works
Compose components with meaningful labels
Amplify UI components follow Web Content Accessibility Guidelines (WCAG) and WAI-ARIA practices for labels, keyboard navigation, contrast, and focus management. Its form field components require a label and generate an ID when you do not supply one, associating the label with the input. TextField with a label is a concrete mechanism for identifying a field; placeholder text is not a substitute for an instruction that remains available after typing.
Use meaningful names for prompt, context, and action controls. Distinguish Send, Retry, and Replace draft if they cause different backend operations. An icon or color can reinforce that meaning, but it should not carry the only indication that a response is incomplete or that a button creates an external record.
Amplify primitives accept HTML and ARIA attributes. The accessibility documentation demonstrates View as="nav" with aria-label and a Badge with aria-live="polite". Use those extension points to express the actual application structure and announce concise status changes. They are mechanisms for composition, not proof that every combination of components is accessible.
Make streaming updates usable
A rapidly changing answer is different from a short status announcement. Keep the transcript readable, and announce meaningful transitions such as generating, completed, or interrupted through a polite live region. Do not make every token a separate announcement: the application should group progress in a way that leaves the user’s reading and navigation usable.
Preserve keyboard focus when output arrives. A person reviewing an earlier paragraph should not be moved to the composer because the model emitted another delta. If you offer a jump-to-answer control, make the move a deliberate user action. Keep errors available as text, with a recovery action whose label explains whether it resumes viewing an existing result or starts a replacement.
The application event contract from 2.5.1 determines the status language. Partial output stays visibly provisional until the acceptance boundary is crossed. A token-limit stop should produce an incomplete-response state, not only a different color on the same success message. A failed request should leave the user’s input available for correction or an authorized retry.
Choose the conversation binding deliberately
Amplify’s AIConversation component comes from @aws-amplify/ui-react-ai. It renders conversation state supplied through messages and calls handleSendMessage when a user sends a message. The documented useAIConversation hook manages state and lifecycle as assistant responses stream back; the example also supplies isLoading.
That documented integration uses an Amplify AI backend and requires a signed-in user. It is not evidence that AIConversation automatically binds to an arbitrary OpenAPI REST endpoint. If you use a separate REST contract, design and validate an adapter for the conversation state or compose Amplify primitives around your own state model. Choose based on the backend contract you intend to own.
The component’s messageRenderer extension supports custom text rendering; Markdown rendering is not built in. A custom renderer is another application boundary. Keep headings, links, and action controls usable, and avoid treating generated Markdown or component props as trusted instructions to perform business actions.
Define operations before screen behavior
Write an OpenAPI definition that names each public operation and describes required inputs, responses, and error outcomes. For example, a draft-generation operation might accept an authorized document identifier and return either an accepted job identity or a completed draft. Those are proposed application fields, not AWS service parameters.
Specify what happens when the document is unavailable, the prompt exceeds the application’s budget, or generation ends before an acceptable result exists. Include the relationship between request identity, attempt identity, and result identity. A frontend should not need to infer that relationship from the generated prose.
API Gateway can import REST APIs from OpenAPI 2.0 or 3.0 definitions, subject to its documented exceptions. An update can overwrite or merge a definition, selected through the mode query parameter. Treat that deployment choice as an explicit review decision: a merge should not leave obsolete operations in the public API by accident.
After creating, testing, and deploying the imported REST API to a stage, generate its JavaScript SDK in API Gateway. The generated client gives the frontend a platform-specific way to call that deployed API rather than hand-writing its method bindings.
Importing a definition does not prove that every backend implements every declared outcome. Validate requests and results at their actual boundaries; see 2.4.3. Exercise the same contract in a non-visual client and through the interface. If the interface says completed while the API says interrupted, the application has two conflicting sources of truth.
Key distinctions and trade-offs
Component support versus application accessibility: Amplify supplies label association, theme tokens, and ARIA extension points. You still determine reading order, status timing, focus behavior, and the meaning of actions.
Conversation component versus REST client: AIConversation renders supplied state and has a documented Amplify hook integration. OpenAPI describes a REST interface. An adapter or a separately composed interface connects them; their names do not imply automatic compatibility.
Streaming text versus status: Generated text is content. A live-region status describes processing. Keeping them distinct prevents long responses from overwhelming operational feedback.
Schema declaration versus runtime enforcement: An imported OpenAPI definition is a deployment artifact and shared contract. It does not replace end-user authorization or validation of model output.
Theme customization has an accessibility cost. Amplify’s ThemeProvider and design tokens let you alter contrast-related colors and borders. Verify the resulting combinations rather than assuming the default theme’s contrast properties survive arbitrary overrides.
Architecture / decision scenario
A procurement portal offers supplier summaries to employees using keyboards and screen readers. The team defines the generation operation and its completed, incomplete, and failed outcomes before designing the screen. The contract carries request identity so a lost connection does not silently create another summary.
For an Amplify AI backend, the team uses useAIConversation and passes its conversation state to AIConversation. For a separately deployed OpenAPI REST service, it instead composes labeled Amplify fields and buttons around a tested adapter. It does not assume that the hook discovers REST operations from an OpenAPI document.
The interface keeps focus on the user’s chosen control, announces completion or interruption through a polite status region, and labels replacement as a separate action. Reviewers test keyboard submission, error recovery, transcript reading, and contrast after theme overrides. They compare each displayed terminal state with the API result rather than judging accessibility from the happy-path screenshot.
Common exam traps
- Assuming an accessible component library certifies the complete application.
- Using placeholder text as the only prompt label.
- Announcing every streamed token or moving focus on every update.
- Assuming
AIConversationis an automatic OpenAPI REST binding. - Treating a schema import as backend validation or authorization.
- Presenting incomplete generation with the same success state as an accepted answer.
What to remember
- Use Amplify’s labels, ARIA attributes, and theme mechanisms deliberately.
- Translate explicit API outcomes into visible and announced states.
- Keep focus under user control during generation.
- Choose the documented Amplify binding or build a validated adapter.
- Verify the composed interface and its deployed contract together.
Knowledge check
An answer streams into a chat transcript. Screen-reader users report constant interruptions and say they lose their place while rereading earlier paragraphs. Which change addresses both problems?
A team already runs a REST service described by an OpenAPI definition and wants to render it with Amplify’s AIConversation. Which integration is supported by what Amplify documents?
useAIConversation so it discovers the operationsuseAIConversation , which works with any backend that streams responsesAIConversationmessages and handleSendMessage from the REST serviceAIConversation renders state it is given. The documented useAIConversation hook manages that state for an Amplify AI backend, not an arbitrary REST API, so a separate service needs its own adapter or a composed interface.The API reports a response as incomplete because generation hit its token limit, but the interface shows the usual success message in amber. Which repair keeps the two contracts consistent?
A prompt field shows “Ask about a supplier” as placeholder text and has no other label. Which Amplify change gives the field an identification that remains after the user starts typing?
TextField with a meaningful labelaria-live="polite" to the field so changes are announcedlabel with the input, so the name persists and reaches assistive technology. Placeholder text disappears as the user types, a live region announces changes rather than naming a control, and an icon alone cannot carry the meaning.