How to Integrate Bolt.new with Jira

1// app/api/jira/route.ts
2import { NextResponse } from 'next/server';
3
4const JIRA_BASE_URL = process.env.JIRA_BASE_URL; // e.g., https://yourcompany.atlassian.net
5const JIRA_EMAIL = process.env.JIRA_EMAIL;
6const JIRA_API_TOKEN = process.env.JIRA_API_TOKEN;
7
8function getAuthHeader(): string {
9  const credentials = Buffer.from(`${JIRA_EMAIL}:${JIRA_API_TOKEN}`).toString('base64');
10  return `Basic ${credentials}`;
11}
12
13export async function GET(request: Request) {
14  const { searchParams } = new URL(request.url);
15  const jql = searchParams.get('jql') || 'project is not EMPTY ORDER BY updated DESC';
16  const maxResults = searchParams.get('maxResults') || '50';
17
18  const response = await fetch(
19    `${JIRA_BASE_URL}/rest/api/3/issue/search?jql=${encodeURIComponent(jql)}&maxResults=${maxResults}&fields=summary,status,assignee,priority,issuetype,customfield_10016`,
20    {
21      headers: {
22        'Authorization': getAuthHeader(),
23        'Accept': 'application/json',
24      },
25    }
26  );
27
28  if (!response.ok) {
29    const error = await response.text();
30    return NextResponse.json({ error }, { status: response.status });
31  }
32
33  const data = await response.json();
34  return NextResponse.json(data);
35}
36
37export async function POST(request: Request) {
38  const body = await request.json();
39
40  const response = await fetch(`${JIRA_BASE_URL}/rest/api/3/issue`, {
41    method: 'POST',
42    headers: {
43      'Authorization': getAuthHeader(),
44      'Content-Type': 'application/json',
45      'Accept': 'application/json',
46    },
47    body: JSON.stringify({
48      fields: {
49        project: { key: body.projectKey },
50        summary: body.summary,
51        description: {
52          type: 'doc',
53          version: 1,
54          content: [{ type: 'paragraph', content: [{ type: 'text', text: body.description || '' }] }],
55        },
56        issuetype: { name: body.issueType || 'Task' },
57        priority: { name: body.priority || 'Medium' },
58        // Custom fields:
59        ...(body.customFields || {}),
60      },
61    }),
62  });
63
64  const data = await response.json();
65  return NextResponse.json(data, { status: response.status });
66}
67
68export async function PUT(request: Request) {
69  const body = await request.json();
70  const { issueKey, fields } = body;
71
72  const response = await fetch(`${JIRA_BASE_URL}/rest/api/3/issue/${issueKey}`, {
73    method: 'PUT',
74    headers: {
75      'Authorization': getAuthHeader(),
76      'Content-Type': 'application/json',
77    },
78    body: JSON.stringify({ fields }),
79  });
80
81  // Jira returns 204 No Content on success
82  if (response.status === 204) {
83    return NextResponse.json({ success: true });
84  }
85  const data = await response.json();
86  return NextResponse.json(data, { status: response.status });
87}

1# .env
2# Jira Configuration
3JIRA_BASE_URL=https://yourcompany.atlassian.net
4JIRA_EMAIL=your-email@example.com
5JIRA_API_TOKEN=your-api-token-here
6JIRA_PROJECT_KEY=MYPROJ

1// components/JiraDashboard.tsx
2import { useState, useEffect } from 'react';
3
4interface JiraIssue {
5  id: string;
6  key: string;
7  fields: {
8    summary: string;
9    status: { name: string; statusCategory: { colorName: string } };
10    assignee: { displayName: string; avatarUrls: { '24x24': string } } | null;
11    priority: { name: string; iconUrl: string };
12    customfield_10016: number | null; // story points
13  };
14}
15
16export function JiraDashboard() {
17  const [issues, setIssues] = useState<JiraIssue[]>([]);
18  const [jql, setJql] = useState('project is not EMPTY ORDER BY updated DESC');
19  const [loading, setLoading] = useState(false);
20  const [error, setError] = useState<string | null>(null);
21
22  const fetchIssues = async () => {
23    setLoading(true);
24    setError(null);
25    try {
26      const res = await fetch(`/api/jira?jql=${encodeURIComponent(jql)}&maxResults=50`);
27      const data = await res.json();
28      if (!res.ok) throw new Error(data.error || 'Failed to fetch issues');
29      setIssues(data.issues || []);
30    } catch (err) {
31      setError(err instanceof Error ? err.message : 'Unknown error');
32    } finally {
33      setLoading(false);
34    }
35  };
36
37  useEffect(() => { fetchIssues(); }, []);
38
39  return (
40    <div className="p-6">
41      <div className="flex gap-2 mb-4">
42        <input
43          value={jql}
44          onChange={e => setJql(e.target.value)}
45          className="flex-1 border rounded px-3 py-2 font-mono text-sm"
46          placeholder="JQL query..."
47        />
48        <button onClick={fetchIssues} className="bg-blue-600 text-white px-4 py-2 rounded">
49          Search
50        </button>
51      </div>
52      {loading && <div className="text-center py-8">Loading issues...</div>}
53      {error && <div className="text-red-600 p-3 bg-red-50 rounded">{error}</div>}
54      <table className="w-full border-collapse">
55        <thead>
56          <tr className="bg-gray-100">
57            <th className="text-left p-2 border">Key</th>
58            <th className="text-left p-2 border">Summary</th>
59            <th className="text-left p-2 border">Status</th>
60            <th className="text-left p-2 border">Assignee</th>
61            <th className="text-left p-2 border">Priority</th>
62            <th className="text-left p-2 border">Points</th>
63          </tr>
64        </thead>
65        <tbody>
66          {issues.map(issue => (
67            <tr key={issue.id} className="hover:bg-gray-50">
68              <td className="p-2 border font-mono text-blue-600">{issue.key}</td>
69              <td className="p-2 border">{issue.fields.summary}</td>
70              <td className="p-2 border">
71                <span className="px-2 py-1 rounded text-xs bg-gray-200">
72                  {issue.fields.status.name}
73                </span>
74              </td>
75              <td className="p-2 border">{issue.fields.assignee?.displayName || 'Unassigned'}</td>
76              <td className="p-2 border">{issue.fields.priority.name}</td>
77              <td className="p-2 border">{issue.fields.customfield_10016 ?? '-'}</td>
78            </tr>
79          ))}
80        </tbody>
81      </table>
82    </div>
83  );
84}

1// app/api/jira/webhook/route.ts
2import { NextResponse } from 'next/server';
3
4export async function POST(request: Request) {
5  const payload = await request.json();
6  const { webhookEvent, issue, changelog } = payload;
7
8  console.log(`Jira webhook received: ${webhookEvent} for ${issue?.key}`);
9
10  switch (webhookEvent) {
11    case 'jira:issue_created':
12      // Handle new issue — e.g., notify team, update cache
13      console.log(`New issue created: ${issue.key} - ${issue.fields.summary}`);
14      break;
15    case 'jira:issue_updated':
16      // Handle update — changelog.items shows what changed
17      const changes = changelog?.items?.map(
18        (item: { field: string; fromString: string; toString: string }) =>
19          `${item.field}: ${item.fromString} → ${item.toString}`
20      );
21      console.log(`Issue updated: ${issue.key}`, changes);
22      break;
23    case 'jira:issue_deleted':
24      console.log(`Issue deleted: ${issue.key}`);
25      break;
26    default:
27      console.log(`Unhandled webhook event: ${webhookEvent}`);
28  }
29
30  // Always return 200 quickly — Jira will retry if you return an error
31  return NextResponse.json({ received: true }, { status: 200 });
32}