web-integration

Extended Tutorial: Integrating Your Lurp-Based Open AI Agent into a Website

Prerequisites:

Basic understanding of HTML, CSS, and JavaScript.
Access to the Lurp library (e.g., via a CDN link, npm package, or downloadable script).
Your Lurp API key or configuration details (provided when you set up the agent with us).
A web server or local development environment (e.g., VS Code with Live Server).

1. Include the Lurp Library

Option 1: CDN (simplest): Add this to the <head> or bottom of your <body> in your HTML file:

html

Option 2: npm (for modern frameworks): If your site uses a build tool like Webpack or Vite:

bash

npm install lurp

javascript

import { Agent } from 'lurp';

Verify: Ensure the library loads by adding <script>console.log(typeof Lurp);</script>—it should log "function" or "object".

2. Initialize the Lurp Agent

In a <script> tag or separate .js file, set up the agent:

javascript

const agent = new Lurp.Agent({ apiKey: 'YOUR_API_KEY', // Replace with the key we provided model: 'open-ai-model-name', // e.g., 'gpt-3.5-turbo' or your custom model endpoint: 'https://your-api-endpoint.com', // If Lurp requires a custom endpoint options: { maxTokens: 150, // Optional: tweak response length temperature: 0.7 // Optional: control creativity (0-1) } });

3. Build the Chat Interface

HTML: Add a basic structure to your page:

javascript

<!DOCTYPE html>

<head>

<title>Lurp AI Agent</title>

<style>

#chat-box { border: 1px solid

#ccc; padding: 10px; height: 300px; overflow-y: scroll; }

#user-input { width: 70%; padding: 5px; } button { padding: 5px 10px; }

</style>

</head>

<body>

JavaScript (script.js): Handle sending and receiving messages:

javascript

const agent = new Lurp.Agent({

apiKey: 'YOUR_API_KEY',

model: 'open-ai-model-name'

});

function sendMessage() {

const input = document.getElementById('user-input').value;

if (!input) return; // Ignore empty input

const chatBox = document.getElementById('chat-box');

// Display user message

chatBox.innerHTML += `<p><strong>You:</strong> ${input}</p>`;

chatBox.scrollTop = chatBox.scrollHeight; // Auto-scroll to bottom

// Send to agent and display response

agent.send(input)

.then(response => {

chatBox.innerHTML += `<p><strong>Agent:</strong> ${response}</p>`;

chatBox.scrollTop = chatBox.scrollHeight;

})

.catch(error => {

chatBox.innerHTML += `<p><strong>Error:</strong> ${error.message}</p>`;

});

// Clear input

document.getElementById('user-input').value = '';

}

// Optional: Allow Enter key to send

document.getElementById('user-input').addEventListener('keypress', (e) => {

if (e.key === 'Enter') sendMessage();

});

4. Test the Integration

Open your HTML file in a browser (e.g., via a local server like npx serve or Live Server).

Type a message (e.g., “Hello, how can you help me?”) and click Send.

Verify the agent responds correctly. If not, check:

Console for errors (F12 > Console).
API key validity.
Network connectivity to the Lurp endpoint.

5. Customize and Enhance

Styling: Adjust CSS to match your site’s design

javascript

#chat-box { background: #f9f9f9; font-family: Arial, sans-serif; }

button { background: #007bff; color: white; border: none; }

6. Deploy to Your Website

Upload the updated HTML, CSS, and JS files to your hosting provider (e.g., Netlify, Vercel, or traditional hosts like GoDaddy).
Test again on the live site to ensure everything works.

Troubleshooting:

No Response: Check API key, endpoint, and browser console for errors.
Slow Response: Optimize maxTokens or contact us if server-side delays occur.
CORS Issues: Ensure your hosting allows requests to the Lurp endpoint.

Next Steps:

Explore advanced Lurp features (e.g., multi-turn conversations, custom tools) in our [docs link].
Reach out at [your-support-email] for personalized assistance.

Beta

html

bash

javascript

javascript

javascript

javascript

javascript

Please switch to the desktop interface

App coming soon...

Please switch to the desktop interface

App coming soon...