How to Integrate Evernote with V0

Open V0 at v0.dev and describe the note browsing or display interface you want to build. Evernote interfaces work well as two or three column layouts: a narrow notebook sidebar, a note list panel, and an optional note detail panel. For simpler interfaces (just a note list), a table or card grid is sufficient. Be explicit in your V0 prompt about the data fields you want to show — Evernote note metadata includes guid (the unique identifier used in API calls), title, created (Unix timestamp in milliseconds), updated (Unix timestamp in milliseconds), and tagNames (array of tag strings). Ask V0 to generate components that accept these fields so the wiring is clean. V0 generates React components with Tailwind CSS and shadcn/ui that handle the layout and interactivity. Since Evernote's API uses the evernote npm package (not a simple REST call), all API work happens in Next.js API routes. The V0 component just fetches data from your API routes via fetch calls. After generating the component, push to GitHub using V0's Git panel and then move on to creating the API routes.

Install the evernote npm package in your Next.js project, then create the API routes for notebooks, note listing, and note content. Run npm install evernote in your project directory before writing the route code. The Evernote npm package provides an Evernote.Client that handles the Thrift protocol abstraction. You initialize the client with your developer token and the sandbox flag (false for production, true for the Evernote sandbox). The NoteStore is the primary API object — get it via client.getNoteStore(), then use noteStore.listNotebooks() for notebooks, noteStore.findNotesMetadata() for note lists with search filters, and noteStore.getNoteContent() for note content. The findNotesMetadata method accepts a NoteFilter (for search/notebook filtering) and a NotesMetadataResultSpec (for specifying which metadata fields to return). Always specify resultSpec.includeTitle = true and resultSpec.includeUpdated = true to get the fields you need for display. Note that the evernote package returns content in ENML format (a subset of XHTML) — you can display this in a React component using dangerouslySetInnerHTML after stripping the ENML wrapper tags, but be aware of XSS risks if the content is from untrusted sources.

1// app/api/evernote/notebooks/route.ts
2import { NextResponse } from 'next/server';
3import Evernote from 'evernote';
4
5export async function GET() {
6  const token = process.env.EVERNOTE_TOKEN;
7
8  if (!token) {
9    return NextResponse.json({ error: 'Evernote is not configured' }, { status: 500 });
10  }
11
12  const client = new Evernote.Client({
13    token,
14    sandbox: false, // true for dev.evernote.com sandbox
15    china: false,
16  });
17
18  try {
19    const noteStore = client.getNoteStore();
20    const notebooks = await noteStore.listNotebooks();
21
22    return NextResponse.json({
23      notebooks: notebooks.map((nb) => ({
24        guid: nb.guid,
25        name: nb.name,
26        updateSequenceNum: nb.updateSequenceNum,
27        defaultNotebook: nb.defaultNotebook || false,
28      })),
29    });
30  } catch (error) {
31    const message = error instanceof Error ? error.message : 'Unknown error';
32    console.error('Evernote notebooks error:', message);
33    return NextResponse.json(
34      { error: 'Failed to fetch notebooks', details: message },
35      { status: 500 }
36    );
37  }
38}
39
40// app/api/evernote/notes/route.ts
41// (separate file — shown here as a combined reference)
42// import { NextRequest, NextResponse } from 'next/server';
43// import Evernote from 'evernote';
44//
45// export async function GET(request: NextRequest) {
46//   const { searchParams } = new URL(request.url);
47//   const notebookGuid = searchParams.get('notebookGuid');
48//   const tagName = searchParams.get('tag');
49//   const words = searchParams.get('q');
50//
51//   const filter = new Evernote.NoteStore.NoteFilter({
52//     notebookGuid: notebookGuid || undefined,
53//     tagGuids: undefined,
54//     words: tagName ? `tag:${tagName}` : words || undefined,
55//   });
56//
57//   const resultSpec = new Evernote.NoteStore.NotesMetadataResultSpec({
58//     includeTitle: true,
59//     includeUpdated: true,
60//     includeCreated: true,
61//     includeTagGuids: true,
62//     includeTagNames: true,
63//   });
64//
65//   const noteStore = client.getNoteStore();
66//   const result = await noteStore.findNotesMetadata(filter, 0, 50, resultSpec);
67//   return NextResponse.json({ notes: result.notes, totalNotes: result.totalNotes });
68// }

Create an API route for fetching individual note content and wire all routes to the V0-generated component. The note content endpoint needs a dynamic route to accept the note GUID: create app/api/evernote/note/[guid]/route.ts. The noteStore.getNote() method returns full note data including the ENML content. ENML is an XML-based format — to display it in a React component, strip the <?xml> declaration and <en-note> wrapper tags and pass the inner HTML using dangerouslySetInnerHTML. For production apps with sensitive data, sanitize the HTML with a library like DOMPurify before rendering. Update your V0 component to fetch notebooks on mount, then notes for the selected notebook, then note content when a note is clicked. The loading states V0 generates (skeleton cards while fetching) improve perceived performance since Evernote API calls can take 1-2 seconds for large note archives. Consider implementing client-side caching with React's useState or a simple in-memory Map to avoid re-fetching notebooks and note metadata on every click — Evernote data doesn't change frequently enough to need real-time freshness for most use cases.

1// app/api/evernote/note/[guid]/route.ts
2import { NextRequest, NextResponse } from 'next/server';
3import Evernote from 'evernote';
4
5export async function GET(
6  request: NextRequest,
7  { params }: { params: { guid: string } }
8) {
9  const token = process.env.EVERNOTE_TOKEN;
10
11  if (!token) {
12    return NextResponse.json({ error: 'Evernote is not configured' }, { status: 500 });
13  }
14
15  const { guid } = params;
16
17  if (!guid) {
18    return NextResponse.json({ error: 'Note GUID is required' }, { status: 400 });
19  }
20
21  const client = new Evernote.Client({
22    token,
23    sandbox: false,
24    china: false,
25  });
26
27  try {
28    const noteStore = client.getNoteStore();
29
30    // Fetch note with content
31    const note = await noteStore.getNote(
32      guid,
33      true, // withContent
34      false, // withResourcesData
35      false, // withResourcesRecognition
36      false  // withResourcesAlternateData
37    );
38
39    // Strip ENML wrapper to get displayable HTML
40    let content = note.content || '';
41    // Remove XML declaration
42    content = content.replace(/<\?xml[^>]*>/, '').trim();
43    // Replace en-note wrapper with a div
44    content = content
45      .replace(/<en-note[^>]*>/, '<div class="enml-content">')
46      .replace(/<\/en-note>/, '</div>');
47
48    return NextResponse.json({
49      guid: note.guid,
50      title: note.title,
51      content,
52      created: note.created,
53      updated: note.updated,
54      tagNames: note.tagNames || [],
55    });
56  } catch (error) {
57    const message = error instanceof Error ? error.message : 'Unknown error';
58    console.error('Evernote note content error:', message);
59    return NextResponse.json(
60      { error: 'Failed to fetch note content', details: message },
61      { status: 500 }
62    );
63  }
64}

Push your code to GitHub and configure the Evernote developer token in Vercel. Open the Vercel Dashboard, navigate to your project, and go to Settings → Environment Variables. Add EVERNOTE_TOKEN with your Evernote developer token — for production use, this is the token from your approved Evernote API application. For initial development and testing, use the sandbox token from dev.evernote.com/doc/articles/dev_tokens.php, but remember to update to a production token and change sandbox: false before the final deployment. The developer token is a long alphanumeric string — do not add the NEXT_PUBLIC_ prefix, as this is a server-side secret. Set the variable for Production, Preview, and Development environments. Important: if you're in the Evernote sandbox (testing environment), set a separate EVERNOTE_SANDBOX variable so you can conditionally switch between sandbox and production based on the deployment environment. After adding the variable, trigger a redeployment. Test the live deployment by visiting /api/evernote/notebooks — you should see your notebooks list. Then test the full note browsing flow through the UI. For production Evernote API applications, the approval process requires submitting your use case to Evernote — plan for 1-3 business days for approval before going live.