How to Integrate Lovable with Kentico

Kentico Xperience uses 'Channels' to configure delivery endpoints. A Headless Channel provides a REST API for content delivery. If your organization has not set up a Headless Channel, a Kentico administrator needs to create one. To create a Headless Channel in Kentico Xperience: Log in to Kentico administration (typically at your-instance.xperience.io/admin). Go to Content delivery → Headless channels. Click 'Create headless channel'. Give it a name (e.g., 'Lovable App') and configure: - Allowed content types — select which content types are exposed through this channel - API key — Kentico auto-generates this, or you can set a custom one - Allowed origins for CORS — add your Lovable app domain Once created, note the Headless Channel API key and the Content Delivery API base URL (format: https://deliver.kontent.ai/{environment-id} for older Kontent/Kentico Cloud, or https://your-instance.xperience.io/api/ for self-hosted Xperience). In Lovable, click '+' next to Preview to open the Cloud panel, then click 'Secrets'. Add: - KENTICO_DELIVERY_URL — the Content Delivery API base URL - KENTICO_API_KEY — the Headless Channel API key - KENTICO_CHANNEL_NAME — the channel name or environment ID Kentico API keys are typically UUIDs (format: 00000000-0000-0000-0000-000000000000). They grant read access to content items published in the configured channel. Store them in Cloud → Secrets — Lovable's security blocks approximately 1,200 hardcoded API keys daily.

Kentico's Content Delivery API uses Bearer token authentication with the API key. For Xperience by Kentico (self-hosted), the API URL pattern is: GET /api/delivery/pages?channelName={channel}&contentTypeCodename={type}&languageName={lang}. For Kentico as a Service (KaaS / formerly Kontent.ai), the pattern is: GET https://deliver.kontent.ai/{environmentId}/items?system.type={type}. Content item responses contain two levels: the 'system' object (with id, name, codename, language, type, collection, workflow_step, last_modified) and the 'elements' or 'fields' object containing your custom content type field values (field codename: { type: 'text', value: '...' }). The Edge Function below handles Xperience by Kentico's self-hosted delivery format. Adapt the URL pattern and response mapping for your specific Kentico version. Your Kentico developer can share the exact endpoint format and a sample response payload.

1// supabase/functions/kentico-proxy/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 { contentType, slug, language = 'en', limit = 10, offset = 0, taxonomyFilter } =
12      await req.json() as {
13        contentType?: string; slug?: string; language?: string;
14        limit?: number; offset?: number; taxonomyFilter?: Record<string, string>;
15      };
16
17    const deliveryUrl = Deno.env.get('KENTICO_DELIVERY_URL')!.replace(/\/$/, '');
18    const apiKey = Deno.env.get('KENTICO_API_KEY')!;
19    const channelName = Deno.env.get('KENTICO_CHANNEL_NAME')!;
20
21    const params = new URLSearchParams({
22      channelName,
23      languageName: language,
24    });
25
26    if (contentType) params.set('contentTypeCodename', contentType);
27    if (slug) params.set('urlSlug', slug);
28    if (limit) params.set('limit', String(limit));
29    if (offset) params.set('offset', String(offset));
30    if (taxonomyFilter) {
31      Object.entries(taxonomyFilter).forEach(([key, value]) => {
32        params.set(`taxonomies[${key}]`, value);
33      });
34    }
35
36    const url = `${deliveryUrl}/api/delivery/pages?${params.toString()}`;
37    console.log(`Kentico API request: ${url}`);
38
39    const kenticoResponse = await fetch(url, {
40      headers: {
41        'Authorization': `Bearer ${apiKey}`,
42        'Accept': 'application/json',
43      },
44    });
45
46    if (!kenticoResponse.ok) {
47      const errText = await kenticoResponse.text();
48      console.error(`Kentico API error ${kenticoResponse.status}:`, errText);
49      return new Response(JSON.stringify({ error: `Kentico API returned ${kenticoResponse.status}` }), {
50        status: kenticoResponse.status,
51        headers: { ...corsHeaders, 'Content-Type': 'application/json' },
52      });
53    }
54
55    const result = await kenticoResponse.json();
56    return new Response(JSON.stringify({
57      items: result.items ?? result.webPageItems ?? result,
58      pagination: result.pagination ?? { totalCount: result.items?.length ?? 0 },
59    }), {
60      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
61    });
62  } catch (error) {
63    console.error('kentico-proxy error:', error);
64    return new Response(JSON.stringify({ error: String(error) }), {
65      status: 500,
66      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
67    });
68  }
69});

With the Edge Function deployed, build the React components that render Kentico content items. Kentico content items have a predictable structure — each item has system fields and element/field values keyed by their codename. Your Kentico administrator can share the content type schema showing all codenames and types. For Xperience by Kentico content items, fields are accessed as item.fields.{field_codename}.value for text and number fields, item.fields.{field_codename}.asset for file/image fields, and item.fields.{field_codename}.pages for linked content items. For rich text fields (body text with formatting), Kentico returns HTML content in the value field. Sanitize with DOMPurify and render with dangerouslySetInnerHTML. For asset fields (images, documents), the URL is in item.fields.field_name.asset.url. For taxonomy fields, Kentico returns an array of taxonomy term objects. Use these for category badges and filtering. Ask Lovable to build the content display components by sharing your content type schema. For complex Kentico deployments with dozens of content types, linked items, and rich text with embedded components, RapidDev's team can help build a complete content rendering engine for all your Kentico content types.