Code Velocity
மேம்பாட்டாளர் கருவிகள்

Bedrock AgentCore: React இல் நேரடி AI உலாவி முகவரை உட்பொதித்தல்

·5 நிமிட வாசிப்பு·AWS·அசல் மூலம்
பகிர்
ஒரு React பயன்பாட்டில் நேரடி AI உலாவி முகவரை உட்பொதிப்பதற்கான தரவுப் பாய்வைக் காட்டும் Amazon Bedrock AgentCore கட்டமைப்பு வரைபடம்.

Bedrock AgentCore: React இல் நேரடி AI உலாவி முகவரை உட்பொதித்தல்

மறைக்கப்பட்ட 'கருப்புப் பெட்டிகளாக' செயல்படும் AI முகவர்களின் சகாப்தம் விரைவாக முடிவுக்கு வருகிறது. செயற்கை நுண்ணறிவு பெருகிய முறையில் சிக்கலான மற்றும் தன்னாட்சிப் பணிகளை, குறிப்பாக இணைய சூழல்களில் மேற்கொள்வதால், வெளிப்படைத்தன்மை, நம்பிக்கை மற்றும் பயனர் கட்டுப்பாடு ஆகியவற்றிற்கான தேவை முன்னெப்போதையும் விட அதிகமாக உள்ளது. பயனர்கள் ஒரு AI முகவர் தங்கள் சார்பாக எடுக்கும் செயல்களைப் புரிந்துகொண்டு சரிபார்க்க வேண்டும், குறிப்பாக அந்த செயல்களில் வலைத்தளங்களுக்குச் செல்வது, முக்கியமான தரவுகளுடன் தொடர்புகொள்வது அல்லது முக்கியமான பணிப்பாய்வுகளை செயல்படுத்துவது ஆகியவை அடங்கும் போது.

இந்த அடிப்படை சவாலை எதிர்கொள்ளும் வகையில், Amazon Web Services ஒரு சக்திவாய்ந்த தீர்வை அறிமுகப்படுத்துகிறது: Amazon Bedrock AgentCore BrowserLiveView கூறு. இந்த புதுமையான கருவி மேம்பாட்டாளர்களுக்கு ஒரு AI முகவரின் உலாவல் அமர்வின் நேரடி, நிகழ்நேர வீடியோ ஊக்கத்தை அவர்களின் React பயன்பாடுகளுக்குள் நேரடியாக உட்பொதிக்க உதவுகிறது. இந்த ஒருங்கிணைப்பு முகவரின் நடத்தையை வெளிப்படுத்துவது மட்டுமல்லாமல், பயனர்களுக்கு முன் எப்போதும் இல்லாத தெரிவுநிலையையும், ஒரு முக்கியமான கட்டுப்பாட்டு உணர்வையும் வழங்குகிறது.

Bedrock AgentCore TypeScript SDK இன் ஒரு பகுதியாக, BrowserLiveView கூறு சில வரிகள் JavaScript XML (JSX) மூலம் உங்கள் பயன்பாட்டில் நேரடி உலாவி ஸ்ட்ரீம்களை ஒருங்கிணைப்பதை எளிதாக்குகிறது. உயர்-செயல்திறன் கொண்ட Amazon DCV நெறிமுறையைப் பயன்படுத்தி, இது முகவரின் அமர்வை வழங்குகிறது, பாரம்பரியமாக மறைக்கப்பட்ட ஒரு செயல்முறையை காட்சிரீதியாக சரிபார்க்கக்கூடிய அனுபவமாக மாற்றுகிறது. இந்த கட்டுரை, ஒரு அமர்வைத் தொடங்குவது மற்றும் நேரடிப் பார்வை URL ஐ உருவாக்குவது முதல், உங்கள் React பயன்பாட்டில் ஸ்ட்ரீமை வழங்குவது, இறுதியாக, உங்கள் பயனர்கள் பார்க்கும்போது உலாவியை இயக்க ஒரு AI முகவரை இணைப்பது வரையிலான செயல்முறையின் மூலம் உங்களுக்கு வழிகாட்டும்.

BrowserLiveView உடன் AI முகவரின் வெளிப்படைத்தன்மையை மேம்படுத்துதல்

இன்றைய வேகமாக வளர்ந்து வரும் முகவர் AI உலகில், இணைய உலாவல் பணிகளை AI முகவர்களுக்கு ஒப்படைக்கும் திறன் மிகப்பெரிய செயல்திறன் ஆதாயங்களை உறுதியளிக்கிறது. இருப்பினும், இந்த வாக்குறுதி பெரும்பாலும் முகவரின் நம்பகத்தன்மை, துல்லியம் மற்றும் பாதுகாப்பு பற்றிய கவலைகளால் மட்டுப்படுத்தப்படுகிறது. ஒரு முகவரின் செயல்பாடுகளில் தெளிவான பார்வை இல்லாமல், பயனர்கள் கவனிக்க முடியாத ஒரு அமைப்பை நம்பவேண்டிய நிலை உள்ளது, இது தத்தெடுப்பைத் தடுக்கலாம் மற்றும் முக்கியமான சூழ்நிலைகளில் பயன்படுத்தப்படுவதைக் கட்டுப்படுத்தலாம்.

BrowserLiveView கூறு, AI முகவரின் "கண்களை" பயனர் முன் திறப்பதன் மூலம் இந்த சவாலை நேரடியாக எதிர்கொள்கிறது. ஒரு AI முகவர் ஒரு சிக்கலான ஆன்லைன் படிவத்தை நிரப்புவது அல்லது பல வலைத்தளங்களிலிருந்து குறிப்பிட்ட தகவலைப் பெறுவது போன்ற ஒரு பணியை மேற்கொள்வதாக கற்பனை செய்து பாருங்கள். பாரம்பரியமாக, பயனர் இறுதி வெளியீடு அல்லது செயல்களின் சுருக்கத்தை மட்டுமே பெறுவார், இடைநிலை படிகளைப் பற்றி ஆச்சரியப்பட வைப்பார். உட்பொதிக்கப்பட்ட நேரடிப் பார்வையுடன், முகவர் அதைச் செய்யும்போது ஒவ்வொரு வழிசெலுத்தல், படிவ சமர்ப்பிப்பு மற்றும் தேடல் வினவலையும் பயனர்கள் நிகழ்நேரத்தில் பின்தொடரலாம்.

இந்த உடனடி காட்சி உறுதிப்படுத்தல் விலைமதிப்பற்றது. முகவர் சரியான பக்கத்தில் இருப்பதாகவும், சரியான கூறுகளைக் கையாள்கிறார் என்றும், எதிர்பார்த்தபடி பணிப்பாய்வு மூலம் முன்னேறுகிறார் என்றும் இது பயனர்களுக்கு உறுதியளிக்கிறது. இந்த நிகழ்நேர பின்னூட்ட சுழற்சி வெறும் உரை உறுதிப்படுத்தல்களைத் தாண்டியது; இது முகவரின் நடத்தைக்கான ஒரு உறுதியான, சரிபார்க்கக்கூடிய தணிக்கை தடத்தை வழங்குகிறது, இது அதிக நம்பிக்கையையும் உறுதியையும் வளர்க்கிறது. ஒழுங்குபடுத்தப்பட்ட அல்லது முக்கியமான வாடிக்கையாளர் தரவுகளை உள்ளடக்கிய பணிப்பாய்வுகளுக்கு, இந்த காட்சிச் சான்றுகள் இணக்கம் மற்றும் பொறுப்புக்கூறலுக்கு முக்கியமானதாக இருக்கும். மேலும், மனித மேற்பார்வை தேவைப்படும் சூழ்நிலைகளில், ஒரு மேற்பார்வையாளர் முகவரின் செயல்களை பயன்பாட்டிற்குள் நேரடியாகக் கவனிக்கலாம், தேவைப்பட்டால் தலையிடலாம், ஓட்டத்தைத் தொந்தரவு செய்யாமல்.

நிகழ்நேர முகவர் கண்காணிப்பின் பின்னணியில் உள்ள கட்டமைப்பு

Amazon Bedrock AgentCore ஆல் இயங்கும் ஒரு React பயன்பாட்டிற்குள் ஒரு நேரடி AI உலாவி முகவரின் தடையற்ற ஒருங்கிணைப்பு, மூன்று முக்கிய கூறுகளைக் கொண்ட ஒரு அதிநவீன மற்றும் திறமையான கட்டமைப்பு மூலம் ஒருங்கிணைக்கப்படுகிறது. இந்த பகுதிகளுக்கு இடையிலான தொடர்புகளைப் புரிந்துகொள்வது வெற்றிகரமான செயல்படுத்தல் மற்றும் வரிசைப்படுத்தலுக்கு முக்கியமானது.

கூறுகட்டமைப்பில் பங்குமுக்கிய தொழில்நுட்பங்கள்/நெறிமுறைகள்
பயனரின் வலை உலாவிBrowserLiveView கூறுகளைக் கொண்ட React பயன்பாட்டை இயக்குகிறது; DCV ஸ்ட்ரீமைப் பெற ஒரு WebSocket இணைப்பை நிறுவுகிறது; வீடியோ ரெண்டரிங்கைக் கையாளுகிறது.React, BrowserLiveView கூறு, WebSocket, Amazon DCV
பயன்பாட்டு சேவையகம்AI முகவராக செயல்படுகிறது; இணைப்புகளை ஒருங்கிணைக்கிறது; Bedrock AgentCore API வழியாக அமர்வுகளைத் தொடங்குகிறது; SigV4-முன் கையொப்பமிடப்பட்ட URL களை உருவாக்குகிறது; அமர்வு மேலாண்மை மற்றும் அங்கீகாரத்தைக் கையாளுகிறது.Node.js (அல்லது ஒத்த), Amazon Bedrock AgentCore API, SigV4 URL கள், REST, AI மாதிரி தர்க்கம்
AWS கிளவுட் (Bedrock AgentCore & சேவைகள்)தனிமைப்படுத்தப்பட்ட கிளவுட் உலாவி அமர்வுகளை ஹோஸ்ட் செய்கிறது; உலாவி தானியங்குபடுத்தும் எண்ட்பாயிண்டை வழங்குகிறது (Playwright CDP வழியாக); நேரடிப் பார்வை ஸ்ட்ரீமிங் எண்ட்பாயிண்டை வழங்குகிறது (DCV).Amazon Bedrock AgentCore, Amazon Bedrock, Playwright CDP, Amazon DCV

பயனரின் வலை உலாவியுடன் தொடர்பு தொடங்குகிறது, இது உங்கள் React பயன்பாட்டை இயக்குகிறது. இந்த பயன்பாட்டில், BrowserLiveView கூறு வழங்கப்படுகிறது, ஒரு பாதுகாப்பான, நேரம்-வரையறுக்கப்பட்ட SigV4-முன் கையொப்பமிடப்பட்ட URL க்காகக் காத்திருக்கிறது. உங்கள் பயன்பாட்டு சேவையகத்தால் உருவாக்கப்பட்ட இந்த URL, AWS கிளவுட்டில் உள்ள Bedrock AgentCore சேவைக்கு நேரடியாக ஒரு நிரந்தர WebSocket இணைப்பை நிறுவுவதற்கான திறவுகோலாகும்.

உங்கள் பயன்பாட்டு சேவையகம் இரட்டை நோக்கத்திற்காக செயல்படுகிறது: இது AI முகவரின் தர்க்கத்தை ஹோஸ்ட் செய்கிறது மற்றும் அமர்வு மேலாண்மைக்கான ஒரு இடைத்தரகராக செயல்படுகிறது. இது உலாவி அமர்வுகளைத் தொடங்க Amazon Bedrock AgentCore API ஐ அழைக்கிறது, பின்னர் உங்கள் கிளையன்ட் உலாவிக்கு நேரடிப் பார்வை ஸ்ட்ரீமை அணுக அனுமதிக்கும் SigV4-முன் கையொப்பமிடப்பட்ட URL களைப் பாதுகாப்பாக உருவாக்குகிறது. மிக முக்கியமாக, உங்கள் சேவையகம் முகவரின் செயல்களை ஒருங்கிணைத்து தேவையான சான்றுகளை உருவாக்கும்போது, அது வீடியோ ஸ்ட்ரீமை நேரடியாகக் கையாள்வது இல்லை.

உலாவி தானியங்குபடுத்துதல் மற்றும் வீடியோ ஸ்ட்ரீமிங் ஆகியவற்றின் கடினமான பணி AWS கிளவுட்டில் நடைபெறுகிறது. Amazon Bedrock AgentCore தனிமைப்படுத்தப்பட்ட கிளவுட் உலாவி அமர்வுகளை ஹோஸ்ட் செய்கிறது, இது தானியங்குபடுத்துதல் எண்ட்பாயிண்ட்—உங்கள் AI முகவர் Playwright Chrome DevTools Protocol (CDP) ஐப் பயன்படுத்தி தொடர்பு கொள்கிறார்—மற்றும் Amazon DCV ஆல் இயங்கும் நேரடிப் பார்வை ஸ்ட்ரீமிங் எண்ட்பாயிண்ட் ஆகிய இரண்டையும் வழங்குகிறது. இந்த வடிவமைப்பு DCV நேரடிப் பார்வை ஸ்ட்ரீம் Amazon Bedrock AgentCore இலிருந்து பயனர் உலாவிக்கு நேரடியாகப் பாய்வதை உறுதி செய்கிறது. இந்த நேரடி WebSocket இணைப்பு உங்கள் பயன்பாட்டு சேவையகத்தைத் தவிர்த்து, தாமதத்தைக் குறைக்கிறது, உங்கள் உள்கட்டமைப்பு ஓவர்ஹெட்டைக் குறைக்கிறது மற்றும் மென்மையான, நிகழ்நேர பார்க்கும் அனுபவத்தை உறுதி செய்கிறது.

உங்கள் நேரடி AI முகவரை வரிசைப்படுத்துவதற்கான முன்நிபந்தனைகள்

உங்கள் நேரடி AI உலாவி முகவரை செயல்படுத்துவதற்கு முன், உங்கள் மேம்பாட்டுச் சூழல் சரியாக உள்ளமைக்கப்பட்டுள்ளதையும், உங்களுக்குத் தேவையான AWS ஆதாரங்கள் மற்றும் அனுமதிகள் உள்ளதா என்பதையும் உறுதிப்படுத்துவது அவசியம். இந்த முன்நிபந்தனைகளை கடைபிடிப்பது உங்கள் மேம்பாட்டு செயல்முறையை ஒழுங்குபடுத்தும் மற்றும் பாதுகாப்பான செயல்பாட்டு நிலையைப் பராமரிக்க உதவும்.

  1. Node.js சூழல்: உங்கள் பயன்பாட்டின் சேவையக-பக்க கூறுகளை இயக்க உங்கள் கணினியில் Node.js பதிப்பு 20 அல்லது அதற்குப் பிந்தைய பதிப்பு நிறுவப்பட்டிருக்க வேண்டும்.
  2. AWS கணக்கு மற்றும் பிராந்தியம்: Amazon Bedrock AgentCore கிடைக்கக்கூடிய ஆதரிக்கப்படும் AWS பிராந்தியத்தை அணுகலுடன் ஒரு செயலில் உள்ள AWS கணக்கு தேவை.
  3. AWS சான்றுகள் மற்றும் அனுமதிகள்: உங்கள் AWS சான்றுகள் பொருத்தமான Amazon Bedrock AgentCore உலாவி அனுமதிகளை கொண்டிருக்க வேண்டும். AWS அடையாள மற்றும் அணுகல் மேலாண்மை (IAM) அனுமதிகளை உள்ளமைக்கும்போது குறைந்த சலுகைக் கொள்கையைப் பின்பற்றுவது மிக முக்கியம். மேம்பட்ட பாதுகாப்பிற்காக, AWS IAM Identity Center அல்லது AWS பாதுகாப்பு டோக்கன் சேவை (AWS STS) இலிருந்து பெறப்பட்ட தற்காலிக சான்றுகளை எப்போதும் பயன்படுத்துங்கள், நீண்ட காலம் நீடிக்கும் அணுகல் விசைகளைத் தவிர்க்கவும்.
  4. AI மாதிரி அணுகல்: முகவரை இயக்க ஒரு AI மாதிரியைப் பயன்படுத்த நீங்கள் திட்டமிட்டால் (Anthropic Claude உடன் Amazon Bedrock Converse API ஐப் பயன்படுத்தும் மாதிரியில் காட்டப்பட்டுள்ளபடி), அந்த குறிப்பிட்ட மாதிரி மற்றும் அதனுடன் தொடர்புடைய AWS Bedrock அனுமதிகளுக்கான அணுகல் உங்களுக்குத் தேவைப்படும். இருப்பினும், நேரடிப் பார்வை மாதிரி-சார்பற்றது என்பதை நினைவில் கொள்ளுங்கள், இது உங்களுக்கு விருப்பமான எந்த மாதிரி வழங்குநர் அல்லது முகவர் கட்டமைப்பையும் ஒருங்கிணைக்க அனுமதிக்கிறது.
  5. SDK நிறுவல்கள்:
    • AgentCore உடன் தொடர்பு கொள்ள bedrock-agentcore TypeScript SDK ஐ நிறுவவும்:
      npm install bedrock-agentcore
      
    • உங்கள் AI மாதிரிக்கு AWS Bedrock ஐப் பயன்படுத்தினால், JavaScript க்கான AWS SDK ஐ நிறுவவும்:
      npm install @aws-sdk/client-bedrock-runtime
      

நேரடிப் பார்வையை செயல்படுத்துவதற்கான குறியீடு அடிப்படை பொதுவாகப் பிரிக்கப்பட்டுள்ளது: சேவையக-பக்க குறியீடு (அமர்வு மேலாண்மை மற்றும் AI முகவர் தர்க்கத்திற்காக) Node.js இல் இயங்குகிறது, மற்றும் கிளையன்ட்-பக்க குறியீடு (நேரடிப் பார்வையை வழங்குவதற்காக) ஒரு React பயன்பாட்டிற்குள் இயங்குகிறது, பெரும்பாலும் Vite போன்ற கருவிகளுடன் தொகுக்கப்படுகிறது.

படிமுறை ஒருங்கிணைப்பு: அமர்வில் இருந்து ஸ்ட்ரீம் வரை

Amazon Bedrock AgentCore உடன் ஒரு நேரடி AI உலாவி முகவரை ஒருங்கிணைப்பது ஒரு தெளிவான, மூன்று-படி செயல்முறையை உள்ளடக்கியது, இது உங்கள் சேவையக-பக்க தர்க்கத்தை உங்கள் கிளையன்ட்-பக்க React பயன்பாடு மற்றும் AWS கிளவுட்டின் வலுவான திறன்களுடன் இணைக்கிறது.

1. ஒரு உலாவி அமர்வைத் தொடங்குதல் மற்றும் நேரடிப் பார்வை URL ஐ உருவாக்குதல்

முதல் படி உங்கள் பயன்பாட்டு சேவையகத்தில் நடைபெறுகிறது. இது உங்கள் பின்தள தர்க்கம் Amazon Bedrock AgentCore இல் ஒரு உலாவி அமர்வைத் தொடங்கி, நேரடிப் பார்வையை ஸ்ட்ரீம் செய்ய தேவையான URL ஐ பாதுகாப்பாகப் பெறும் இடம்.

bedrock-agentcore SDK இலிருந்து Browser வகுப்பைப் பயன்படுத்துவீர்கள். இந்த வகுப்பு மேகக்கணியில் தனிமைப்படுத்தப்பட்ட உலாவி சூழல்களை உருவாக்குதல் மற்றும் நிர்வகித்தல் ஆகியவற்றின் சிக்கலைக் கையாளுகிறது. இந்த படியின் முக்கிய வெளியீடு ஒரு SigV4-முன் கையொப்பமிடப்பட்ட URL ஆகும், இது உலாவி அமர்வின் நேரடி வீடியோ ஸ்ட்ரீமிற்கு பாதுகாப்பான, தற்காலிக அணுகலை வழங்குகிறது.

// Example server-side code (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Initialize Bedrock AgentCore client (ensure proper AWS credentials are configured)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // Use your desired region

async function startLiveSession() {
    // Create a new browser session
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Generate the Live View URL
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Live View URL:', liveViewUrl);

    // Store browser.sessionId to later connect your AI agent or terminate the session
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// This `liveViewUrl` will be sent to your React client.

இந்த liveViewUrl உங்கள் React கிளையண்டிற்கு அனுப்பப்படும்.

2. உங்கள் React பயன்பாட்டில் நேரடிப் பார்வையை வழங்குதல்

உங்கள் React பயன்பாடு உங்கள் சேவையகத்திலிருந்து liveViewUrl ஐப் பெற்றவுடன், BrowserLiveView கூறுக்கு நன்றி, நிகழ்நேர ஸ்ட்ரீமை வழங்குவது மிகவும் எளிதானது.

// Example client-side code (React component)
import React, { useEffect, useState } from 'react';
import { BrowserLiveView } from 'bedrock-agentcore';

interface LiveAgentViewerProps {
    liveViewUrl: string;
}

const LiveAgentViewer: React.FC<LiveAgentViewerProps> = ({ liveViewUrl }) => {
    if (!liveViewUrl) {
        return <p>Waiting for Live View URL...</p>;
    }

    return (
        <div style={{ width: '100%', height: '600px', border: '1px solid #ccc' }}>
            <BrowserLiveView url={liveViewUrl} />
        </div>
    );
};

// In your main App component or page:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Fetch the liveViewUrl from your backend
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>AI Agent Live View</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

வெறும் url={liveViewUrl} உடன், BrowserLiveView கூறு WebSocket இணைப்பை நிறுவுதல், DCV ஸ்ட்ரீமைப் பயன்படுத்துதல் மற்றும் உங்கள் குறிப்பிட்ட பரிமாணங்களுக்குள் நேரடி வீடியோ ஊக்கத்தை வழங்குதல் ஆகியவற்றின் சிக்கலான விவரங்களைக் கையாளுகிறது. இந்த குறைந்தபட்ச JSX ஒருங்கிணைப்பு முன்முனை மேம்பாட்டை பெரிதும் எளிதாக்குகிறது, நேரடி முகவரைச் சுற்றியுள்ள பயனர் அனுபவத்தில் கவனம் செலுத்த உங்களை அனுமதிக்கிறது.

3. உலாவியை இயக்க ஒரு AI முகவரை இணைத்தல்

இறுதி படி உங்கள் AI முகவரின் நுண்ணறிவை தனிமைப்படுத்தப்பட்ட அமர்வுக்குள் உள்ள உண்மையான உலாவி செயல்களுடன் இணைக்கிறது. BrowserLiveView காட்சி பின்னூட்டத்தை வழங்கினாலும், உங்கள் AI முகவர் Playwright CDP (Chrome DevTools Protocol) ஐப் பயன்படுத்தி உலாவியுடன் நிரல்ரீதியாக தொடர்பு கொள்கிறது.

உங்கள் AI முகவரை ஹோஸ்ட் செய்யும் உங்கள் பயன்பாட்டு சேவையகம், உலாவி செயல்களைச் செய்ய Browser பொருளின் page பண்புக்கூறை (இது ஒரு Playwright Page பொருள்) பயன்படுத்தும்.

// Example server-side code (continued from step 1)
// Assuming you have a Playwright-like interface or direct Playwright usage
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (previous setup for browser creation) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Reconnect to existing session
    await browser.connect(); // Connect to the browser session

    const page = browser.page; // Get the Playwright Page object

    // Example AI agent logic (simplified for illustration)
    // Here you would integrate with your LLM (e.g., Anthropic Claude via Bedrock Converse API)
    // to determine actions based on user prompts and page content.
    console.log("Agent navigating to example.com...");
    await page.goto('https://www.example.com');
    console.log("Agent waited for 3 seconds...");
    await page.waitForTimeout(3000); // Simulate processing time

    console.log("Agent typing into a search box (hypothetical)...");
    // Example: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Example: await page.click('#search-button');

    const content = await page.content();
    // Use an LLM to analyze 'content' and decide next steps
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // or your preferred model
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Analyze this webpage content and suggest the next action: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("AI Model suggested action:", parsedBody.content[0].text);

    // Based on LLM's suggestion, execute further page actions...

    // Don't forget to close the browser session when done
    // await browser.close();
}

// After starting the session and getting the URL, you would then call driveAgent(sessionId)

இந்த தொடர்பு சுழற்சி—இதில் உங்கள் AI முகவர் பக்க உள்ளடக்கத்தை பகுப்பாய்வு செய்து, அடுத்த செயலை தீர்மானித்து, Playwright CDP வழியாக அதை செயல்படுத்துகிறது—இது ஒரு தன்னாட்சி உலாவல் முகவரின் மையத்தை உருவாக்குகிறது. இந்த அனைத்து செயல்களும் பயனரின் திரையில் BrowserLiveView கூறு மூலம் நிகழ்நேரத்தில் காட்சிரீதியாக வழங்கப்படுகின்றன.

உட்பொதிக்கப்பட்ட AI முகவர்களுடன் புதிய சாத்தியக்கூறுகளைத் திறத்தல்

Amazon Bedrock AgentCore இன் BrowserLiveView ஒருங்கிணைப்பு ஒரு தொழில்நுட்ப அம்சத்தை விட அதிகம்; இது பயனர்கள் AI முகவர்களுடன் எவ்வாறு தொடர்பு கொள்கிறார்கள் மற்றும் நம்புகிறார்கள் என்பதில் ஒரு கருத்தியல் மாற்றமாகும். நிகழ்நேர காட்சி பின்னூட்டத்தை உட்பொதிப்பதன் மூலம், மேம்பாட்டாளர்கள் திறமையானது மட்டுமல்லாமல், வெளிப்படையான, தணிக்கை செய்யக்கூடிய மற்றும் பயனர் நட்பு AI-ஆற்றல் பெற்ற பயன்பாடுகளை உருவாக்க முடியும்.

இந்த திறன் குறிப்பாக தொடர்புடைய பயன்பாடுகளுக்கு மாற்றியமைக்கும் தன்மை கொண்டது:

  • சிக்கலான பணிப்பாய்வுகள்: தரவு உள்ளீடு, பணியமர்த்தல் அல்லது ஒழுங்குமுறை இணக்கம் போன்ற பல-படி ஆன்லைன் செயல்முறைகளை தானியங்குபடுத்துதல், ஒவ்வொரு படிநிலையிலும் தெரிவுநிலை மிக முக்கியமானது.
  • வாடிக்கையாளர் ஆதரவு: AI துணை-விமானிகள் வாடிக்கையாளர் வினவல்களைத் தீர்ப்பது அல்லது அமைப்புகளை வழிநடத்துவது, துல்லியத்தை உறுதி செய்வது மற்றும் தலையீட்டிற்கான வாய்ப்புகளை வழங்குவது போன்றவற்றை முகவர்கள் கவனிக்க அனுமதித்தல்.
  • பயிற்சி மற்றும் பிழைத்திருத்தம்: மேம்பாட்டாளர்கள் மற்றும் இறுதிப் பயனர்களுக்கு முகவரின் நடத்தையைப் புரிந்துகொள்வதற்கும், சிக்கல்களைப் பிழைத்திருத்துவதற்கும், நேரடி கண்காணிப்பு மூலம் முகவர்களுக்குப் பயிற்சி அளிப்பதற்கும் ஒரு சக்திவாய்ந்த கருவியை வழங்குதல்.
  • மேம்படுத்தப்பட்ட தணிக்கை தடங்கள்: முகவர் செயல்களின் காட்சிப் பதிவுகளை உருவாக்குதல், இது விரிவான பிந்தைய ஆய்வு மற்றும் இணக்கத்திற்காக Amazon S3 க்கு அமர்வு பதிவுகளுடன் இணைக்கப்படலாம்.

AWS கிளவுட்டில் இருந்து கிளையன்ட் உலாவிகளுக்கு உலாவி அமர்வுகளை நேரடியாக ஸ்ட்ரீம் செய்யும் திறன், வீடியோ ஸ்ட்ரீமிற்கான பயன்பாட்டு சேவையகத்தைத் தவிர்ப்பதன் மூலம், செயல்திறன் மற்றும் அளவிடுதிறன் அடிப்படையில் குறிப்பிடத்தக்க நன்மைகளை வழங்குகிறது. இந்த கட்டமைப்பு தாமதத்தைக் குறைக்கிறது மற்றும் உங்கள் பின்தள உள்கட்டமைப்பின் சுமையைக் குறைக்கிறது, இது மிகவும் பதிலளிக்கக்கூடிய மற்றும் அளவிடக்கூடிய AI முகவர் தீர்வுகளை வரிசைப்படுத்த உங்களை அனுமதிக்கிறது.

BrowserLiveView ஐ ஏற்றுக்கொள்வதன் மூலம், நீங்கள் வெறும் AI முகவர்களை உருவாக்குவது மட்டுமல்லாமல்; நம்பிக்கை, கட்டுப்பாடு மற்றும் ஒரு செழுமையான பயனர் அனுபவத்தையும் உருவாக்குகிறீர்கள். சாத்தியக்கூறுகளை ஆராய்ந்து, சிக்கலான வலைப் பணிகளை அறிவார்ந்த முகவர்களுக்கு ஒப்படைக்கும் நம்பிக்கையை உங்கள் பயனர்களுக்கு வழங்குங்கள்.

அடிக்கடி கேட்கப்படும் கேள்விகள்

What is the Amazon Bedrock AgentCore BrowserLiveView component and how does it function?
The Amazon Bedrock AgentCore BrowserLiveView component is a crucial part of the Bedrock AgentCore TypeScript SDK, designed to embed a real-time video feed of an AI agent's browsing session directly into a React application. It operates by receiving a SigV4-presigned URL from your application server, which then establishes a persistent WebSocket connection to stream video data via the Amazon DCV protocol from an isolated cloud browser session. This direct streaming mechanism ensures low latency and high fidelity, allowing users to observe every action an AI agent takes on a webpage, from navigation to form submissions, without the video stream passing through your server.
How does embedding Live View enhance user trust and confidence in AI agents?
Embedding Live View significantly boosts user trust and confidence by providing unparalleled transparency into an AI agent's operations. Instead of a 'black box' experience, users gain immediate visual confirmation of the agent's actions, observing its progress and interactions in real-time. This visual feedback loop helps users understand that the agent is on the correct path, interacting with the right elements, and progressing as expected. This is particularly valuable for complex or sensitive workflows, where visual evidence can reassure users that the agent is performing its tasks accurately and responsibly, enhancing overall confidence and allowing for timely intervention if necessary.
What are the primary architectural components involved in integrating a Live View AI agent?
The integration of a Live View AI agent involves three main architectural components. First, the user's web browser, running a React application, hosts the BrowserLiveView component, which renders the real-time stream. Second, the application server acts as the orchestrator, managing the AI agent's logic, initiating browser sessions via the Amazon Bedrock AgentCore API, and generating secure, time-limited SigV4-presigned URLs for the Live View stream. Third, the AWS Cloud hosts Amazon Bedrock AgentCore and Bedrock services, providing the isolated cloud browser sessions, automation capabilities (via Playwright CDP), and the DCV-powered Live View streaming endpoint. A key design point is that the DCV stream flows directly from AWS to the user's browser, bypassing the application server for optimal performance.
Can developers utilize any AI model or agent framework with Amazon Bedrock AgentCore's Live View?
Yes, developers have the flexibility to use any AI model or agent framework of their choice with Amazon Bedrock AgentCore's Live View. While the provided example often demonstrates integration with the Amazon Bedrock Converse API and models like Anthropic Claude, the BrowserLiveView component itself is model-agnostic. This means that the real-time visual streaming functionality is decoupled from the AI agent's underlying reasoning and decision-making logic. As long as your chosen AI agent or framework can interact with the browser automation endpoint provided by AgentCore (typically via Playwright CDP), you can leverage Live View to provide visual feedback to your users, making it a highly adaptable solution for various AI-powered applications.
What are the essential prerequisites for setting up a Live View AI browser agent with Amazon Bedrock AgentCore?
To set up a Live View AI browser agent, several prerequisites are necessary. Developers need Node.js version 20 or later for the server-side logic and React for the client-side application. An AWS account in a supported region is required, along with AWS credentials that have the necessary Amazon Bedrock AgentCore Browser permissions. It's crucial to follow the principle of least privilege for IAM permissions and use temporary credentials (e.g., from AWS IAM Identity Center or STS) rather than long-lived access keys for enhanced security. Additionally, the Amazon Bedrock AgentCore TypeScript SDK (`bedrock-agentcore`) and potentially the AWS SDK for JavaScript (`@aws-sdk/client-bedrock-runtime`) if using Bedrock models, must be installed in your project.
How does the DCV protocol facilitate real-time, low-latency video streaming for Live View?
The Amazon DCV (NICE DCV) protocol is instrumental in providing real-time, low-latency video streaming for the BrowserLiveView component. DCV is a high-performance remote display protocol designed to deliver a rich user experience over varying network conditions. In the context of AgentCore, it efficiently encodes and transmits the visual output of the isolated cloud browser session directly to the user's React application via a WebSocket connection. By optimizing data compression and transmission, DCV ensures that the visual feed of the AI agent's actions appears smooth and responsive, minimizing lag and enabling users to observe the agent's behavior as if it were happening locally on their machine, without the need for complex streaming infrastructure setup by the developer.

புதுப்பிப்புகளைப் பெறுங்கள்

சமீபத்திய AI செய்திகளை மின்னஞ்சலில் பெறுங்கள்.

பகிர்