Extended Tutorial: Integrating Your Lurp-Based Open AI Agent for Content Creation
Prerequisites:
-
Basic HTML, CSS, and JavaScript knowledge.
-
Access to the Lurp library (e.g., CDN: https://your-lurp-host.com/lurp.min.js or npm: npm install lurp).
-
A local or live web server for testing.
1. Include the Lurp Library
Via CDN: Add this to your HTML <head> or <body>:
html
<script src="https://your-lurp-host.com/lurp.min.js"></script>
Via npm (for frameworks like React):
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 for Content Creation
In a <script> tag or separate .js file, set up the agent:
javascript
const agent = new Lurp.Agent({
apiKey: 'YOUR_LURP_API_KEY', // Provided during agent creation
model: 'open-ai-content-model', // Optional: specify if Lurp uses a content-tuned model
options: {
maxLength: 500, // Optional: max characters or tokens
tone: 'professional' // Optional: e.g., casual, formal, persuasive
}
});
3. Build the Content Creation Interface
HTML: Add a basic structure to your page:
javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lurp Content Creation Agent</title>
<style>
#content-output { border: 1px solid #ccc; padding: 10px; height: 300px; overflow-y: scroll; }
#content-input { width: 70%; padding: 5px; }
button { padding: 5px 10px; background: #28a745; color: white; border: none; }
</style>
</head>
<body>
<h1>Content Creation Assistant</h1>
<div id="content-output"></div>
<input id="content-input" type="text" placeholder="e.g., Write a blog intro about AI" />
<button onclick="generateContent()">Generate</button>
<script src="https://your-lurp-host.com/lurp.min.js"></script>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js): Handle sending and receiving messages:
javascript
const agent = new Lurp.Agent({
apiKey: 'YOUR_LURP_API_KEY',
options: { maxLength: 500, tone: 'professional' }
});
function generateContent() {
const input = document.getElementById('content-input').value;
if (!input) return;
const output = document.getElementById('content-output');
// Show user input
output.innerHTML += `<p><strong>You:</strong> ${input}</p>`;
output.scrollTop = output.scrollHeight;
// Generate content with agent
agent.createContent(input)
.then(response => {
output.innerHTML += `<p><strong>Agent:</strong> ${response}</p>`;
output.scrollTop = output.scrollHeight;
})
.catch(error => {
output.innerHTML += `<p><strong>Error:</strong> ${error.message}</p>`;
});
// Clear input
document.getElementById('content-input').value = '';
}
// Optional: Enter key support
document.getElementById('content-input').addEventListener('keypress', (e) => {
if (e.key === 'Enter') generateContent();
});
4. Test the Integration
-
Open your HTML file in a browser (use a local server like npx serve for testing).
-
Test prompts:
-
“Write a blog intro about AI” → Expect something like: “Artificial intelligence is revolutionizing industries worldwide...”
-
“Create a tweet about our new product” → Expect a concise, catchy message.
-
-
Debug:
-
Check DevTools (F12) > Console for errors.
-
Ensure the API key is valid and the network is stable.
-
5. Customize and Enhance
Styling: Adjust CSS to match your site’s design
javascript
#content-output { background: #f9f9f9; font-family: Georgia; } button:hover { background: #218838; }
-
Add tone options: agent.setTone('casual');
-
Enable multi-step content: agent.refineContent(previousOutput);
-
Include templates: agent.useTemplate('blog-post', input); (if supported).
6. Deploy to Your Website
-
Upload your HTML, CSS, and JS files to your hosting provider (e.g., Wix, Netlify).
-
Test live prompts and ensure responses are consistent.
-
Troubleshooting:
-
No Output: Verify Lurp API key or network connectivity.
-
Poor Content: Adjust maxLength or tone in options.
-
Errors: Contact [your-support-email] with details.
-
Next Steps:
-
Check our [docs link] for advanced content creation features.
-
Email [your-support-email] for help with custom prompts or integration.
.png)
Please switch to the desktop interface
App coming soon...
Please switch to the desktop interface
App coming soon...