১. সংক্ষিপ্ত বিবরণ
বেশিরভাগ এজেন্ট অ্যাপ সাধারণ টেক্সট প্রদর্শন করে। A2UI এই অবস্থার পরিবর্তন করে। এটি ১৮টি ডিক্লারেটিভ UI প্রিমিটিভ সম্বলিত একটি প্রোটোকল, যা আপনার এজেন্টকে সমৃদ্ধ ও ইন্টারেক্টিভ ইন্টারফেস তৈরি করতে দেয়। ক্লায়েন্ট সেগুলোকে নেটিভভাবে রেন্ডার করে। প্রতিটি লেআউটের জন্য কোনো নতুন ফ্রন্টএন্ড কোডের প্রয়োজন হয় না।
এই কোডল্যাবে এজেন্ট বিল্ড করার জন্য এজেন্ট ডেভেলপমেন্ট কিট (ADK) এবং UI জেনারেট করার জন্য A2UI ব্যবহার করা হয়েছে।
আপনি যা তৈরি করবেন
তিনটি পর্যায়ে একটি ক্লাউড অবকাঠামো ড্যাশবোর্ড:
- একটি স্ট্যান্ডার্ড এজেন্ট যা রিসোর্স ডেটা সাধারণ টেক্সট হিসেবে ফেরত দেয়।
- একটি A2UI এজেন্ট যা স্ট্রাকচার্ড A2UI JSON-এর মতোই ডেটা ফেরত দেয়।
- একটি রেন্ডার করা এজেন্ট যা ADK ডেভ UI-তে A2UI JSON-কে ইন্টারেক্টিভ UI কম্পোনেন্ট হিসেবে প্রদর্শন করে।
আপনি যা শিখবেন
- A2UI যেভাবে কাজ করে: ১৮টি প্রিমিটিভ, ৩ ধরনের মেসেজ, ফ্ল্যাট কম্পোনেন্ট মডেল
- A2UI JSON তৈরি করার জন্য ADK এজেন্টকে নির্দেশ দিতে A2UI SDK কীভাবে ব্যবহার করবেন
-
adk webA2UI কম্পোনেন্টগুলো কীভাবে রেন্ডার করবেন
আপনার যা যা লাগবে
- বিলিং সক্ষম একটি গুগল ক্লাউড প্রজেক্ট
- ক্রোমের মতো একটি ওয়েব ব্রাউজার
- পাইথন ৩.১২+
এই কোডল্যাবটি সেইসব মধ্যম স্তরের ডেভেলপারদের জন্য, যাদের পাইথন এবং গুগল ক্লাউড সম্পর্কে কিছুটা ধারণা আছে।
এই কোডল্যাবটি সম্পূর্ণ করতে প্রায় ১৫-২০ মিনিট সময় লাগে।
এই কোডল্যাবে তৈরি রিসোর্সগুলোর খরচ ৫ ডলারের কম হওয়া উচিত।
২. আপনার পরিবেশ প্রস্তুত করুন
একটি গুগল ক্লাউড প্রজেক্ট তৈরি করুন
- গুগল ক্লাউড কনসোলের প্রজেক্ট সিলেক্টর পেজে, একটি গুগল ক্লাউড প্রজেক্ট নির্বাচন করুন বা তৈরি করুন ।
- আপনার ক্লাউড প্রোজেক্টের জন্য বিলিং চালু আছে কিনা তা নিশ্চিত করুন। কোনো প্রোজেক্টে বিলিং চালু আছে কিনা তা কীভাবে পরীক্ষা করবেন, তা জেনে নিন।
ক্লাউড শেল এডিটর শুরু করুন
Google Cloud কনসোল থেকে একটি Cloud Shell সেশন চালু করতে, আপনার Google Cloud কনসোলে থাকা ‘Activate Cloud Shell’ বোতামে ক্লিক করুন।
এটি আপনার গুগল ক্লাউড কনসোলের নিচের প্যানে একটি সেশন চালু করে।
এডিটর চালু করতে, ক্লাউড শেল উইন্ডোর টুলবারে থাকা ‘ওপেন এডিটর’-এ ক্লিক করুন।
পরিবেশ ভেরিয়েবল সেট করুন
ক্লাউড শেল এডিটর টুলবারে, টার্মিনাল এবং নিউ টার্মিনাল-এ ক্লিক করুন, তারপর আপনার প্রজেক্ট ও লোকেশন সেট করতে এবং ভার্টেক্স এআই-তে জেমিনি ব্যবহার করার জন্য এডিকে কনফিগার করতে নিম্নলিখিত কমান্ডগুলো চালান।
export GOOGLE_CLOUD_PROJECT=<INSERT_YOUR_GCP_PROJECT_HERE> export GOOGLE_CLOUD_LOCATION=global export GOOGLE_GENAI_USE_VERTEXAI=True
এপিআই সক্ষম করুন
টার্মিনালে, প্রয়োজনীয় API-গুলো সক্রিয় করতে নিম্নলিখিত কমান্ডটি চালান:
gcloud services enable aiplatform.googleapis.com
নির্ভরতা ইনস্টল করুন
এজেন্ট ডেভেলপমেন্ট কিট (ADK)-এর সর্বশেষ সংস্করণ ইনস্টল করতে টার্মিনালে নিম্নলিখিত কমান্ডটি চালান:
pip install -U google-adk a2ui-agent-sdk export PATH="$HOME/.local/bin:$PATH"
৩. এজেন্ট তৈরি করুন
একটি স্ট্যান্ডার্ড ADK এজেন্ট দিয়ে শুরু করুন যা প্লেইন টেক্সট রিটার্ন করে। বর্তমানে বেশিরভাগ এজেন্ট অ্যাপ দেখতে এইরকমই হয়।
এজেন্ট ফোল্ডার তৈরি করুন
a2ui_agent নামে একটি ফোল্ডার তৈরি করুন, যেখানে আপনার এজেন্ট ও টুলগুলোর সোর্স কোড থাকবে।
টুল এবং মক ডেটা সংজ্ঞায়িত করুন
নিম্নলিখিত বিষয়বস্তু দিয়ে a2ui_agent/resources.py ফাইলটি তৈরি করুন। এই টুলটি ক্লাউড রিসোর্সগুলোর একটি তালিকা তাদের স্ট্যাটাসসহ ফেরত দেয়।
RESOURCES = [
{
"name": "auth-service",
"type": "Cloud Run",
"region": "us-west1",
"status": "healthy",
"cpu": "2 vCPU",
"memory": "1 GiB",
"instances": 3,
"url": "https://auth-service-abc123.run.app",
"last_deployed": "2026-04-18T14:22:00Z",
},
{
"name": "events-db",
"type": "Cloud SQL",
"region": "us-east1",
"status": "warning",
"tier": "db-custom-8-32768",
"storage": "500 GB SSD",
"connections": 195,
"version": "PostgreSQL 16",
"issue": "Storage usage at 92%",
},
{
"name": "analytics-pipeline",
"type": "Cloud Run",
"region": "us-west1",
"status": "error",
"cpu": "2 vCPU",
"memory": "4 GiB",
"instances": 0,
"url": "https://analytics-pipeline-ghi789.run.app",
"last_deployed": "2026-04-10T16:45:00Z",
"issue": "CrashLoopBackOff: OOM killed",
},
]
def get_resources() -> list[dict]:
"""Get all cloud resources in the current project.
Returns a list of cloud infrastructure resources including their
name, type, region, status, and type-specific details.
Status is one of: healthy, warning, error. Resources with
warning or error status include an 'issue' field describing
the problem.
"""
return RESOURCES
এজেন্টকে সংজ্ঞায়িত করুন
নিম্নলিখিত বিষয়বস্তু সহ a2ui_agent/agent.py ফাইলটি তৈরি করুন:
from google.adk.agents import Agent
from .resources import get_resources
root_agent = Agent(
model="gemini-3-flash-preview",
name="cloud_dashboard",
description="A cloud infrastructure assistant that reports on project resources.",
instruction=(
"You are a cloud infrastructure assistant. When users ask about their "
"cloud resources, use the get_resources tool to fetch the current state. "
"Summarize the results clearly in plain text."
),
tools=[get_resources],
)
৪. এজেন্টকে পরীক্ষা করুন
ADK-তে একটি ডেভ UI অন্তর্ভুক্ত রয়েছে, যা ব্যবহার করে আপনি পরীক্ষার জন্য ব্রাউজারে আপনার এজেন্টের সাথে ইন্টারঅ্যাক্ট করতে এবং প্রম্পট পাঠাতে পারেন।
ADK ডেভ UI শুরু করুন
আপনার ক্লাউড শেল এডিটর টার্মিনালে, ADK dev UI চালু করতে নিম্নলিখিত কমান্ডটি চালান:
adk web --port 8080 --allow_origins "*" --reload_agents
আপনি নিম্নলিখিতের অনুরূপ একটি বার্তা দেখতে পাবেন:
+-----------------------------------------------------------------------------+ | ADK Web Server started | | | | For local testing, access at http://127.0.0.1:8080. | +-----------------------------------------------------------------------------+
ADK ডেভ UI খুলুন
আপনি স্থানীয় টেস্টিং URL-এ Ctrl বা Cmd ক্লিক করে, অথবা Web Preview বোতামে ক্লিক করে এবং Port 8080-এ Preview নির্বাচন করে আপনার ব্রাউজারে ADK dev UI খুলতে পারেন।
ADK ডেভ UI দেখার সময়, ড্রপ-ডাউন মেনু থেকে a2ui_agent নির্বাচন করুন।
নমুনা প্রম্পট পাঠান
এজেন্টকে একটি নমুনা প্রম্পট পাঠান:
What's running in my project?
এখন আরেকটি নমুনা প্রম্পট চেষ্টা করুন এবং আপনি আরও টেক্সট আউটপুট পাবেন:
Does anything need my attention?
আপনার কথোপকথনটি নিম্নলিখিতের অনুরূপ হওয়া উচিত:
আপনি বিশাল এক লেখা দেখতে পাবেন। তথ্যগুলো নির্ভুল, কিন্তু ব্যবহারকারীর অভিজ্ঞতা খুব একটা ভালো নয়।
৫. A2UI JSON তৈরি করুন
এজেন্ট যদি শুধু টেক্সট দেখানোর পরিবর্তে একটি UI বর্ণনা করতে পারত, তাহলে কেমন হতো? A2UI হলো এমন একটি প্রোটোকল যা এজেন্টদের ১৮টি প্রিমিটিভের একটি ক্যাটালগ থেকে ইন্টারেক্টিভ ইন্টারফেস তৈরি করতে দেয়। ক্লায়েন্ট সেগুলোকে নেটিভভাবে রেন্ডার করে।
A2UI পাইথন SDK-তে একটি স্কিমা ম্যানেজার অন্তর্ভুক্ত রয়েছে যা আপনার জন্য সিস্টেম প্রম্পট তৈরি করে। এটি LLM-কে সম্পূর্ণ A2UI কম্পোনেন্ট ক্যাটালগ, সঠিক প্রপার্টির নাম ও টাইপ এবং JSON কাঠামো শেখায়।
এজেন্টকে আপডেট করুন
a2ui_agent/agent.py ফাইলের বিষয়বস্তু নিম্নলিখিত দ্বারা প্রতিস্থাপন করুন:
from google.adk.agents import Agent
from a2ui.schema.manager import A2uiSchemaManager
from a2ui.basic_catalog.provider import BasicCatalog
from .resources import get_resources
schema_manager = A2uiSchemaManager(
version="0.8",
catalogs=[BasicCatalog.get_config("0.8")],
)
instruction = schema_manager.generate_system_prompt(
role_description=(
"You are a cloud infrastructure assistant. When users ask about "
"their cloud resources, use the get_resources tool to fetch the "
"current state."
),
workflow_description=(
"Analyze the user's request and return structured UI when appropriate."
),
ui_description=(
"Use cards for resource summaries, rows and columns for comparisons, "
"icons for status indicators, and buttons for drill-down actions. "
"Do NOT use markdown formatting in text values. Use the usageHint "
"property for heading levels instead. "
"Respond ONLY with the A2UI JSON array. Do NOT include any text "
"outside the JSON. Put all explanations into Text components."
),
include_schema=True,
include_examples=True,
)
root_agent = Agent(
model="gemini-3-flash-preview",
name="cloud_dashboard",
description="A cloud infrastructure assistant that renders rich A2UI interfaces.",
instruction=instruction,
tools=[get_resources],
)
` generate_system_prompt() ` মেথডটি আপনার রোলের বিবরণকে সম্পূর্ণ A2UI JSON স্কিমা এবং কয়েকটি উদাহরণের সাথে একত্রিত করে, ফলে LLM ঠিকভাবে জানতে পারে যে এর আউটপুট কীভাবে ফরম্যাট করতে হবে। আপনাকে কম্পোনেন্ট ক্যাটালগটি হাতে লিখে তৈরি করতে হবে না।
৬. JSON আউটপুট পরীক্ষা করুন
আপনার যদি আগের ADK ডেভ UI এখনও চালু থাকে, তাহলে এটি আপনার এজেন্টে করা পরিবর্তনগুলো স্বয়ংক্রিয়ভাবে পুনরায় লোড করে দেবে।
a2ui_agent নির্বাচন করুন, ADK dev UI-এর উপরের ডানদিকে থাকা +New Session- এ ক্লিক করে একটি নতুন সেশন শুরু করুন, তারপর আগের মতো একই প্রম্পট পাঠান:
What's running in my project?
এবার এজেন্ট সাধারণ টেক্সটের পরিবর্তে A2UI JSON দিয়ে সাড়া দেয়। আপনি চ্যাট আউটপুটে beginRendering , surfaceUpdate , এবং dataModelUpdate সম্বলিত কাঠামোগত বার্তা দেখতে পাবেন।
JSON-টিতে কার্ড, আইকন এবং বাটনসহ একটি সমৃদ্ধ UI-এর বর্ণনা রয়েছে, কিন্তু adk web এটিকে সাধারণ টেক্সট হিসেবে প্রদর্শন করে। পরবর্তী ধাপে, আপনি এটিকে প্রকৃত UI কম্পোনেন্ট হিসেবে রেন্ডার করবেন।
৭. A2UI বুঝুন
আপনার এজেন্ট এইমাত্র যে JSON তৈরি করেছে তা দেখুন। আপনি লক্ষ্য করবেন যে এতে তিন ধরনের বার্তা রয়েছে। প্রতিটি A2UI প্রতিক্রিয়া এই একই কাঠামো অনুসরণ করে:
১. রেন্ডারিং শুরু করুন
একটি রেন্ডারিং সারফেস তৈরি করে এবং রুট কম্পোনেন্টের নামকরণ করে:
{"beginRendering": {"surfaceId": "default", "root": "main-column"}}
২. পৃষ্ঠতল আপডেট
কম্পোনেন্ট ট্রি-কে আইডি রেফারেন্স সহ একটি ফ্ল্যাট তালিকা হিসাবে পাঠায় (নেস্টেড নয়):
{"surfaceUpdate": {"surfaceId": "default", "components": [
{"id": "main-column", "component": {"Column": {"children": {"explicitList": ["title", "card1"]}}}},
{"id": "title", "component": {"Text": {"text": {"literalString": "My Resources"}, "usageHint": "h1"}}},
{"id": "card1", "component": {"Card": {"child": "card1-content"}}},
{"id": "card1-content", "component": {"Text": {"text": {"path": "service_name"}}}}
]}}
৩. ডেটা মডেল আপডেট
কাঠামো থেকে ডেটা আলাদাভাবে পাঠায়:
{"dataModelUpdate": {"surfaceId": "default", "contents": [
{"key": "service_name", "valueString": "auth-service"},
{"key": "status", "valueString": "healthy"}
]}}
কম্পোনেন্টগুলো {"path": "key"} ব্যবহার করে ডেটার সাথে সংযুক্ত হয়। আপনি কম্পোনেন্ট ট্রি পুনরায় না পাঠিয়েই ডেটা আপডেট করতে পারেন।
১৮ জন আদিম মানুষ
বিভাগ | উপাদান |
লেআউট | কার্ড, কলাম, সারি, তালিকা, ট্যাব, বিভাজক, মোডাল |
প্রদর্শন | টেক্সট, ছবি, আইকন, ভিডিও, অডিওপ্লেয়ার |
ইনপুট | টেক্সটফিল্ড, ডেটটাইমইনপুট, মাল্টিপলচয়েস, চেকবক্স, স্লাইডার |
পদক্ষেপ | বোতাম |
এজেন্ট একই ক্যাটালগ থেকে বিভিন্ন লেআউট তৈরি করে। প্রতিটি প্রিমিটিভের সম্পূর্ণ বিবরণের জন্য কম্পোনেন্ট রেফারেন্স দেখুন। একটি ব্রাউজ ভিউ, একটি প্রায়োরিটি ড্যাশবোর্ড এবং একটি কনফিগারেশন ফর্ম—এই সবগুলোই একই ১৮টি প্রিমিটিভ ব্যবহার করে। কোনো নতুন ফ্রন্টএন্ড কম্পোনেন্টের প্রয়োজন নেই।
৮. A2UI উপাদানগুলো রেন্ডার করুন
এজেন্টটি বৈধ A2UI JSON তৈরি করে, কিন্তু adk web এটিকে সাধারণ টেক্সট হিসেবে প্রদর্শন করে। এটিকে প্রকৃত UI কম্পোনেন্ট হিসেবে রেন্ডার করার জন্য, আপনার একটি ছোট ইউটিলিটি প্রয়োজন যা এজেন্টের A2UI JSON আউটপুটকে adk web এর বিল্ট-ইন রেন্ডারারের প্রত্যাশিত ফরম্যাটে রূপান্তর করে।
A2UI রেন্ডারিং ইউটিলিটি তৈরি করুন
নিম্নলিখিত বিষয়বস্তু সহ a2ui_agent/a2ui_utils.py ফাইলটি তৈরি করুন:
import json
import re
from google.genai import types
from google.adk.agents.callback_context import CallbackContext
from google.adk.models.llm_response import LlmResponse
def _wrap_a2ui_part(a2ui_message: dict) -> types.Part:
"""Wrap a single A2UI message for rendering in adk web."""
datapart_json = json.dumps({
"kind": "data",
"metadata": {"mimeType": "application/json+a2ui"},
"data": a2ui_message,
})
blob_data = (
b"<a2a_datapart_json>"
+ datapart_json.encode("utf-8")
+ b"</a2a_datapart_json>"
)
return types.Part(
inline_data=types.Blob(
data=blob_data,
mime_type="text/plain",
)
)
def a2ui_callback(
callback_context: CallbackContext,
llm_response: LlmResponse,
) -> LlmResponse | None:
"""Convert A2UI JSON in text output to rendered components."""
if not llm_response.content or not llm_response.content.parts:
return None
for part in llm_response.content.parts:
if not part.text:
continue
text = part.text.strip()
if not text:
continue
if not any(k in text for k in ("beginRendering", "surfaceUpdate", "dataModelUpdate")):
continue
# Strip markdown fences
if text.startswith("```"):
text = text.split("\n", 1)[-1]
if text.endswith("```"):
text = text[:-3].strip()
# Find where JSON starts (skip conversational prefix)
json_start = None
for i, ch in enumerate(text):
if ch in ("[", "{"):
json_start = i
break
if json_start is None:
continue
json_text = text[json_start:]
# raw_decode parses JSON and ignores trailing text
try:
parsed, _ = json.JSONDecoder().raw_decode(json_text)
except json.JSONDecodeError:
# Handle concatenated JSON objects: {"a":1} {"b":2}
try:
fixed = "[" + re.sub(r'\}\s*\{', '},{', json_text) + "]"
parsed, _ = json.JSONDecoder().raw_decode(fixed)
except json.JSONDecodeError:
continue
if not isinstance(parsed, list):
parsed = [parsed]
a2ui_keys = {"beginRendering", "surfaceUpdate", "dataModelUpdate", "deleteSurface"}
a2ui_messages = [msg for msg in parsed if isinstance(msg, dict) and any(k in msg for k in a2ui_keys)]
if not a2ui_messages:
continue
new_parts = [_wrap_a2ui_part(msg) for msg in a2ui_messages]
return LlmResponse(
content=types.Content(role="model", parts=new_parts),
custom_metadata={"a2a:response": "true"},
)
return None
এই ইউটিলিটিটি দুটি কাজ করে:
- এজেন্টের টেক্সট আউটপুট থেকে A2UI JSON বের করে।
- প্রতিটি A2UI মেসেজকে সেই ফরম্যাটে মোড়কজাত করে যা
adk webএর বিল্ট-ইন A2UI রেন্ডারার প্রত্যাশা করে।
এজেন্টকে আপডেট করুন
a2ui_agent/agent.py ফাইলের বিষয়বস্তু নিম্নলিখিত কোড দিয়ে প্রতিস্থাপন করুন। পূর্ববর্তী ধাপ থেকে একমাত্র পরিবর্তন হলো a2ui_callback এর ইম্পোর্ট এবং এজেন্টের after_model_callback প্যারামিটারটি যোগ করা:
from google.adk.agents import Agent
from a2ui.schema.manager import A2uiSchemaManager
from a2ui.basic_catalog.provider import BasicCatalog
from .resources import get_resources
from .a2ui_utils import a2ui_callback
schema_manager = A2uiSchemaManager(
version="0.8",
catalogs=[BasicCatalog.get_config("0.8")],
)
instruction = schema_manager.generate_system_prompt(
role_description=(
"You are a cloud infrastructure assistant. When users ask about "
"their cloud resources, use the get_resources tool to fetch the "
"current state."
),
workflow_description=(
"Analyze the user's request and return structured UI when appropriate."
),
ui_description=(
"Use cards for resource summaries, rows and columns for comparisons, "
"icons for status indicators, and buttons for drill-down actions. "
"Do NOT use markdown formatting in text values. Use the usageHint "
"property for heading levels instead. "
"Respond ONLY with the A2UI JSON array. Do NOT include any text "
"outside the JSON. Put all explanations into Text components."
),
include_schema=True,
include_examples=True,
)
root_agent = Agent(
model="gemini-3-flash-preview",
name="cloud_dashboard",
description="A cloud infrastructure assistant that renders rich A2UI interfaces.",
instruction=instruction,
tools=[get_resources],
after_model_callback=a2ui_callback,
)
৯. রেন্ডার করা UI পরীক্ষা করুন
আপনার যদি আগের ADK ডেভ UI এখনও চালু থাকে, তাহলে এটি আপনার এজেন্টে করা পরিবর্তনগুলো স্বয়ংক্রিয়ভাবে পুনরায় লোড করে দেবে।
ব্রাউজার ট্যাবটি রিফ্রেশ করুন, a2ui_agent নির্বাচন করুন, তারপর ADK dev UI-এর উপরের ডানদিকে থাকা +New Session- এ ক্লিক করে একটি নতুন সেশন শুরু করুন এবং আগের মতো একই প্রম্পট পাঠান:
What's running in my project?
এবার, adk web A2UI কম্পোনেন্টগুলোকে প্রকৃত UI হিসেবে রেন্ডার করে: স্ট্যাটাস ইন্ডিকেটর, রিসোর্সের বিবরণ এবং অ্যাকশন বাটনসহ কার্ড।
এজেন্ট কীভাবে একই প্রিমিটিভ সেট থেকে একটি ভিন্ন UI তৈরি করে তা দেখতে একটি ভিন্ন প্রম্পট ব্যবহার করে দেখুন:
Does anything need my attention?
অবশেষে, একটি নতুন পরিষেবা স্থাপন করতে ভিন্ন একটি UI তৈরি করার জন্য অন্য একটি প্রম্পট চেষ্টা করুন:
I need to deploy a new service
প্রতিটি প্রম্পট একই এজেন্ট, একই টুল এবং একই ১৮টি প্রিমিটিভের কাছে যায়। কিন্তু প্রতিটি প্রম্পট ভিন্ন ভিন্ন ইনটেন্টের জন্য ভিন্ন ভিন্ন UI তৈরি করে।
১০. পরিষ্কার করা
স্থানীয় সার্ভারগুলো চালু থাকা এড়াতে, রিসোর্সগুলো পরিষ্কার করুন:
- টার্মিনালে
adk webচালানোর সময়, এজেন্ট সার্ভারটি বন্ধ করতে Ctrl+C চাপুন।
আপনি যদি বিশেষভাবে এই কোডল্যাবের জন্য একটি প্রজেক্ট তৈরি করে থাকেন, তাহলে আপনি সম্পূর্ণ প্রজেক্টটি মুছে ফেলতে পারেন:
gcloud projects delete ${GOOGLE_CLOUD_PROJECT}
১১. অভিনন্দন
আপনি A2UI ব্যবহার করে একটি ADK এজেন্ট তৈরি করেছেন যা সমৃদ্ধ ও ইন্টারেক্টিভ UI জেনারেট করে।
আপনি যা শিখেছেন
- A2UI হলো একটি প্রোটোকল, যাতে ১৮টি ডিক্লারেটিভ প্রিমিটিভ এবং ৩ ধরনের মেসেজ রয়েছে।
- A2UI SDK সিস্টেম প্রম্পট তৈরি করে যা LLM-কে কম্পোনেন্ট ক্যাটালগ শেখায়।
- একই এজেন্ট, টুল এবং প্রিমিটিভ ব্যবহার করে ভিন্ন ভিন্ন ইন্টেন্টের জন্য আলাদা আলাদা UI তৈরি করা হয়।
- ডেভেলপমেন্টের সময় A2UI কম্পোনেন্টগুলো সরাসরি
adk webরেন্ডার করা যায়।
একটি প্রোডাকশন ফ্রন্টএন্ড তৈরি করুন
এই কোডল্যাবে, আপনি ডেভেলপমেন্ট এবং টেস্টিংয়ের জন্য adk web ভিতরে A2UI রেন্ডার করেছেন।
প্রোডাকশনের জন্য, আপনাকে A2UI-এর অফিসিয়াল রেন্ডারারগুলোর মধ্যে একটি ব্যবহার করে একটি ফ্রন্টএন্ড তৈরি করতে হবে:
প্ল্যাটফর্ম | রেন্ডারার | ইনস্টল করুন |
ওয়েব (রিঅ্যাক্ট) | | |
ওয়েব (সাহিত্য) | | |
ওয়েব (অ্যাঙ্গুলার) | | |
মোবাইল/ডেস্কটপ | ফ্লাটার জেনইউআই এসডিকে |