Bedrock AgentCore: React Uygulamanıza Canlı Bir Yapay Zeka Tarayıcı Ajanı Gömün

Yapay zeka ajanlarının şeffaf olmayan "kara kutular" olarak çalıştığı dönem hızla sona yaklaşıyor. Yapay zeka, özellikle web ortamlarında giderek daha karmaşık ve otonom görevler üstlendikçe, şeffaflık, güven ve kullanıcı kontrolüne olan talep hiç bu kadar yüksek olmamıştı. Kullanıcıların, özellikle bu eylemler web sitelerinde gezinmeyi, hassas verilerle etkileşim kurmayı veya kritik iş akışlarını yürütmeyi içerdiğinde, yapay zeka ajanının kendi adlarına yaptığı eylemleri anlamaları ve doğrulamaları gerekiyor.

Bu temel zorluğu ele almak için Amazon Web Services güçlü bir çözüm sunuyor: Amazon Bedrock AgentCore BrowserLiveView bileşeni. Bu yenilikçi araç, geliştiricilere bir yapay zeka ajanının tarama oturumunun canlı, gerçek zamanlı video akışını doğrudan React uygulamalarına gömme yeteneği sağlar. Bu entegrasyon, yalnızca ajan davranışını şeffaflaştırmakla kalmaz, aynı zamanda kullanıcılara eşsiz bir görünürlük ve kritik bir kontrol hissi sunar.

Bedrock AgentCore TypeScript SDK 'sının bir parçası olan BrowserLiveView bileşeni, sadece birkaç satır JavaScript XML (JSX) ile canlı tarayıcı akışlarının uygulamanıza entegrasyonunu basitleştirir. Yüksek performanslı Amazon DCV protokolünü kullanarak ajanın oturumunu işler ve geleneksel olarak gizli bir süreci görsel olarak doğrulanabilir bir deneyime dönüştürür. Bu makale, bir oturumu başlatmaktan ve Canlı Görünüm URL'sini oluşturmaktan, akışı React uygulamanızda işlemeye ve son olarak, kullanıcılarınız izlerken tarayıcıyı yönlendirmek için bir yapay zeka ajanını bağlamaya kadar olan süreçte size rehberlik edecektir.

BrowserLiveView ile Yapay Zeka Ajanı Şeffaflığını Artırma

Günümüzün hızla gelişen Ajan Temelli Yapay Zeka ortamında, web tarama görevlerini yapay zeka ajanlarına devretme yeteneği muazzam verimlilik artışları vaat ediyor. Ancak, bu vaat genellikle ajanın güvenilirliği, doğruluğu ve güvenliği ile ilgili endişelerle sınırlanır. Bir ajanın operasyonlarına net bir pencere olmadan, kullanıcılar gözlemleyemedikleri bir sisteme güvenmek zorunda kalırlar, bu da benimsenmeyi engelleyebilir ve hassas senaryolarda dağıtımı sınırlayabilir.

BrowserLiveView bileşeni, yapay zeka ajanının "gözlerini" kullanıcıya açarak bu zorluğun doğrudan üstesinden gelir. Karmaşık bir çevrimiçi formu doldurmak veya birden çok web sitesinden belirli bilgileri almakla görevli bir yapay zeka ajanı düşünün. Geleneksel olarak, kullanıcı yalnızca nihai bir çıktı veya eylemlerin bir özetini alır, bu da onları ara adımları merak etmeye bırakır. Gömülü bir Canlı Görünüm ile kullanıcılar, ajan bunu yaparken her gezinmeyi, form göndermeyi ve arama sorgusunu gerçek zamanlı olarak takip edebilirler.

Bu anında görsel onay paha biçilmezdir. Ajanın doğru sayfada olduğuna, doğru öğelerle etkileşim kurduğuna ve iş akışı boyunca amaçlandığı gibi ilerlediğine dair kullanıcılara güvence verir. Bu gerçek zamanlı geri bildirim döngüsü, sadece metin onaylarının ötesine geçer; ajanın davranışının somut, doğrulanabilir bir denetim kaydını sağlar, daha fazla güven ve itimat teşvik eder. Düzenlenmiş veya hassas müşteri verilerini içeren iş akışları için bu görsel kanıt, uyumluluk ve sorumluluk açısından kritik olabilir. Ayrıca, insan denetimi gerektiren senaryolarda, bir süpervizör, akışı bozmadan ajanın eylemlerini uygulama içinde doğrudan gözlemleyebilir ve gerektiğinde müdahale edebilir.

Gerçek Zamanlı Ajan Gözleminin Arkasındaki Mimari

Amazon Bedrock AgentCore tarafından desteklenen bir React uygulaması içinde canlı bir yapay zeka tarayıcı ajanının sorunsuz entegrasyonu, üç temel bileşenden oluşan gelişmiş ancak verimli bir mimari aracılığıyla orkestra edilir. Bu parçalar arasındaki etkileşimi anlamak, başarılı uygulama ve dağıtım için çok önemlidir.

Etkileşim, React uygulamanızı çalıştıran kullanıcının web tarayıcısıyla başlar. Bu uygulama içinde BrowserLiveView bileşeni işlenir ve güvenli, zaman sınırlı bir SigV4 ön imzalı URL bekler. Uygulama sunucunuz tarafından oluşturulan bu URL, AWS Bulutu'ndaki Bedrock AgentCore hizmetine doğrudan kalıcı bir WebSocket bağlantısı kurmanın anahtarıdır.

Uygulama sunucunuzun iki amacı vardır: yapay zeka ajanının mantığını barındırır ve oturum yönetimi için bir aracı görevi görür. Tarayıcı oturumlarını başlatmak için Amazon Bedrock AgentCore API'sini çağırır ve ardından istemci tarayıcınıza Canlı Görünüm akışına erişim sağlayan SigV4 ön imzalı URL'leri güvenli bir şekilde oluşturur. Önemli olarak, sunucunuz ajanın eylemlerini düzenler ve gerekli kimlik bilgilerini oluştururken, video akışının kendisini doğrudan ele almaz.

Tarayıcı otomasyonunun ve video akışının ağır yükü AWS Bulutu içinde gerçekleşir. Amazon Bedrock AgentCore, izole bulut tarayıcı oturumlarını barındırır ve hem otomasyon uç noktasını (yapay zeka ajanınızın Playwright Chrome Geliştirici Araçları Protokolü (CDP) aracılığıyla etkileşim kurduğu yer) hem de Amazon DCV tarafından desteklenen Canlı Görünüm akış uç noktasını sağlar. Bu tasarım, DCV Canlı Görünüm akışının Amazon Bedrock AgentCore'dan doğrudan kullanıcının tarayıcısına akmasını sağlar. Bu doğrudan WebSocket bağlantısı, uygulama sunucunuzu atlayarak gecikmeyi en aza indirir, altyapı yükünüzü azaltır ve sorunsuz, gerçek zamanlı bir görüntüleme deneyimi sağlar.

Canlı Yapay Zeka Ajanınızı Dağıtmak İçin Ön Koşullar

Canlı yapay zeka tarayıcı ajanın uygulamasını derinlemesine incelemeden önce, geliştirme ortamınızın doğru yapılandırıldığından ve gerekli AWS kaynaklarına ve izinlerine sahip olduğunuzdan emin olmanız önemlidir. Bu ön koşullara uymak, geliştirme sürecinizi kolaylaştıracak ve güvenli bir operasyonel duruş sürdürmenize yardımcı olacaktır.

1. Node.js Ortamı: Uygulamanızın sunucu tarafı bileşenlerini çalıştırmak için sisteminizde Node.js sürüm 20 veya üzeri yüklü olmalıdır.
2. AWS Hesabı ve Bölgesi: Amazon Bedrock AgentCore'un mevcut olduğu desteklenen bir AWS Bölgesi'ne erişimi olan aktif bir AWS hesabı gereklidir.
3. AWS Kimlik Bilgileri ve İzinler: AWS kimlik bilgilerinizin uygun Amazon Bedrock AgentCore Tarayıcı izinlerine sahip olması gerekir. AWS Kimlik ve Erişim Yönetimi (IAM) izinlerini yapılandırırken en az ayrıcalık ilkesini takip etmek çok önemlidir. Gelişmiş güvenlik için, uzun ömürlü erişim anahtarlarından kaçınarak her zaman AWS IAM Identity Center veya AWS Güvenlik Token Hizmeti (AWS STS)'den elde edilen geçici kimlik bilgilerini kullanın.
4. Yapay Zeka Modeli Erişimi: Ajanı yönlendirmek için bir yapay zeka modeli kullanmayı planlıyorsanız (örneğin, Anthropic Claude ile Amazon Bedrock Converse API'sini kullanan örnekte gösterildiği gibi), o belirli modele ve ilgili AWS Bedrock izinlerine erişiminiz olması gerekir. Ancak, Canlı Görünümün modelden bağımsız olduğunu ve istediğiniz herhangi bir model sağlayıcısını veya ajan çerçevesini entegre etmenize olanak tanıdığını unutmayın.
5. SDK Kurulumları:
   • AgentCore ile etkileşim kurmak için bedrock-agentcore TypeScript SDK'sını yükleyin:

     npm install bedrock-agentcore
     

   • Yapay zeka modeliniz için AWS Bedrock kullanıyorsanız, AWS SDK for JavaScript'i yükleyin:

     npm install @aws-sdk/client-bedrock-runtime
     

Canlı Görünüm'ü uygulamak için kod tabanı genellikle ikiye ayrılır: sunucu tarafı kod (oturum yönetimi ve yapay zeka ajan mantığı için) Node.js'te çalışır ve istemci tarafı kod (Canlı Görünüm'ü işlemek için) genellikle Vite gibi araçlarla paketlenmiş bir React uygulaması içinde çalışır.

Adım Adım Entegrasyon: Oturumdan Akışa

Amazon Bedrock AgentCore ile canlı bir yapay zeka tarayıcı ajanını entegre etmek, sunucu tarafı mantığınızı istemci tarafı React uygulamanızla ve AWS Bulutu'nun güçlü yetenekleriyle birleştiren net, üç adımlı bir süreç içerir.

1. Tarayıcı Oturumu Başlatma ve Canlı Görünüm URL'si Oluşturma

İlk adım, uygulama sunucunuzda gerçekleşir. Burası, arka uç mantığınızın Amazon Bedrock AgentCore içinde bir tarayıcı oturumu başlattığı ve canlı görünüm akışını sağlamak için gerekli URL'yi güvenli bir şekilde elde ettiği yerdir.

bedrock-agentcore SDK'sından Browser sınıfını kullanacaksınız. Bu sınıf, bulutta izole tarayıcı ortamları oluşturma ve yönetme karmaşıklığını ele alır. Bu adımdan elde edilen temel çıktı, tarayıcı oturumunun canlı video akışına güvenli, geçici erişim sağlayan bir SigV4 ön imzalı URL'dir.

// Örnek sunucu tarafı kodu (Node.js)
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';

// Bedrock AgentCore istemcisini başlatın (uygun AWS kimlik bilgilerinin yapılandırıldığından emin olun)
const agentCoreClient = new AgentCoreClient({ region: 'us-east-1' }); // İstediğiniz bölgeyi kullanın

async function startLiveSession() {
    // Yeni bir tarayıcı oturumu oluşturun
    const browser = new Browser(agentCoreClient);
    await browser.create();

    // Canlı Görünüm URL'sini oluşturun
    const liveViewUrl = await browser.getLiveViewURL();
    console.log('Canlı Görünüm URL:', liveViewUrl);

    // AI ajanınızı daha sonra bağlamak veya oturumu sonlandırmak için browser.sessionId'yi saklayın
    const sessionId = browser.sessionId;
    
    return { liveViewUrl, sessionId };
}

// Bu `liveViewUrl` React istemcinize gönderilecektir.

Bu URL daha sonra React frontend'inize iletilir ve canlı akışı kurmak için kullanılacaktır.

2. Canlı Görünüm'ü React Uygulamanızda İşleme

React uygulamanız sunucunuzdan liveViewUrl'yi aldıktan sonra, BrowserLiveView bileşeni sayesinde gerçek zamanlı akışı işlemek oldukça kolaydır.

// Örnek istemci tarafı kodu (React bileşeni)
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>Canlı Görünüm URL'si bekleniyor...</p>;
    }

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

// Ana Uygulama bileşeninizde veya sayfanızda:
// const MyPage = () => {
//     const [currentLiveViewUrl, setCurrentLiveViewUrl] = useState<string | null>(null);
//
//     useEffect(() => {
//         // Backend'inizden liveViewUrl'yi getirin
//         fetch('/api/start-agent-session')
//             .then(res => res.json())
//             .then(data => setCurrentLiveViewUrl(data.liveViewUrl));
//     }, []);
//
//     return (
//         <div>
//             <h1>Yapay Zeka Ajanı Canlı Görünüm</h1>
//             <LiveAgentViewer liveViewUrl={currentLiveViewUrl} />
//         </div>
//     );
// };

Sadece url={liveViewUrl} ile BrowserLiveView bileşeni, WebSocket bağlantısını kurmanın, DCV akışını tüketmenin ve belirtilen boyutlar içinde canlı video akışını işlemenin karmaşık ayrıntılarını ele alır. Bu minimal JSX entegrasyonu, frontend geliştirmeyi büyük ölçüde basitleştirerek canlı ajan etrafındaki kullanıcı deneyimine odaklanmanızı sağlar.

3. Tarayıcıyı Yönlendirmek İçin Bir Yapay Zeka Ajanı Bağlama

Son adım, yapay zeka ajanınızın zekasını izole oturumdaki gerçek tarayıcı eylemlerine bağlar. BrowserLiveView görsel geri bildirim sağlarken, yapay zeka ajanınız tarayıcıyla programlı olarak etkileşim kurmak için Playwright CDP'yi (Chrome Geliştirici Araçları Protokolü) kullanır.

Uygulama sunucunuz, aynı zamanda yapay zeka ajanı barındırdığı için, tarayıcı eylemlerini yürütmek üzere Browser nesnesinin page özelliğini (bir Playwright Page nesnesi) kullanacaktır.

// Örnek sunucu tarafı kodu (adım 1'den devam ediyor)
// Playwright benzeri bir arayüzünüz veya doğrudan Playwright kullanımınız olduğunu varsayarak
import { Browser } from 'bedrock-agentcore';
import { AgentCoreClient } from '@aws-sdk/client-bedrock-agentcore';
import { BedrockRuntimeClient, InvokeModelCommand } from "@aws-sdk/client-bedrock-runtime";

// ... (tarayıcı oluşturma için önceki kurulum) ...

async function driveAgent(sessionId: string) {
    const browser = new Browser(agentCoreClient, { sessionId }); // Mevcut oturuma yeniden bağlanın
    await browser.connect(); // Tarayıcı oturumuna bağlanın

    const page = browser.page; // Playwright Sayfa nesnesini alın

    // Örnek yapay zeka ajanı mantığı (görselleştirme için basitleştirilmiştir)
    // Burada, LLM'nizle (örn. Bedrock Converse API aracılığıyla Anthropic Claude) entegre olacaksınız
    // kullanıcı istemlerine ve sayfa içeriğine göre eylemleri belirlemek için.
    console.log("Ajan example.com'a gidiyor...");
    await page.goto('https://www.example.com');
    console.log("Ajan 3 saniye bekledi...");
    await page.waitForTimeout(3000); // İşlem süresini simüle edin

    console.log("Ajan bir arama kutusuna yazıyor (varsayımsal)...");
    // Örnek: await page.type('#search-input', 'Amazon Bedrock AgentCore');
    // Örnek: await page.click('#search-button');

    const content = await page.content();
    // 'content'i analiz etmek ve sonraki adımları belirlemek için bir LLM kullanın
    const bedrockRuntimeClient = new BedrockRuntimeClient({ region: 'us-east-1' });
    const response = await bedrockRuntimeClient.send(new InvokeModelCommand({
        modelId: "anthropic.claude-3-sonnet-20240229-v1:0", // veya tercih ettiğiniz model
        contentType: "application/json",
        accept: "application/json",
        body: JSON.stringify({
            messages: [
                {
                    role: "user",
                    content: `Bu web sayfası içeriğini analiz edin ve sonraki eylemi önerin: ${content.substring(0, 500)}`
                }
            ],
            max_tokens: 200,
        }),
    }));
    const decodedBody = new TextDecoder("utf-8").decode(response.body);
    const parsedBody = JSON.parse(decodedBody);
    console.log("Yapay Zeka Modeli tarafından önerilen eylem:", parsedBody.content[0].text);

    // LLM'nin önerisine göre daha fazla sayfa eylemi gerçekleştirin...

    // İşiniz bittiğinde tarayıcı oturumunu kapatmayı unutmayın
    // await browser.close();
}

// Oturumu başlattıktan ve URL'yi aldıktan sonra driveAgent(sessionId) çağırırsınız

Yapay zeka ajanınızın sayfa içeriğini analiz ettiği, sonraki eylemi belirlediği ve Playwright CDP aracılığıyla yürüttüğü bu etkileşim döngüsü, otonom bir tarayıcı ajanının çekirdeğini oluşturur. Tüm bu eylemler, kullanıcının ekranındaki BrowserLiveView bileşeni aracılığıyla gerçek zamanlı olarak görsel olarak işlenir.

Gömülü Yapay Zeka Ajanları ile Yeni Olanakların Kilidini Açma

Amazon Bedrock AgentCore'un BrowserLiveView entegrasyonu, sadece teknik bir özellikten ötesidir; kullanıcıların yapay zeka ajanlarıyla etkileşim kurma ve onlara güvenme biçiminde bir paradigma değişimidir. Gerçek zamanlı görsel geri bildirim gömerek, geliştiriciler sadece verimli değil, aynı zamanda şeffaf, denetlenebilir ve kullanıcı dostu yapay zeka destekli uygulamalar oluşturabilirler.

Bu yetenek, özellikle aşağıdakileri içeren uygulamalar için dönüştürücüdür:

• Karmaşık İş Akışları: Veri girişi, işe alım veya düzenleyici uyumluluk gibi çok adımlı çevrimiçi süreçleri otomatikleştirmek, her adımda görünürlüğün hayati olduğu durumlarda.
• Müşteri Desteği: Ajanların yapay zeka ortak pilotlarının müşteri sorgularını çözmesini veya sistemlerde gezinmesini gözlemlemesine olanak tanımak, doğruluğu sağlamak ve müdahale için fırsatlar sunmak.
• Eğitim ve Hata Ayıklama: Geliştiricilere ve son kullanıcılara ajan davranışını anlamak, sorunları ayıklamak ve ajanları doğrudan gözlem yoluyla eğitmek için güçlü bir araç sağlamak.
• Gelişmiş Denetim Kayıtları: Ajan eylemlerinin görsel kayıtlarını oluşturmak, kapsamlı sonradan inceleme ve uyumluluk için oturum kayıtları ile Amazon S3'e birleştirilebilir.

Tarayıcı oturumlarını doğrudan AWS Bulutu'ndan istemci tarayıcılarına, video akışı için uygulama sunucusunu atlayarak akıtma yeteneği, performans ve ölçeklenebilirlik açısından önemli avantajlar sunar. Bu mimari, gecikmeyi en aza indirir ve arka uç altyapınız üzerindeki yükü azaltır, böylece son derece duyarlı ve ölçeklenebilir yapay zeka ajanı çözümleri dağıtabilirsiniz.

BrowserLiveView'ı benimseyerek, sadece yapay zeka ajanları inşa etmiyorsunuz; güven, kontrol ve daha zengin bir kullanıcı deneyimi inşa ediyorsunuz. Olanakları keşfedin ve kullanıcılarınızı karmaşık web görevlerini akıllı ajanlara devretme güveniyle güçlendirin.