Building a frontend interface for Claude AI integration with my Obsidian notes

Frontend
1

I’m trying to set up a frontend that links Claude AI with my Obsidian notes. My goal is to send notes to Claude and receive answers, but I’m unclear on the best frontend implementation.

I have this structure in mind:

class ObsidianClaudeInterface {
  constructor(vaultPath, apiKey) {
    this.notesDirectory = vaultPath;
    this.claudeToken = apiKey;
  }
  
  async sendNoteToAI(noteContent) {
    const response = await fetch('/api/claude', {
      method: 'POST',
      body: JSON.stringify({ text: noteContent }),
      headers: { 'Authorization': this.claudeToken }
    });
    return response.json();
  }
}

Has anyone tackled something like this? I’m curious about the best approach for linking Obsidian with Claude’s API. Should it be a plugin or a standalone web app? Any tips would be appreciated.

2

I built something like this last year. Go with a custom Obsidian plugin instead of a standalone web app - way more reliable. You get direct access to Obsidian’s API, so file reading and writing just works. Your code looks good, but add proper error handling for API timeouts and throw in some response caching so you’re not making redundant requests. Also create a dedicated folder in your vault for Claude responses - keeps things organized. The hardest part was managing context windows. Don’t send entire documents. I preprocess my notes to pull only relevant sections first. Response quality got way better and I’m using way fewer tokens.

3

Interesting approach! Quick question though - how are u handling Obsidian’s different note formats? What happens to embedded images or linked notes when you send them to Claude? And are you sending full notes or just selected parts?

4

yo, i agree! plugins r def easier for this kinda stuff. a webapp has too many hurdles like permissions, plus obsidian has its own api that simplifies grabbing notes. just keep an eye on those rate limits, or u might get rejected by claude. good luck!