How to Integrate Bolt.new with Todoist

Todoist provides a personal API token that grants access to all your data. To find it, log into Todoist and navigate to Settings (click your avatar bottom-left) → Integrations → Developer. Your API token is displayed under the 'API token' heading. Copy it — this is what authenticates every API call your Bolt app makes to Todoist. Unlike some APIs that use API keys as query parameters, Todoist uses standard HTTP Bearer token authentication. Every request includes an Authorization header in the format 'Bearer {your-token}'. This is different from ClickUp (which uses the raw token without 'Bearer') — with Todoist you do need the 'Bearer' prefix. Create a .env.local file in your Bolt project root with your token. Since the token must stay server-side, do not prefix it with NEXT_PUBLIC_ and do not prefix it with VITE_. Access it only inside Next.js API routes using process.env.TODOIST_API_TOKEN. Your project ID is safe to expose publicly (it is just an identifier), but for consistency keep it in .env as well. You can find your project IDs by opening a project in Todoist — the project ID appears in the URL: app.todoist.com/app/project/2349123456. You can also fetch all your projects programmatically using the /projects endpoint once your token is configured.

1// .env.local
2TODOIST_API_TOKEN=your_api_token_here
3TODOIST_PROJECT_ID=your_default_project_id

The Todoist REST API v2 uses a simple, intuitive endpoint structure. To fetch tasks, make a GET request to https://api.todoist.com/rest/v2/tasks. Without any query parameters, this returns all active (not completed) tasks across all projects. You can filter using query parameters: project_id to limit to a specific project, label to filter by label name, filter to use Todoist's native filter query language (e.g., 'today | overdue' shows today's and overdue tasks), assignee_id for shared projects, and priority for filtering by priority level (1=normal, 2=medium, 3=high, 4=urgent — note this is the reverse of ClickUp's numbering). Task objects in the response include: id, content (the task name), description (plain text notes), project_id, section_id, parent_id (for subtasks), order, labels (array of label names), priority (1-4), due (object with date, datetime, string, timezone), url (link to task in Todoist app), comment_count, creator_id, created_at, and assignee_id. The due object is particularly useful — it contains both the human-readable string (like 'every Monday') and the parsed date/datetime values. Use due.date for all-day tasks and due.datetime for tasks with specific times. Since these are outbound API calls, they work perfectly in Bolt's WebContainer preview without any deployment needed. You can build and fully test the entire read-only dashboard in Bolt before deploying.

1// app/api/todoist/tasks/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const TODOIST_API = 'https://api.todoist.com/rest/v2';
5const API_TOKEN = process.env.TODOIST_API_TOKEN;
6
7type TodoistTask = {
8  id: string;
9  content: string;
10  description: string;
11  project_id: string;
12  priority: number;
13  due: { date: string; datetime: string | null; string: string } | null;
14  labels: string[];
15  url: string;
16};
17
18export async function GET(request: NextRequest) {
19  const { searchParams } = new URL(request.url);
20  const projectId = searchParams.get('project_id');
21  const filter = searchParams.get('filter');
22
23  const params = new URLSearchParams();
24  if (projectId) params.set('project_id', projectId);
25  if (filter) params.set('filter', filter);
26
27  const url = `${TODOIST_API}/tasks${params.toString() ? '?' + params.toString() : ''}`;
28
29  const response = await fetch(url, {
30    headers: { Authorization: `Bearer ${API_TOKEN}` },
31  });
32
33  if (!response.ok) {
34    return NextResponse.json(
35      { error: `Todoist API error: ${response.status}` },
36      { status: response.status }
37    );
38  }
39
40  const tasks: TodoistTask[] = await response.json();
41
42  // Sort by priority descending, then by due date
43  const sorted = tasks.sort((a, b) => {
44    if (b.priority !== a.priority) return b.priority - a.priority;
45    if (!a.due && !b.due) return 0;
46    if (!a.due) return 1;
47    if (!b.due) return -1;
48    return new Date(a.due.date).getTime() - new Date(b.due.date).getTime();
49  });
50
51  return NextResponse.json({ tasks: sorted, count: sorted.length });
52}

Creating tasks in Todoist via the API is where the integration really shines. The POST /tasks endpoint accepts the content field (the task name, which can include Markdown formatting) and a rich set of optional fields. The most powerful optional field is due_string — Todoist's natural language parser will convert values like 'every Monday at 9am', 'next Friday', 'in 2 weeks', 'tomorrow', or 'June 15' into proper recurring or one-time due dates. This means you can build forms where users type natural language dates instead of using a date picker. Other useful fields for task creation: description (plain text or Markdown notes appended below the task), project_id (defaults to Inbox if omitted), section_id (places the task in a specific section within the project), labels (array of label name strings — labels are created automatically if they don't exist), priority (1=normal, 2=medium, 3=high, 4=urgent), parent_id (to create a subtask under an existing task), and assignee_id (for shared projects with multiple collaborators). To update an existing task, use POST /tasks/{taskId} with only the fields you want to change. To mark a task complete, send POST /tasks/{taskId}/close — the response is an empty 204 No Content. To reopen a completed task, use POST /tasks/{taskId}/reopen. All these mutation operations work fine as outbound HTTP requests from Bolt's WebContainer. You can create, update, and close tasks in development without deploying. Webhook notifications — where Todoist pushes events to your server — require a deployed URL, but you do not need webhooks to build a fully functional task creation interface.

1// app/api/todoist/tasks/create/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { randomUUID } from 'crypto';
4
5const TODOIST_API = 'https://api.todoist.com/rest/v2';
6const API_TOKEN = process.env.TODOIST_API_TOKEN;
7const DEFAULT_PROJECT_ID = process.env.TODOIST_PROJECT_ID;
8
9export async function POST(request: NextRequest) {
10  const {
11    content,
12    description,
13    project_id,
14    priority,
15    due_string,
16    labels,
17    parent_id,
18  } = await request.json();
19
20  if (!content || typeof content !== 'string' || content.trim() === '') {
21    return NextResponse.json({ error: 'content is required' }, { status: 400 });
22  }
23
24  const taskBody: Record<string, unknown> = {
25    content: content.trim(),
26    project_id: project_id ?? DEFAULT_PROJECT_ID,
27    priority: priority ?? 1,
28  };
29
30  if (description) taskBody.description = description;
31  if (due_string) taskBody.due_string = due_string;
32  if (labels && Array.isArray(labels)) taskBody.labels = labels;
33  if (parent_id) taskBody.parent_id = parent_id;
34
35  const response = await fetch(`${TODOIST_API}/tasks`, {
36    method: 'POST',
37    headers: {
38      Authorization: `Bearer ${API_TOKEN}`,
39      'Content-Type': 'application/json',
40      'X-Request-Id': randomUUID(), // Idempotency key for safe retries
41    },
42    body: JSON.stringify(taskBody),
43  });
44
45  if (!response.ok) {
46    const errorText = await response.text();
47    return NextResponse.json(
48      { error: errorText || `Todoist API error: ${response.status}` },
49      { status: response.status }
50    );
51  }
52
53  const task = await response.json();
54  return NextResponse.json({ id: task.id, content: task.content, url: task.url });
55}

While task reading and creation work perfectly in Bolt's WebContainer preview, Todoist webhooks require a publicly accessible URL to deliver real-time notifications. Webhooks let Todoist push events to your server the instant something changes — a task is completed, a new task is added, a comment is posted — rather than your app polling for changes. This is essential for keeping a dashboard up-to-date in real time. To deploy your Bolt app to Netlify, click the Publish button in the top-right corner of Bolt, or go to Settings → Applications → Connect Netlify. After deployment, you will have a public URL like your-app.netlify.app. For Vercel, use Bolt's GitHub integration to push your code to a repository, then connect that repository in Vercel's dashboard. Once deployed, register a Todoist webhook through the Todoist developer console at developer.todoist.com/appconsole. You will need to create a Todoist app to get a client ID and secret for webhook signature verification. Set the webhook URL to your-app.netlify.app/api/todoist/webhook. Subscribe to the event types you care about: item:added, item:completed, item:updated, item:deleted. When Todoist sends a webhook, it includes an X-Todoist-Hmac-SHA256 header containing an HMAC-SHA256 signature of the request body. You must verify this signature in your webhook handler using your app's client secret to prevent processing fake events. The webhook payload includes the event_name, user_id, and event_data object containing the full task or project data. For development testing without deploying, use a tool like ngrok to expose your local Bolt dev server to the internet temporarily, then register that ngrok URL as your webhook endpoint.

1// app/api/todoist/webhook/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import { createHmac } from 'crypto';
4
5const CLIENT_SECRET = process.env.TODOIST_CLIENT_SECRET ?? '';
6
7function verifyTodoistSignature(body: string, signature: string): boolean {
8  const expected = createHmac('sha256', CLIENT_SECRET)
9    .update(body)
10    .digest('base64');
11  return expected === signature;
12}
13
14export async function POST(request: NextRequest) {
15  const signature = request.headers.get('x-todoist-hmac-sha256') ?? '';
16  const rawBody = await request.text();
17
18  if (!verifyTodoistSignature(rawBody, signature)) {
19    return NextResponse.json({ error: 'Invalid signature' }, { status: 401 });
20  }
21
22  const payload = JSON.parse(rawBody);
23  const { event_name, event_data } = payload;
24
25  console.log(`Todoist webhook: ${event_name}`, event_data);
26
27  switch (event_name) {
28    case 'item:added':
29      // Handle new task creation
30      break;
31    case 'item:completed':
32      // Handle task completion
33      break;
34    case 'item:updated':
35      // Handle task update
36      break;
37    default:
38      break;
39  }
40
41  return NextResponse.json({ received: true });
42}