​

​

​

We just submitted the new AI-powered edgarallan.com to the website experience category of the Webflow Awards. Do you want a sneak peak? Start with this Twitter thread and reply to this email if you want the link.

Edgar Allan @EdgarAllanCo Our newest collection. Coming Soon. In preparation for @webflowconf, we have been building something special. 12:52 PM • Jul 31, 2024 11 Retweets 76 Likes Read 8 replies

​

​

Community library scripts

📁 Click Something When Pressing ESC Key​
Triggers a click on a specified element when the 'Escape' key is pressed.

🖋️ Set Hidden Input Value From URL Parameters​
​Retrieve URL parameter and set it to a hidden input field.

👻 Hide element if collection is empty​
​Hide sections based on dynamic content state using jQuery.

Scripts from @CoreyGMoen.

​

Product Updates

👀 Team permissions and function importing updates are almost done. Expect these new features next week.

​

--

Javascript 101: Work with the OpenAI API

We soft launched a AI-heavy website. It takes a user's prompt and returns pre-written content that most closely matches the user's prompt. The AI is the router. The AI also responds with something short to introduce the user to the content.

As AI becomes more and more ubiquitous, you will likely find use cases where you want to include AI. Unfortunately, this is not as simple as sending a fetch request to the OpenAI API. But, with a bit of help from a Cloudflare worker, you can add AI to your website. Let's walk through how we accomplished this.

Prerequisites

1. OpenAI API Key: Sign up for an OpenAI account and get an API key from OpenAI.
2. Cloudflare Account: Sign up for a Cloudflare account and set up Workers if you haven't already.

Step 1: Set Up Cloudflare Worker

1. Create a new Worker
   • Go to the Cloudflare dashboard.
   • Navigate to the Workers section.
   • Click on Create a Worker.
2. Configure the Worker
   • Replace the default script with the following code:

addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
    const { prompt } = await request.json()

    const response = await fetch('https://api.openai.com/v1/completions', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${OPENAI_API_KEY}`
        },
        body: JSON.stringify({
            model: 'text-davinci-003', // or your preferred model
            prompt: prompt,
            max_tokens: 150
        })
    })

    const data = await response.json()
    const aiResponse = data.choices[0].text.trim()

    return new Response(JSON.stringify({ response: aiResponse }), {
        headers: { 'Content-Type': 'application/json' }
    })
}

• Replace OPENAI_API_KEY with your actual OpenAI API key.
• Save and deploy your Worker.
  ​

Step 2: Create the Webpage

1. HTML Structure: Create a simple HTML page with an input for the user prompt and a display area for the AI response.
2. JavaScript Code:
   • Add the following code to your Slater file:

function getAIResponse() {
    const prompt = document.getElementById('prompt').value;

    fetch('https://your-worker-url.workers.dev', { // Replace with your Worker URL
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ prompt })
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById('response').innerText = data.response;
    })
    .catch(error => {
        console.error('Error:', error);
        document.getElementById('response').innerText = 'There was an error processing your request.';
    });
}

• Replace 'https://your-worker-url.workers.dev' with the URL of your deployed Cloudflare Worker.

​
This is a quick summary of how we are using a Cloudflare worker to allow us to communicate with the OpenAI API. I'm providing minimal code to make it easy to integrate AI functionality into your projects. If you have any questions, I'd be happy to answer them.

​
Please share any AI-enabled experiences that your create.

​

--

Your projects, supported by Slater

Here is a peak of the new edgarallan.com website. 👀

Happy coding!

🤙 the Slater Team

​

If Slater helps you create better websites, please support the team behind it.