How to Integrate Todoist with V0

Todoist's personal API token is the simplest authentication method for single-user applications. Unlike services that require OAuth flows and callback URLs, the personal token is a static value you copy once and store in your environment variables. Log in to your Todoist account and go to Settings (the gear icon in the top right, or todoist.com/app/settings). Click Integrations in the left sidebar, then scroll down to the Developer section. You will see your API token listed there — a long alphanumeric string. Click the Copy button to copy it to your clipboard. This token gives full read and write access to your Todoist account: all projects, tasks, labels, and settings. Treat it as a secret — anyone with this token can read all your tasks and create, modify, or delete anything in your Todoist account. Store it as a server-side environment variable without the NEXT_PUBLIC_ prefix. If you want to build a multi-user application where each user signs in with their own Todoist account, you would need to implement Todoist's OAuth 2.0 flow. The personal API token only grants access to your own account. For a personal productivity dashboard or internal tool that only you use, the personal token is exactly right and much simpler to set up.

With your API token ready, prompt V0 to build the task dashboard or task management interface you need. Think about what view of your Todoist data would be most valuable: tasks due today filtered by project, a full task list with completion checkboxes, a Kanban-style board organized by priority, or a simple task input form that creates Todoist tasks. V0 can generate sophisticated task management UIs including draggable task lists, inline editing, priority badges with color coding, and animated completion checkboxes. The more specific you are in your prompt, the better the output. Mention the API endpoints the components should call — GET /api/todoist/tasks for fetching and POST /api/todoist/tasks for creating. For a task list component, you want V0 to generate a list where each item shows the task name, project name, due date, priority level (color-coded 1–4), and a completion checkbox. When the checkbox is clicked, it should call your API route to mark the task complete in Todoist. Optimistic UI (updating the checkbox immediately before the API call confirms) makes the interaction feel instant. For a task creation form, a minimal floating input that creates a task with a name and optional due date works well. Todoist supports natural language date parsing (e.g., 'tomorrow', 'next Monday', 'every week') which you can pass directly to the API and it interprets correctly.

Create the Next.js API routes that proxy requests between your V0 components and the Todoist REST API. Install @doist/todoist-api-typescript by adding it to package.json dependencies — this package provides a fully-typed TypeScript client with autocomplete for all Todoist entities. Create app/api/todoist/tasks/route.ts as your main task endpoint. The GET handler fetches tasks from Todoist, optionally filtered by project ID. The POST handler creates a new task. Todoist's API is straightforward: initialize the API client with your token, call the appropriate method, and return the result as JSON to your React components. Todoist's task filter system is powerful — you can pass filter strings like 'today', 'overdue', '#ProjectName', '@LabelName', or 'due before: 2024-12-31'. These are the same filters available in Todoist's own app. Use them to build exactly the task views you need. For completing tasks, Todoist uses a separate endpoint: POST to the close endpoint with the task ID. Create app/api/todoist/tasks/[id]/close/route.ts to handle this. After a task is closed in Todoist, it moves out of the active task list — your V0 component should remove it from the displayed list on success. Always handle Todoist API errors gracefully. The API returns 401 if your token is invalid, 404 if a task or project ID does not exist, and 429 if you exceed rate limits (a conservative 450 requests per 15 minutes). Cache frequently-fetched data like project lists with Next.js's built-in fetch caching to avoid hitting rate limits.

1import { TodoistApi } from '@doist/todoist-api-typescript';
2import { NextRequest, NextResponse } from 'next/server';
3
4const api = new TodoistApi(process.env.TODOIST_API_TOKEN!);
5
6export async function GET(request: NextRequest) {
7  try {
8    const { searchParams } = new URL(request.url);
9    const projectId = searchParams.get('project_id');
10    const filter = searchParams.get('filter');
11
12    let tasks;
13    if (filter) {
14      // Use Todoist filter syntax: 'today', 'overdue', '#ProjectName', '@LabelName'
15      tasks = await api.getTasks({ filter });
16    } else if (projectId) {
17      tasks = await api.getTasks({ projectId });
18    } else {
19      tasks = await api.getTasks();
20    }
21
22    return NextResponse.json(tasks);
23  } catch (error: any) {
24    console.error('Todoist tasks error:', error);
25    return NextResponse.json(
26      { error: 'Failed to fetch tasks' },
27      { status: 500 }
28    );
29  }
30}
31
32export async function POST(request: NextRequest) {
33  try {
34    const { content, projectId, dueString, priority, labels } = await request.json();
35
36    if (!content) {
37      return NextResponse.json(
38        { error: 'Task content is required' },
39        { status: 400 }
40      );
41    }
42
43    const task = await api.addTask({
44      content,
45      projectId,
46      dueString, // Supports natural language: 'tomorrow', 'every Monday', 'Jan 15'
47      priority: priority || 1, // 1 (normal) to 4 (urgent)
48      labels: labels || [],
49    });
50
51    return NextResponse.json(task, { status: 201 });
52  } catch (error: any) {
53    console.error('Todoist create task error:', error);
54    return NextResponse.json(
55      { error: 'Failed to create task' },
56      { status: 500 }
57    );
58  }
59}

Add your Todoist API token to Vercel before deploying. Open your Vercel Dashboard, select your project, click Settings, then Environment Variables. Add TODOIST_API_TOKEN with the value of your Todoist personal API token from Todoist Settings → Integrations → Developer. This token grants full read-write access to your Todoist account. Set it without any NEXT_PUBLIC_ prefix — the token must remain server-only. Ensure it is enabled for Production, Preview, and Development environments so the integration works across all Vercel deployment contexts. Also add NEXT_PUBLIC_BASE_URL if your application uses absolute URLs for any redirects. Set this to your Vercel deployment URL (https://your-project.vercel.app). After saving, trigger a new deployment by pushing a commit to GitHub. For local development, create a .env.local file in your project root with TODOIST_API_TOKEN=your_token_here. The Next.js dev server reads .env.local automatically, so your API routes can access the token during local testing. Once deployed, test the integration by opening your V0 dashboard on the Vercel URL. The projects list should populate from your real Todoist account, and clicking a project should show its tasks. Create a test task from the UI and verify it appears in your Todoist app — this confirms the write direction works as well.