JSFiddle - React, Tailwind, and code Playground

by Javier Cruz

HTML

<div class="main">
    <form role="form">
        <div class="form-group">
            <label>Claudes API Key</label>
            <input type="text" class="form-control" id="key" value=""/>
        </div>
        
        <div class="form-group">
            <label>Prompt</label>
            <textarea id="prompt" class="form-control" rows="10">
provide a synthetic data sample in CSV format with 6 columns and 10 rows of default data about Patients</textarea>
        </div>
        
        <div class="form-group">
            <button class="btn btn-primary" type="button" id="submit">Generate Data</button>
        </div>
        
        <div class="form-group">
            <label>Result</label>
            <textarea id="response" class="form-control" rows="10"></textarea>
        </div>
    </form>
</div>

CSS

.main {padding: 10px}

JavaScript

$(function() {
  
  $('#submit').click(function() {
      
    var key = $('#key').val();
    var prompt = $('#prompt').val();
    
    if(!key) {
      alert('Please enter your Claude API Key.');
      return;  
    } 
    if(!prompt) { 
      alert('Please enter a prompt/query for Claude.');
      return; 
    }
    
    // var url = 'https://api.anthropic.ai/converse/?key=' + key + '&prompt=' + encodeURIComponent(prompt);
    // sendDataToParent(url)
    $('#response').val("loading...");
    
    const PROXY_URL = 'https://cors-anywhere.herokuapp.com/'; 
    const API_URL = 'https://api.anthropic.ai/converse/';
    const SECRET_KEY = key;
    
    const params = {
      url: API_URL,
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${SECRET_KEY}`,
        'Content-Type': 'text/plain'
      },
      body: JSON.stringify({ prompt: 'hello' })  // Prompt Claude to say "hello"
    }
    
    fetch(`${PROXY_URL}/?${new URLSearchParams(params)}`) 
    .then(res => res.json())  
    .then(data => {
        $('#response').val(data.response);  
    //   document.querySelector('#response').textContent = data.response  // Display Claude's response
    })
    .catch(err => {
        $('#response').val(err.error);
        console.log(err)
        
    });
//     $.ajax(url, {
//       dataType: 'json', 
//       contentType: 'application/json',
//       success: function(data) {
//           debugger
//         $('#response').val(data.response);  
//       },
//       error: function(xhr, status, error) {
//           debugger
//         var err = JSON.parse(xhr.responseText); 
//         if (err.error) {
//           $('#response').val(err.error);
//         } else {
//           $('#response').val('An unknown error occurred.');  
//         } 
//       }
//     });
  });
});