How to Integrate Lovable with Jira

Jira Cloud uses API tokens for programmatic authentication. Go to id.atlassian.com/manage-profile/security/api-tokens. Click 'Create API token'. Give it a descriptive label like 'Lovable App Integration'. Click 'Create' and immediately copy the token — it's displayed only once. The Jira REST API uses Basic authentication with a base64-encoded string of 'email:token'. Your Edge Function will handle this encoding using Deno's built-in btoa() function: btoa('your-email@company.com:your-api-token'). This base64 string goes in the Authorization header as 'Basic {encoded}'. Note the distinction between API tokens and OAuth 2.0. API tokens are simpler and work for personal integrations where your app accesses Jira as you. OAuth 2.0 (3-legged) is needed for apps where other users connect their own Jira accounts. For most custom dashboards and internal tools, API tokens are sufficient and much simpler to implement. Note your Jira Cloud domain (the part before .atlassian.net in your Jira URL, e.g., 'mycompany' if your Jira URL is mycompany.atlassian.net). You'll need this to construct API endpoint URLs in the format: https://mycompany.atlassian.net/rest/api/3/...

Open your Lovable project, click '+' in the top-right to access panels, then select 'Cloud'. Expand the Secrets section and add the following credentials. Add JIRA_EMAIL with your Atlassian account email address (the one you use to log into Jira). Add JIRA_API_TOKEN with the API token you just generated. Add JIRA_DOMAIN with your Jira Cloud domain, formatted as 'https://your-company.atlassian.net' (the full base URL without trailing slash). Your Edge Function will construct the Authorization header by base64-encoding 'JIRA_EMAIL:JIRA_API_TOKEN' using Deno's btoa() function. The Jira REST API v3 base path is /rest/api/3/ for core Jira operations, and /rest/agile/1.0/ for Agile (sprint/board) features. The Jira API does not require CORS workarounds for well-structured Edge Functions since the function makes server-to-server requests. However, your frontend's calls to the Edge Function still need CORS headers on the Edge Function response — ensure your function returns Access-Control-Allow-Origin: * headers. Lovable's security infrastructure blocks approximately 1,200 hardcoded API keys daily. API tokens are high-value credentials — they grant full access to your Jira workspace as your user account. Always use Cloud Secrets and never paste them in Lovable chat.

Build the Edge Function that handles Jira API calls. This function constructs the Basic auth header from your credentials, and proxies different Jira operations based on the action parameter. The Jira REST API v3 has rich filtering through JQL (Jira Query Language). JQL is a powerful SQL-like language for querying issues: 'project = PROJ AND status = "In Progress" AND sprint in openSprints() ORDER BY priority DESC'. Your Edge Function should accept a JQL string as a parameter, URL-encode it, and pass it to the /rest/api/3/search endpoint. This gives you complete flexibility to filter issues any way Jira supports. For board and sprint data, use the Agile API at /rest/agile/1.0/. The key endpoints are /board (list boards), /board/{boardId}/sprint (list sprints), and /board/{boardId}/sprint/{sprintId}/issue (issues in a specific sprint). Sprint boards require knowing the board ID — you can fetch it once and store it in Cloud Secrets as JIRA_BOARD_ID. For issue creation, the POST /rest/api/3/issue endpoint accepts a fields object with project key, issuetype, summary, description, priority, assignee, and custom field values. Custom fields use keys like 'customfield_10016' for story points (the exact key varies by Jira configuration — fetch it from /rest/api/3/field).

1// supabase/functions/jira/index.ts
2import { serve } from "https://deno.land/std@0.168.0/http/server.ts";
3
4const JIRA_DOMAIN = Deno.env.get("JIRA_DOMAIN") ?? "";
5const AUTH = btoa(`${Deno.env.get("JIRA_EMAIL")}:${Deno.env.get("JIRA_API_TOKEN")}`);
6const corsHeaders = { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "POST, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Authorization" };
7
8const jiraHeaders = {
9  Authorization: `Basic ${AUTH}`,
10  Accept: "application/json",
11  "Content-Type": "application/json",
12};
13
14serve(async (req) => {
15  if (req.method === "OPTIONS") return new Response(null, { headers: corsHeaders });
16  try {
17    const { action, jql, maxResults, boardId, sprintId, issue } = await req.json();
18
19    if (action === "search-issues") {
20      const encodedJql = encodeURIComponent(jql ?? "ORDER BY updated DESC");
21      const res = await fetch(`${JIRA_DOMAIN}/rest/api/3/search?jql=${encodedJql}&maxResults=${maxResults ?? 50}&fields=summary,status,priority,assignee,updated,issuetype,customfield_10016`, { headers: jiraHeaders });
22      const data = await res.json();
23      return new Response(JSON.stringify({ issues: data.issues ?? [], total: data.total }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
24    }
25
26    if (action === "get-boards") {
27      const res = await fetch(`${JIRA_DOMAIN}/rest/agile/1.0/board`, { headers: jiraHeaders });
28      const data = await res.json();
29      return new Response(JSON.stringify({ boards: data.values ?? [] }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
30    }
31
32    if (action === "get-sprint-issues") {
33      const res = await fetch(`${JIRA_DOMAIN}/rest/agile/1.0/board/${boardId}/sprint/${sprintId}/issue?fields=summary,status,priority,assignee,customfield_10016`, { headers: jiraHeaders });
34      const data = await res.json();
35      return new Response(JSON.stringify({ issues: data.issues ?? [] }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
36    }
37
38    if (action === "create-issue" && issue) {
39      const res = await fetch(`${JIRA_DOMAIN}/rest/api/3/issue`, {
40        method: "POST",
41        headers: jiraHeaders,
42        body: JSON.stringify({
43          fields: {
44            project: { key: issue.projectKey },
45            summary: issue.summary,
46            issuetype: { name: issue.issueType ?? "Task" },
47            description: issue.description ? {
48              type: "doc", version: 1,
49              content: [{ type: "paragraph", content: [{ type: "text", text: issue.description }] }]
50            } : undefined,
51            priority: issue.priority ? { name: issue.priority } : undefined,
52          }
53        }),
54      });
55      const data = await res.json();
56      return new Response(JSON.stringify({ key: data.key, id: data.id }), { headers: { ...corsHeaders, "Content-Type": "application/json" } });
57    }
58
59    return new Response(JSON.stringify({ error: "Unknown action" }), { status: 400, headers: corsHeaders });
60  } catch (err) {
61    return new Response(JSON.stringify({ error: err.message }), { status: 500, headers: { ...corsHeaders, "Content-Type": "application/json" } });
62  }
63});

In addition to the runtime Edge Function integration, Lovable offers a Jira MCP personal connector through the Atlassian integration. This is a build-time feature, not a runtime feature — it gives Lovable's AI context from your Jira tickets while you're building, helping it generate code that matches your actual requirements. To enable it: in Lovable, click 'Settings' (gear icon) in the top navigation, then 'Connectors', then 'Personal connectors'. Click 'Atlassian (Jira + Confluence)'. You'll go through an OAuth2 flow to connect your Atlassian account. Once connected, Lovable's AI can read your Jira tickets, epics, and linked Confluence pages when generating code. With the MCP connector active, you can reference Jira tickets directly in chat by typing @jira or including ticket numbers in your prompts. For example: 'Implement the feature described in PROJ-245' or 'Create a form that handles the edge cases listed in ticket BUGS-89'. The AI reads the ticket description, acceptance criteria, and linked documents to generate more accurate implementations. The MCP connector reads your Jira data at build time and does not affect your deployed app's behavior. The Edge Function integration (Steps 1-3) is what powers your app at runtime for actual users. Both can be active simultaneously — MCP helps you build faster, Edge Functions power the running app.

With the Edge Function deployed, build a custom project management view. Ask Lovable to create a dashboard that displays your most important Jira data in a layout tailored to how your team actually works — not Jira's default interface. For a sprint-focused team, the most valuable dashboard elements are: current sprint progress (story points completed vs total), issues grouped by assignee with their status, a list of blockers (issues with status 'Blocked' or with blocker links), and recently updated issues. For a customer-support team, the most valuable elements might be open bugs sorted by priority, a count by severity, and mean time to resolution from your issue creation and resolution dates. Jira's status field names ('To Do', 'In Progress', 'Done', 'In Review', 'Blocked') vary by project configuration — don't hardcode status names. Instead fetch unique status values from your issues and let users configure which statuses map to 'todo', 'in-progress', and 'done' categories in your dashboard. For issue creation from your Lovable app, build a quick-add form that creates Jira issues without leaving your interface. This is useful for customer feedback collection, bug report submission, and feature request tracking — users submit in your app, Jira tickets appear automatically for your engineering team.