How to Integrate Lovable with Algorithmia

Algorithmia's algorithm marketplace is browsable at algorithmia.com/algorithms. Use the search bar to find algorithms by task — 'summarization', 'sentiment analysis', 'image classification', 'NSFW detection', etc. Each algorithm page shows: 1. The algorithm path (format: author/AlgorithmName/version) — you need this for the API URL 2. Input and output format — read this carefully to understand what JSON structure to send 3. A 'Run Example' panel where you can test the algorithm with sample inputs before coding anything 4. The algorithm's cost (most algorithms cost a small number of Algorithmia credits per call) Note the exact algorithm path including version number (e.g., nlp/Summarizer/0.1.8). Using 'latest' instead of a pinned version number means algorithm updates can change behavior — pin a specific version for production. To get your API key: log in to algorithmia.com → click your username → API Keys → Copy the default key or create a new one. The key starts with 'sim'. In Lovable, click '+' next to Preview to open the Cloud panel, then click 'Secrets'. Click 'Add new secret'. Add: - ALGORITHMIA_API_KEY — your API key (starts with sim...) - ALGORITHMIA_BASE_URL — https://api.algorithmia.com (the standard API endpoint) Lovable's security blocks approximately 1,200 hardcoded API keys daily. The Secrets panel is the only safe storage for API keys.

Algorithmia's REST API follows a consistent pattern for all algorithms: POST to https://api.algorithmia.com/v1/algo/{author}/{algorithm}/{version} with Authorization: Simple {api_key} header and a JSON body containing the algorithm's input. The response has an 'output' field containing the algorithm's result and a 'metadata' field with timing and billing information. Because all Algorithmia algorithms share the same URL structure and authentication pattern, a single generic Edge Function can call any algorithm — the caller simply provides the algorithm path and input data. This is more flexible than writing a separate Edge Function for each algorithm and makes it easy to swap algorithms during development. The Edge Function below accepts an algorithmPath (e.g., 'nlp/Summarizer/0.1.8') and input (any JSON-serializable value) and calls the corresponding Algorithmia endpoint. The response's 'output' field contains the algorithm result — the specific structure depends on the algorithm. For production applications where you use a specific algorithm consistently, consider creating a dedicated Edge Function for that algorithm with input validation and output normalization specific to that algorithm's format. The generic pattern below is best for development and experimentation.

1// supabase/functions/algorithmia-call/index.ts
2const corsHeaders = {
3  'Access-Control-Allow-Origin': '*',
4  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
5};
6
7Deno.serve(async (req) => {
8  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
9
10  try {
11    const { algorithmPath, input } = await req.json() as {
12      algorithmPath: string;
13      input: unknown;
14    };
15
16    if (!algorithmPath?.trim()) {
17      return new Response(JSON.stringify({ error: 'algorithmPath is required (e.g., nlp/Summarizer/0.1.8)' }), {
18        status: 400,
19        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
20      });
21    }
22
23    if (input === undefined) {
24      return new Response(JSON.stringify({ error: 'input is required' }), {
25        status: 400,
26        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
27      });
28    }
29
30    const baseUrl = Deno.env.get('ALGORITHMIA_BASE_URL') || 'https://api.algorithmia.com';
31    const apiKey = Deno.env.get('ALGORITHMIA_API_KEY')!;
32
33    const algoUrl = `${baseUrl}/v1/algo/${algorithmPath}`;
34
35    console.log(`Calling Algorithmia algorithm: ${algorithmPath}`);
36    const startTime = Date.now();
37
38    const algoResponse = await fetch(algoUrl, {
39      method: 'POST',
40      headers: {
41        'Authorization': `Simple ${apiKey}`,
42        'Content-Type': 'application/json',
43      },
44      body: JSON.stringify(input),
45    });
46
47    const duration = Date.now() - startTime;
48
49    const result = await algoResponse.json();
50
51    if (!algoResponse.ok || result.error) {
52      console.error(`Algorithmia error (${algoResponse.status}):`, result.error || result.message);
53      return new Response(JSON.stringify({
54        error: result.error || `Algorithmia returned ${algoResponse.status}`,
55        message: result.message,
56      }), {
57        status: algoResponse.ok ? 500 : algoResponse.status,
58        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
59      });
60    }
61
62    console.log(`Algorithm ${algorithmPath} completed in ${duration}ms`);
63
64    return new Response(JSON.stringify({
65      output: result.output,
66      metadata: {
67        duration: result.metadata?.duration,
68        content_type: result.metadata?.content_type,
69        royalty: result.metadata?.royalty,
70        local_duration_ms: duration,
71      },
72    }), {
73      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
74    });
75  } catch (error) {
76    console.error('algorithmia-call error:', error);
77    return new Response(JSON.stringify({ error: String(error) }), {
78      status: 500,
79      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
80    });
81  }
82});

With the generic Edge Function deployed, validate it end-to-end with a real algorithm before building the complete UI. The Algorithmia text summarizer (nlp/Summarizer) is a good first test because its input and output formats are simple: send a text string, receive a summarized string back. The summarizer algorithm input is simply a text string (not a JSON object). The output is also a string containing the summary. Some Algorithmia algorithms take a plain string as input rather than a JSON object — when calling from the Edge Function, pass the string directly as the 'input' value, not wrapped in an object. For the production frontend, Lovable can generate the complete UI for any Algorithmia-powered feature. Describe the algorithm, its input requirements, and the display design you want. For the summarizer: a large textarea for pasting articles, an Analyze button, and a results card showing the summary with character count comparison. For an NSFW detector: an image upload component, a loading state, and a content rating result card. For algorithm selection UIs where users pick from multiple algorithms (a development or admin tool), build a dropdown of algorithm paths and a dynamic input form. Lovable can generate this kind of meta-interface — describe the use case as 'An admin tool for testing different Algorithmia algorithms with custom inputs.'