How to Integrate Trello with V0

Open V0 at v0.dev and start a new project. In the chat prompt, describe a kanban board layout with multiple columns. Be specific about the visual design: column headers with card counts, draggable card items with titles and labels, and a clean Tailwind-based layout. V0 will generate a React component using shadcn/ui and Tailwind CSS out of the box. At this stage, use static mock data — hardcode a few boards and cards in the component props so you can see and refine the layout before connecting to real data. Once the preview looks right, switch to V0's Design Mode (Option+D) to adjust colors, spacing, and typography without spending any credits. Pay attention to how V0 structures the props for the board data — you want an interface that accepts boards, lists, and cards as nested objects. If V0 generates a flat structure, send a follow-up prompt asking it to accept a hierarchical data structure. The goal of this first step is a pixel-perfect kanban UI that you can drop Trello data into later. V0's Tailwind output is production-ready, so what you see in the preview is what your users will see on Vercel.

Before writing any backend code, you need to collect your Trello credentials. Trello uses a two-part authentication system: an API key that identifies your application, and a token that grants access to your account's data. To get your API key, go to https://trello.com/app-key while logged into Trello. You'll see your API key displayed at the top of the page — it looks like a 32-character alphanumeric string. Copy and save it. Below the API key, click the Token link to generate an access token. Trello will ask you to authorize the application — click Allow. You'll be shown a long token string. Copy this as well. Note: the token shown on this page grants full read and write access to your Trello account, so treat it like a password. Never paste it into your V0 chat prompt or your source code. If you want to limit access to read-only or to specific boards, Trello's OAuth flow supports scopes and expiry, but for a personal project the simple key-and-token approach works fine. You can also create Power-Up developer API keys via https://trello.com/power-ups/admin for more control. Once you have both credentials, you're ready to configure your Vercel environment variables and write the API route.

In V0's code editor, create a new file at app/api/trello/route.ts. This file exports a GET handler that fetches boards and their cards from the Trello REST API. The Trello API base URL is https://api.trello.com/1. All endpoints accept key and token as query parameters — you append them to every request using your server-side environment variables. For the boards list endpoint, the URL is https://api.trello.com/1/members/me/boards?key={key}&token={token}&fields=name,id,url. For a specific board's lists with nested cards, use https://api.trello.com/1/boards/{boardId}/lists?key={key}&token={token}&cards=open&card_fields=name,desc,labels,due,idMembers. The API returns JSON directly — no SDK is required, just the built-in fetch function. In your API route, read TRELLO_API_KEY and TRELLO_TOKEN from process.env, construct the URL, call fetch, parse the JSON, and return it with Response.json(). For creating cards, add a POST handler that reads the request body and calls the Trello cards endpoint. Always validate that the required fields are present before forwarding to Trello to avoid exposing Trello's raw error messages to your frontend. Keep the API key and token entirely inside this server-side route — they should never appear in any client component.

1import { NextRequest } from 'next/server';
2
3const TRELLO_KEY = process.env.TRELLO_API_KEY!;
4const TRELLO_TOKEN = process.env.TRELLO_TOKEN!;
5const BASE = 'https://api.trello.com/1';
6
7export async function GET(request: NextRequest) {
8  const { searchParams } = new URL(request.url);
9  const boardId = searchParams.get('boardId');
10
11  if (!boardId) {
12    // Return all boards for the authenticated member
13    const res = await fetch(
14      `${BASE}/members/me/boards?key=${TRELLO_KEY}&token=${TRELLO_TOKEN}&fields=name,id,url`
15    );
16    const boards = await res.json();
17    return Response.json(boards);
18  }
19
20  // Return lists with nested open cards for a specific board
21  const res = await fetch(
22    `${BASE}/boards/${boardId}/lists?key=${TRELLO_KEY}&token=${TRELLO_TOKEN}&cards=open&card_fields=name,desc,labels,due,idMembers`
23  );
24  const lists = await res.json();
25  return Response.json(lists);
26}
27
28export async function POST(request: NextRequest) {
29  const { listId, name, desc, due } = await request.json();
30
31  if (!listId || !name) {
32    return Response.json({ error: 'listId and name are required' }, { status: 400 });
33  }
34
35  const params = new URLSearchParams({
36    key: TRELLO_KEY,
37    token: TRELLO_TOKEN,
38    idList: listId,
39    name,
40    ...(desc && { desc }),
41    ...(due && { due }),
42  });
43
44  const res = await fetch(`${BASE}/cards`, {
45    method: 'POST',
46    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
47    body: params.toString(),
48  });
49
50  const card = await res.json();
51  return Response.json(card, { status: res.ok ? 201 : res.status });
52}

Your Trello API key and token must live in Vercel's environment variable system — never in your source code. If you commit these credentials to GitHub, anyone with repo access (or who finds your public repo) can read and write your entire Trello workspace. To set the variables, first connect your V0 project to GitHub using V0's Git panel, then open your Vercel project at vercel.com/dashboard. Click on your project, go to Settings, then Environment Variables. Add two variables: set TRELLO_API_KEY to your 32-character API key, and TRELLO_TOKEN to the long token string. For each variable, make sure all three environment scopes are checked: Production, Preview, and Development. Click Save after each. Important: after adding new environment variables to a Vercel project, you must trigger a new deployment for the changes to take effect — Vercel will show a banner prompting you to redeploy. For local development, create a .env.local file in the root of your project with the same two variables. Add .env.local to your .gitignore file immediately — it should already be there if you started with the default Next.js gitignore, but double-check. Never prefix these with NEXT_PUBLIC_ — these credentials are server-only and should never be sent to the browser.

1# .env.local — never commit this file to git
2TRELLO_API_KEY=your_32_character_api_key_here
3TRELLO_TOKEN=your_long_token_string_here

With the API route deployed and credentials configured, wire the kanban board component to fetch real Trello data. The approach depends on what kind of page you're building. For a dashboard that shows all your boards, call GET /api/trello on the server side using a React Server Component — this eliminates loading states and gives great performance. For a single-board view that users interact with (adding cards, moving between lists), use a Client Component with useEffect for the initial fetch and SWR or React Query for background refreshing. When the user submits the card creation form, send a POST request to /api/trello with the listId, title, and optional description. After a successful POST, refetch the board data to show the new card. One important V0-specific limitation to be aware of: V0's preview sandbox cannot make outbound requests to the Trello API during development in the browser preview. The API calls will only work after you deploy to Vercel. So your development workflow should be: test the UI layout in V0 preview with mock data, then deploy to Vercel and test the live API integration there. If you're iterating quickly, use Vercel's preview deployments — every push to a branch creates a preview URL with its own environment. For complex dashboards with real-time updates (such as showing when teammates move cards), look into Trello webhooks via the https://api.trello.com/1/webhooks endpoint to push changes to your app instead of polling.

1'use client';
2
3import { useEffect, useState } from 'react';
4
5interface TrelloCard {
6  id: string;
7  name: string;
8  desc: string;
9  due: string | null;
10  labels: { color: string; name: string }[];
11}
12
13interface TrelloList {
14  id: string;
15  name: string;
16  cards: TrelloCard[];
17}
18
19export default function TrelloBoard({ boardId }: { boardId: string }) {
20  const [lists, setLists] = useState<TrelloList[]>([]);
21  const [loading, setLoading] = useState(true);
22  const [error, setError] = useState('');
23
24  const fetchBoard = async () => {
25    try {
26      const res = await fetch(`/api/trello?boardId=${boardId}`);
27      if (!res.ok) throw new Error('Failed to fetch board');
28      const data = await res.json();
29      setLists(data);
30    } catch (err) {
31      setError('Could not load board data. Check your Trello credentials.');
32    } finally {
33      setLoading(false);
34    }
35  };
36
37  useEffect(() => { fetchBoard(); }, [boardId]);
38
39  if (loading) return <div className="p-8 text-gray-500">Loading board...</div>;
40  if (error) return <div className="p-8 text-red-500">{error}</div>;
41
42  return (
43    <div className="flex gap-4 p-4 overflow-x-auto min-h-screen bg-blue-600">
44      {lists.map((list) => (
45        <div key={list.id} className="bg-gray-100 rounded-lg p-3 w-64 shrink-0">
46          <h3 className="font-semibold text-gray-800 mb-2">
47            {list.name}
48            <span className="ml-2 text-xs bg-gray-300 rounded-full px-2 py-0.5">
49              {list.cards.length}
50            </span>
51          </h3>
52          <div className="space-y-2">
53            {list.cards.map((card) => (
54              <div key={card.id} className="bg-white rounded p-2 shadow-sm">
55                <p className="text-sm font-medium text-gray-900">{card.name}</p>
56                {card.due && (
57                  <p className="text-xs text-gray-500 mt-1">
58                    Due: {new Date(card.due).toLocaleDateString()}
59                  </p>
60                )}
61              </div>
62            ))}
63          </div>
64        </div>
65      ))}
66    </div>
67  );
68}

With all pieces in place, deploy your project to Vercel. If you connected V0 to GitHub in an earlier step, Vercel triggers a deployment automatically on every push. You can also click Redeploy in the Vercel Dashboard. The deployment usually takes 30–60 seconds. Once the green checkmark appears, open the production URL and navigate to your Trello board page. You should see your real boards and cards rendered in the custom kanban layout. To debug any issues, go to Vercel Dashboard → your project → Functions. This tab lists all your API routes as serverless functions and shows invocation logs, error traces, and response times. If you see a 401 error from Trello, your token has expired or was entered incorrectly — regenerate it at https://trello.com/app-key and update the Vercel environment variable, then redeploy. If cards are showing but look empty, check that the card_fields parameter in your GET endpoint includes the fields you're trying to display. For teams building production Trello integrations with user authentication (where each user connects their own Trello account), RapidDev can help implement the full Trello OAuth 2.0 flow so users log in with their own credentials rather than sharing a single service token.