How to Integrate Asana with V0

Open V0 at v0.dev and describe the project management interface you want to build. Asana's data model is rich — projects contain sections, sections contain tasks, and tasks have assignees, due dates, custom fields, and subtasks. When prompting V0, describe the visual layout you want (kanban board, list view, or timeline) and specify the data fields to display for each task. The most effective V0 prompts for Asana integrations describe concrete UI states: what an empty project looks like, what a loaded task card shows, what a task detail flyout contains, and what form fields appear when creating a new task. V0 generates clean React components with Tailwind CSS — for a kanban board, it will produce column containers with card components, drag handles, and column headers. For a list view, it generates sortable table rows with inline status badges. Specify the API endpoints your components should call (e.g., GET /api/asana/tasks for loading, POST /api/asana/tasks/create for creation) so V0 wires the fetch calls into the components. After generating, use V0's Git panel to connect your GitHub repository and push the generated code — this creates the foundation for adding your API routes in the next step.

Create the Next.js API routes that proxy requests to the Asana REST API. The Asana API base URL is https://app.asana.com/api/1.0 and all requests use your personal access token in the Authorization header as a Bearer token. The most common endpoint patterns you will need are: GET /projects/{project_gid}/tasks to fetch all tasks in a project, GET /tasks/{task_gid} to get a single task's details with all fields, POST /tasks to create a new task (requires workspace or projects in the request body), PUT /tasks/{task_gid} to update a task's status or section, and GET /projects/{project_gid}/sections to get the column structure. The Asana API supports an opt_fields query parameter that limits the response to only the fields you request — using this dramatically reduces response size. For example, opt_fields=name,assignee.name,due_on,completed,notes returns only those five fields per task instead of the full task object with dozens of fields. Asana's API is well-designed with consistent pagination — responses include a next_page object with an offset token when results are paginated. For most internal dashboards with under a few hundred tasks, pagination won't be necessary. Error responses from Asana use standard HTTP codes (400 for bad requests, 401 for invalid token, 403 for permission errors, 404 for missing resources) with a JSON body containing errors array with message fields.

1// app/api/asana/tasks/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3
4const ASANA_BASE = 'https://app.asana.com/api/1.0';
5const TASK_FIELDS = 'name,assignee.name,assignee.photo,due_on,completed,notes,memberships.section.name,custom_fields';
6
7async function asanaFetch(path: string, options: RequestInit = {}) {
8  const token = process.env.ASANA_PERSONAL_ACCESS_TOKEN;
9  if (!token) throw new Error('ASANA_PERSONAL_ACCESS_TOKEN is not configured');
10
11  const response = await fetch(`${ASANA_BASE}${path}`, {
12    ...options,
13    headers: {
14      Authorization: `Bearer ${token}`,
15      'Content-Type': 'application/json',
16      Accept: 'application/json',
17      ...((options.headers as Record<string, string>) || {}),
18    },
19  });
20
21  if (!response.ok) {
22    const error = await response.json().catch(() => ({ errors: [{ message: 'Unknown error' }] }));
23    const message = error?.errors?.[0]?.message || `Asana API error ${response.status}`;
24    throw new Error(message);
25  }
26
27  return response.json();
28}
29
30export async function GET(request: NextRequest) {
31  const projectGid = process.env.ASANA_PROJECT_GID;
32  if (!projectGid) {
33    return NextResponse.json({ error: 'ASANA_PROJECT_GID is not configured' }, { status: 500 });
34  }
35
36  try {
37    const data = await asanaFetch(
38      `/projects/${projectGid}/tasks?opt_fields=${TASK_FIELDS}&limit=100`
39    );
40    return NextResponse.json({ tasks: data.data });
41  } catch (error) {
42    const message = error instanceof Error ? error.message : 'Failed to fetch tasks';
43    return NextResponse.json({ error: message }, { status: 500 });
44  }
45}
46
47export async function POST(request: NextRequest) {
48  const projectGid = process.env.ASANA_PROJECT_GID;
49  const workspaceGid = process.env.ASANA_WORKSPACE_GID;
50
51  if (!projectGid || !workspaceGid) {
52    return NextResponse.json({ error: 'Asana project or workspace GID not configured' }, { status: 500 });
53  }
54
55  let body: { name: string; notes?: string; due_on?: string; assignee?: string };
56  try {
57    body = await request.json();
58  } catch {
59    return NextResponse.json({ error: 'Invalid request body' }, { status: 400 });
60  }
61
62  if (!body.name) {
63    return NextResponse.json({ error: 'Task name is required' }, { status: 400 });
64  }
65
66  try {
67    const data = await asanaFetch('/tasks', {
68      method: 'POST',
69      body: JSON.stringify({
70        data: {
71          name: body.name,
72          notes: body.notes || '',
73          due_on: body.due_on || null,
74          assignee: body.assignee || null,
75          projects: [projectGid],
76          workspace: workspaceGid,
77        },
78      }),
79    });
80    return NextResponse.json({ task: data.data }, { status: 201 });
81  } catch (error) {
82    const message = error instanceof Error ? error.message : 'Failed to create task';
83    return NextResponse.json({ error: message }, { status: 500 });
84  }
85}

Update your V0-generated components to fetch data from your Next.js API routes and display it. For the initial data load, use a React Server Component or a useEffect hook that calls GET /api/asana/tasks on mount. The API route returns a tasks array where each task contains the fields you requested via opt_fields. Map over the tasks array to render task cards, using task.name for the title, task.assignee?.name for the assignee display, task.due_on for the due date, and task.completed for the completion state. For task creation, wire up your form's submit handler to POST to /api/asana/tasks with the form data as JSON. After a successful creation, refresh the task list by re-fetching or optimistically inserting the new task into the local state. The most common local state pattern with V0-generated components is to store tasks in a useState array, add new tasks to the front of the array on creation, and replace the full array when re-fetching. For error handling, display error messages in a banner or toast component — Asana error messages are human-readable and can be shown directly to the user in most cases. Test the integration locally by running npm run dev and adding your environment variables to a .env.local file in the project root. You can find your workspace GID by navigating to any Asana page and inspecting the URL, or by calling GET https://app.asana.com/api/1.0/workspaces with your token in Postman or curl — it returns a list of workspaces with their GIDs.

Push your code to GitHub and configure Asana credentials in the Vercel Dashboard. Open the Vercel Dashboard, select your project, and navigate to Settings → Environment Variables. Add three variables: ASANA_PERSONAL_ACCESS_TOKEN with your personal access token (a long alphanumeric string starting with numbers — generate it at app.asana.com/0/my-profile-settings → Apps → Personal access tokens), ASANA_PROJECT_GID with the numeric GID of the Asana project you want to display (visible in the project URL: app.asana.com/0/{workspace_gid}/{project_gid}/list), and ASANA_WORKSPACE_GID with your workspace GID. None of these variables should have the NEXT_PUBLIC_ prefix — they are server-side secrets used only in your API routes. Set all variables for Production, Preview, and Development environments. After saving, redeploy your project from the Deployments tab or push a new commit to trigger auto-deployment. After deployment, test by navigating to your deployed app URL and verifying that tasks load from Asana. If tasks do not appear, check the Vercel Function Logs for error messages from your API route — common issues are an incorrect project GID (404 error) or a token with insufficient permissions (401 or 403 error). For teams using multiple Asana projects, you can extend the API route to accept a projectGid query parameter from the frontend rather than relying on a single environment variable — just validate the GID format before using it.