Yakha i-UI ekhiqizayo yama-agent e-AI ku-Amazon Bedrock AgentCore ngephrothokholi ye-AG-UI

0 1 8 minutes read

Yakha i-UI ekhiqizayo yama-agent e-AI ku-Amazon Bedrock AgentCore ngephrothokholi ye-AG-UI

Abenzeli be-AI bangenza okungaphezu kokuxoxa. Ngephrothokholi elungile, umenzeli angakwazi ukunikeza ishadi elisebenzisanayo elisemgqeni engxoxweni yakho, abuyekeze ikhanvasi eyabiwe ngesikhathi sangempela, noma amise okwesikhashana phakathi nokusebenza ukuze acele imvume yakho ngaphambi kokuqhubeka. Lokhu kusebenzisana (i-UI ekhiqizayo, isimo esabiwe, kanye nomuntu ohamba phambili) kudinga indlela evamile yama-ejenti angemuva ukuze axhumane nemicimbi eguquguqukayo kuma-frontend.

I-AG-UI (i-Agent-User Interaction Protocol) iyiphrothokholi evulekile echaza leli zinga. Isebenza nezinhlaka zama-ejenti amaningi (ama-Strands Agents, i-LangGraph, i-CrewAI) nemitapo yolwazi engaphambili (React, Angular, Vue). Nge-AG-UI, ikhodi yakho yomenzeli kanye nekhodi yakho yangaphambili kuhlala kunqanyuliwe. Ukhetha uhlaka olungcono kakhulu lwe-backend yakho kanye nelabhulali ehamba phambili ye-frontend yakho, futhi i-AG-UI iyakuxhuma.

I-Amazon Bedrock AgentCore iyingxenye yomndeni we-Amazon Bedrock wezinsizakalo ze-AI ekhiqizayo. I-AgentCore iyinkundla ye-ejenti yokwakha, ukuthumela, nokusebenzisa ama-ejenti e-AI ngokuphephile esikalini, isebenzisa noma yiluphi uhlaka nanoma iyiphi imodeli.

Lokhu okuthunyelwe kuhamba ngendlela i-AG-UI ehlanganisa ngayo ku-Fullstack AgentCore Solution Template (FAST) ukuze kwakhiwe ama-ejenti angaphambili asebenzisanayo ku-Amazon Bedrock AgentCore. Sibe sesibonisa ukuthi i-CopilotKit ikudlulisa kanjani lokhu nge-UI ekhiqizayo, isimo esabiwe, kanye nokusebenzisana kwabantu, konke kusetshenziswe ku-Amazon Bedrock AgentCore.

Uhlolojikelele lwesixazululo

I-Amazon Bedrock AgentCore Runtime ihlinzeka ngendawo yokubamba evikelekile, engenaseva, futhi eyakhelwe inhloso yokukhipha nokusebenzisa ama-agent noma amathuluzi e-AI. I-AgentCore Runtime isekela amaphrothokholi ama-ejenti ambalwa. I-Model Context Protocol (MCP) ixhuma ama-ejenti namathuluzi, i-Agent2Agent (A2A) ixhuma ama-ejenti nabanye, futhi i-AG-UI ixhuma ama-ejenti kubasebenzisi. Uma uphakela isiqukathi somenzeli esinefulegi lephrothokholi ye-AG-UI, i-AgentCore isebenza njengommeleli obala. Iphatha ukuqinisekiswa (Isiginesha Version 4 [SigV4] noma i-OAuth 2.0 nge-Amazon Cognito), ukuhlukaniswa kweseshini, ukukala, nokubonakala. Isiqukathi sakho siyadalula POST /invocations ngezicelo ze-AG-UI kanye GET /ping ukuhlolwa kwezempilo echwebeni 8080. I-AgentCore idlulisa izicelo ngokungashintshiwe. Ukuze uthole imininingwane eyengeziwe, bheka amaseva we-Deploy AGUI ku-AgentCore Runtime.

I-FAST iphrojekthi elungele ukuphakelwa. Ixhuma isikhathi sokusebenza se-AgentCore, isango, i-Identity, iMemory, kanye ne-Code Interpreter ene-React frontend kanye nokuqinisekiswa kwe-Amazon Cognito, konke okuchazwe nge-AWS Cloud Development Kit (AWS CDK). Ihamba ngamaphethini e-ejenti we-Strands Agents, i-LangGraph, ne-Claude Agent SDK. I-FAST v0.4.1 yengeze amaphethini amabili e-AG-UI (agui-strands-agent futhi agui-langgraph-agent) elabelana ngohlahleli olulodwa lwangaphambili. Ukuze uthole ukwaziswa okwengeziwe mayelana nezakhiwo ze-FAST nokusetshenziswa kwazo, bheka ukusheshisa ukuthuthukiswa kwesicelo somenzeli ngesifanekiso esinesitaki esigcwele se-Amazon Bedrock AgentCore.

Isixazululo sinezingqimba ezimbili. I-AG-UI nge-FAST inikeza amaphethini e-ejenti amabili amasha kanye nesihlazululi se-frontend esisodwa esiphatha kokubili, ngakho indawo engaphambili ayidingi ukwazi ukuthi yiluphi uhlaka lomenzeli olusebenzayo. I-CopilotKit + FAST isampula elizimele elingena esikhundleni se-UI yengxoxo eyakhelwe ngaphakathi ye-FAST nge-CopilotKit. Yengeza i-UI ekhiqizayo (amashadi asemgqeni nezingxenye), isimo sokwabelana se-bidirectional (i-todo canvas), kanye nokusebenzisana komuntu-in-the-loop (isihleli somhlangano esimisa i-ejenti isikhashana futhi silindele okufakile). Zombili izendlalelo zisebenzisa ku-AgentCore Runtime enokuqinisekisa kwe-Cognito, i-AgentCore Gateway yokuxhuma ithuluzi le-MCP, kanye ne-AgentCore Memory ngezingxoxo eziqhubekayo.

Uhlolojikelele lwezakhiwo. I-frontend ixhumana ne-AgentCore Runtime ngemicimbi ye-AG-UI. I-AgentCore iphatha i-auth, ukukala, kanye nokuhlukaniswa kweseshini. Isikhathi sokusebenza somenzeli sihumusha imicimbi eqondene nohlaka ibe yiphrothokholi ye-AG-UI.

Ukuhamba phambili

Lokhu kuhamba kunezingxenye ezimbili. Okokuqala, sibonisa ukuthi amaphethini e-AG-UI asebenza kanjani ku-FAST nokuthi umhlaseli oyedwa ongaphambili uzisingatha kanjani zombili izingemuva ze-Strands ne-LangGraph. Okwesibili, sisebenzisa isampula ye-CopilotKit ukuze sibonise i-UI ekhiqizayo, isimo okwabelwana ngaso, kanye ne-human-in-the-loop ku-AgentCore.

Ikhodi yomthombo:

Okudingekayo

Kulokhu kuhamba, kufanele ube nezidingo ezilandelayo:

I-akhawunti ye-AWS enezimvume ze-AWS CloudFormation, Amazon Elastic Container Registry (Amazon ECR), Amazon Bedrock AgentCore, Amazon Cognito, kanye ne-AWS Amplify.
I-AWS Command Line Interface (AWS CLI) v2 ifakiwe futhi yalungiswa.
I-AWS CDK ifakiwe.
I-Node.js 18 noma kamuva nePython 3.11 noma kamuva.
I-Docker iyasebenza, yokwakhiwa kwesitsha.
Ukufinyelela imodeli kunikwe amandla kukhonsoli ye-Amazon Bedrock yemodeli esetshenziswa umenzeli.

I-AG-UI nge-FAST: Umhlahleli oyedwa, izinhlaka ezimbili

I agui-strands-agent iphethini igoqa i-Strands Agent StrandsAgent ukusuka ag-ui-strands umtapo wolwazi. I-wrapper ihumusha i-Strands imicimbi esakazwayo ibe yi-AG-UI Server-Sent Events ngokuzenzakalela.

Isicelo ngasinye sidala umenzeli omusha ngamathuluzi e-Gateway MCP. I-AgentCore Memory inamathiselwe ngochungechunge ngalunye ngomhlinzeki womphathi weseshini, ngakho umlando wengxoxo uphikelela kuso sonke isikali se-AgentCore Runtime. Imemori ingenile: umhlinzeki uyabuya None nini MEMORY_ID ayisethiwe:

# patterns/agui-strands-agent/agent.py
from ag_ui_strands import StrandsAgent, StrandsAgentConfig
from bedrock_agentcore.runtime import BedrockAgentCoreApp, RequestContext
from strands import Agent

app = BedrockAgentCoreApp()

# Build the model and Code Interpreter once at module load
MODEL = BedrockModel(model_id="us.anthropic.claude-sonnet-4-5-20250929-v1:0")
CODE_INTERPRETER = StrandsCodeInterpreterTools(REGION).execute_python_securely


@app.entrypoint
async def invocations(payload: dict, context: RequestContext):
    input_data = RunAgentInput.model_validate(payload)
    actor_id = extract_user_id_from_context(context)
    # Fresh agent per request --- picks up the caller's identity and tools
    agent = Agent(
        model=MODEL,
        system_prompt=SYSTEM_PROMPT,
        tools=[create_gateway_mcp_client(actor_id), CODE_INTERPRETER],
        session_manager=get_memory_session_manager(actor_id, session_id),
    )
    agui_agent = StrandsAgent(
        agent=agent,
        name="agui_strands_agent",
        config=StrandsAgentConfig(
            session_manager_provider=make_memory_provider(actor_id),
            replay_history_into_strands=False,
        ),
    )
    async for event in agui_agent.run(input_data):
        yield event.model_dump(mode="json", by_alias=True, exclude_none=True)

BedrockAgentCoreApp ifunda izihloko ze-AgentCore Runtime (WorkloadAccessToken, Authorization, Session-Id) futhi igcwalise okuguquguqukayo kokuqukethwe, ngakho-ke ukufakazela ubuqiniso kwe-Gateway kanye Nenkumbulo kusebenza ngendlela efanayo namaphethini e-HTTP.

I agui-langgraph-agent ukusetshenziswa kwephethini LangGraphAGUIAgent ukusuka copilotkit umtapo wolwazi. Yakha igrafu ehlanganisiwe ibe yintsha kuso sonke isicelo, ngakho-ke ukucela ngakunye kuthola amathuluzi e-MCP afinyelelwe koshaya ucingo. I-AgentCore Memory iphinde yangena lapha: umsizi uyabuya None nini MEMORY_ID ayisethiwe, ngakho-ke ungasebenzisa iphethini ngaphandle kokunikeza iMemori:

# patterns/agui-langgraph-agent/agent.py
from copilotkit import CopilotKitMiddleware, LangGraphAGUIAgent


async def build_graph(actor_id: str):
    """Build a fresh LangGraph compiled graph with Gateway tools."""
    mcp_client = await create_gateway_mcp_client(actor_id)
    tools = await mcp_client.get_tools()
    tools.append(CODE_INTERPRETER)
    return create_agent(
        model=MODEL,
        tools=tools,
        checkpointer=get_memory_saver(),  # None when MEMORY_ID is unset
        middleware=[CopilotKitMiddleware()],
        system_prompt=SYSTEM_PROMPT,
    )


@app.entrypoint
async def invocations(payload: dict, context: RequestContext):
    input_data = RunAgentInput.model_validate(payload)
    actor_id = extract_user_id_from_context(context)
    graph = await build_graph(actor_id)
    agui_agent = LangGraphAGUIAgent(
        name="agui_langgraph_agent",
        graph=graph,
        config={"configurable": {"actor_id": actor_id}},
    )
    async for event in agui_agent.run(input_data):
        yield event.model_dump(mode="json", by_alias=True, exclude_none=True)

Womabili amaphethini akhiqiza imicimbi ye-AG-UI efanayo. Iphrothokholi ichaza ukusakazwa komcimbi othayiphiwe ngaphezu Kwemicimbi Ethunyelwe Ngeseva. Isibonelo, ikholi yethuluzi elilodwa ikhiqiza lokhu kulandelana:

data: {"type": "RUN_STARTED", "threadId": "t1", "runId": "r1"}
data: {"type": "TEXT_MESSAGE_START", "messageId": "m1", "role": "assistant"}
data: {"type": "TEXT_MESSAGE_CONTENT", "messageId": "m1", "delta": "Let me check "}
data: {"type": "TEXT_MESSAGE_CONTENT", "messageId": "m1", "delta": "that for you."}
data: {"type": "TEXT_MESSAGE_END", "messageId": "m1"}
data: {"type": "TOOL_CALL_START", "toolCallId": "tc1", "toolCallName": "get_weather"}
data: {"type": "TOOL_CALL_ARGS", "toolCallId": "tc1", "delta": "{"location": "Seattle"}"}
data: {"type": "TOOL_CALL_END", "toolCallId": "tc1"}
data: {"type": "TOOL_CALL_RESULT", "toolCallId": "tc1", "content": "{"temp": 55}"}
data: {"type": "RUN_FINISHED", "threadId": "t1", "runId": "r1"}

Umhlahleli we-frontend ubonisa umcimbi ngamunye njengesenzo esingaphambili:

// frontend/src/lib/agentcore-client/parsers/agui.ts
export const parseAguiChunk: ChunkParser = (line, callback) => {
  if (!line.startsWith("data: ")) return;
  const json = JSON.parse(line.substring(6).trim());
  switch (json.type) {
    case "TEXT_MESSAGE_CONTENT":
      callback({ type: "text", content: json.delta ?? "" });
      break;
    case "TOOL_CALL_START":
      callback({ type: "tool_use_start", toolUseId: json.toolCallId, name: json.toolCallName });
      break;
    case "TOOL_CALL_RESULT":
      callback({ type: "tool_result", toolUseId: json.toolCallId, result: json.content ?? "" });
      break;
    case "RUN_FINISHED":
      callback({ type: "result", stopReason: "end_turn" });
  }
};

Qhathanisa lokhu namaphethini e-HTTP, lapho i-Strands, i-LangGraph, ne-Claude-agent-sdk ngayinye idinga umhlahleli ohlukile ukuze isingathe amafomethi azo ahlukene okusakaza-bukhoma. Nge-AG-UI, uhlaka olungemuva luyakhishwa. Ungashintsha agui-strands-agent okwe agui-langgraph-agent ekucushweni kwakho futhi indawo engaphambili ayishintshi.

Ukuze usebenzise, setha iphethini phakathi infra-cdk/config.yaml bese usebenzisa i-CDK:

backend:
  pattern: agui-strands-agent  # or agui-langgraph-agent
  deployment_type: docker

cd infra-cdk
cdk deploy --require-approval never
python3 ../scripts/deploy-frontend.py

I-CopilotKit + FAST: I-UI ekhiqizayo, isimo okwabelwana ngaso, kanye ne-human-in-the-loop

Isisekelo se-FAST esingaphambili sinikeza isixhumi esibonakalayo sengxoxo esisebenzayo, kodwa i-AG-UI isekela ukusebenzisana okucebile kakhulu: ama-ejenti anikeza izingxenye ze-UI ngokwezifiso, isimo sokuvumelanisa nesingaphambili, kanye nokuphumuza okokufaka komsebenzisi phakathi nesikhathi. I-CopilotKit ilabhulali ye-React eyakhelwe lawa maphethini. Ithimba le-CopilotKit lakhe isampula lesicelo phezu kwe-FAST ebonisa lawa makhono ku-AgentCore. Ihlanganisa kokubili amaphethini e-ejenti ye-LangGraph kanye ne-Strands, futhi ukhetha eyodwa ngesikhathi sokuphakelwa.

I-Generative UI ihlanganisa i-spectrum ukusuka ekulawuleni okuphezulu okuphambili kuye enkululekweni ephezulu ye-ejenti. Lesi sampula sihlala ekugcineni okulawulwayo: indawo engaphambili iphethe izingxenye ze-React ezakhiwe kusengaphambili, futhi umenzeli uyakhetha ukuthi anikeze futhi anikeze idatha ngemicimbi ye-AG-UI. Ngokuqhubekayo ku-spectrum, ama-ejenti abuyisela izincazelo ze-UI ezidalulayo ezinikezwa yi-frontend, noma izindawo ezigcwele ze-UI ezishumekwa yi-frontend. I-AG-UI ithwala zontathu, ngenxa yokuthi imisa umcimbi kanye nokusakaza kwezwe kune-UI ngokwayo. Lapho unikeza i-ejenti inkululeko eyengeziwe, kulapho uthatha khona ngokwengeziwe: izindawo ezivulekile zidinga i-sandboxing kanye nokuqinisekisa okokufaka.

I-architecture yesampula ye-CopilotKit. I-CopilotKit Runtime Lambda isebenza njengebhuloho eliseceleni kweseva phakathi kwesiphequluli ne-AgentCore Runtime, ephethe ukucozululwa komcimbi we-AG-UI, umzila we-UI okhiqizayo, kanye nokudlulisela phambili ubuqiniso.

I-UI Ekhiqizayo: Ama-ejenti anikeza izingxenye ze-React

Nge-CopilotKit, umenzeli unikeza izingxenye ze-React ngokwezifiso emgqeni engxoxweni, hhayi umbhalo kuphela. I-frontend ibhalisa izingxenye umenzeli angazisebenzisa ngemicimbi yekholi yethuluzi le-AG-UI:

// Register a pie chart the agent can render
useComponent({
  name: "pieChart",
  description: "Displays data as a pie chart.",
  parameters: PieChartPropsSchema,
  render: PieChart,
});

Lapho i-ejenti ibiza i- pieChart ithuluzi, i-CopilotKit inqamula i TOOL_CALL_START futhi TOOL_CALL_ARGS imicimbi futhi uhumusha PieChart ingxenye ngqo engxoxweni. I-ejenti iqale ishayele u-a query_data ithuluzi lokulanda idatha kufayela lesampula lamanani ahlukaniswe ngokhefana (CSV), bese lidlulisela imiphumela engxenyeni yeshadi.

Isimo okwabiwe: I-todo canvas evunyelaniswe ne-ejenti

Isampula ihlanganisa i-todo canvas ehlala ekuvunyelanisweni phakathi komenzeli kanye ne-UI ngokuqondiswa kabili. Uma utshela umenzeli ukuthi “Engeza imisebenzi emithathu: klama i-API, bhala izivivinyo, bese uthumela esiteji,” umenzeli uyafona. manage_todos kanye nekhanvasi ibuyekeza ngesikhathi sangempela nge-AG-UI STATE_SNAPSHOT imicimbi. Ungakwazi futhi ukuhlela okokwenziwa ngokuqondile ku-UI. I-ejenti ibona isimo esibuyekeziwe ekujikeni kwayo okulandelayo ngoba iphethini ye-Strands ifaka ama-todos wamanje ekwazisweni kwesistimu:

def state_context_builder(state: dict) -> str:
    todos = state.get("todos", [])
    if todos:
        return f"nCurrent todos:n{json.dumps(todos, indent=2)}"
    return ""

I-Human-in-the-loop: I-ejenti iyama kancane futhi iyalinda

Isampula libonisa isihleli somhlangano lapho umenzeli emisa khona maphakathi nokusebenza futhi anikeze isikhi sesikhathi. Umsebenzisi ukhetha isikhathi, futhi umenzeli uyaqhubeka nalokho kukhetha:

useHumanInTheLoop({
  name: "scheduleTime",
  description: "Schedule a meeting with the user.",
  parameters: z.object({
    reasonForScheduling: z.string(),
    meetingDuration: z.number(),
  }),
  render: ({ respond, status, args }) => (
    
  ),
});

Lokhu kusebenza ngokugeleza kwekholi yamathuluzi ye-AG-UI: umenzeli uyakhipha TOOL_CALL_START okwe scheduleTimei-CopilotKit inikeza isikhethi esikhundleni sokusebenzisa ithuluzi elingemuva, futhi impendulo yomsebenzisi ibuyela emuva njenge TOOL_CALL_RESULT.

Kusetshenziswa isampula ye-CopilotKit

Kopisha inqolobane yamasampuli e-FAST futhi usebenzise:

git clone 
cd sample-FAST-applications/samples/copilotkit-generative-ui
cp config.yaml.example config.yaml
# Edit config.yaml --- set stack_name_base and admin_user_email
./deploy-langgraph.sh  # or ./deploy-strands.sh

Umbhalo wokuphakela uhlinzeka ngesitaki esigcwele: Iphuli yabasebenzisi be-Amazon Cognito, indawo yokugcina ye-Amazon ECR, i-AgentCore Runtime, i-AgentCore Gateway, i-AgentCore Memory, i-CopilotKit Runtime Lambda ene-Amazon API Gateway, kanye nokusingathwa kwe-AWS Khulisa. Uma iqeda, vula i-URL yokukhulisa i-URL ephrintiwe ekugcineni bese ungena ngemvume. Uzothola isixhumi esibonakalayo sengxoxo ye-CopilotKit, lapho ukuhlola okusheshayo okumbalwa okuqinisekisa ukuthi ukuthunyelwa kuyasebenza:

Cela i-ejenti ishadi likaphayi kusuka kudatha yesampula. Inikeza emgqeni engxoxweni.
Cela ukungeza imisebenzi emithathu kukhanvasi ye-todo. Ikhanvasi ibuyekeza ngesikhathi sangempela.
Cela ukuhlela umhlangano. I-ejenti iyama kancane futhi ibonise isikhethi sesikhathi.

Ukuhlanza

I-walkthrough isebenzisa izitaki ezimbili ezihlukene. Bhidliza noma yikuphi okufakile ukuze bayeke ukukhokhisa.

Ukuze ususe ukusetshenziswa kwe-FAST:

cd infra-cdk
npx cdk destroy --all

Ukuze ususe isampula ye-CopilotKit:

cd sample-FAST-applications/samples/copilotkit-generative-ui
npx cdk destroy --all

Uma inqolobane ye-Amazon ECR isaphethe izithombe zeziqukathi, zisuse ngesandla, njengoba okunye ukulungiselelwa kwe-CDK kugcina amakhosombe esendaweni.

Isiphetho

Lokhu okuthunyelwe kubonise indlela yokwakha ama-ejenti asebenzisanayo ku-Amazon Bedrock AgentCore kusetshenziswa iphrothokholi ye-AG-UI. Ukuhlanganiswa kwe-AG-UI ku-FAST kukuvumela ukuthi ushintshe phakathi kwe-Strands ne-ejenti ye-LangGraph engemuva ngaphandle kokushintsha ikhodi yakho yangaphambili. Isampula ye-CopilotKit inweba lokhu nge-UI ekhiqizayo, isimo esabiwe, nokusebenzisana komuntu siqu, konke kusebenza ku-AgentCore ene-auth ephethwe, ukukala, nenkumbulo.

Ukuze ufunde kabanzi, hlola izinsiza ezilandelayo:

Uma unemibuzo noma impendulo, vula inkinga endaweni yokugcina ye-FAST noma inqolobane yamasampuli e-FAST.