Upgrade Your Obsidian Homepage: Build AI-Powered Smart Dashboard for Knowledge Workflow

For long-term Obsidian users, most custom home dashboards rely on basic Markdown combined with DataviewJS plugins. These simple layouts can display recent notes, daily task lists, reading heatmaps and file catalogs, but they lack compatibility with modern AI coding tools like Claude Code, Codex, custom Skills, RSS data feeds and GitHub open-source synchronization. This tutorial shares a complete hands-on workflow to rebuild your Obsidian homepage into an automated AI hub that connects your knowledge base with all mainstream LLM coding agents.

Limitations of Traditional Dataview Homepage Solutions

The classic DataviewJS homepage only focuses on local vault data queries and static page rendering, with obvious drawbacks in current AI work scenarios:

1. Cannot trigger one-click AI script execution inside the vault
2. No native integration channels to call Claude Code / Codex coding agents
3. Unable to load external dynamic data such as GitHub updates and RSS news
4. Cannot auto-generate structured notes via LLM based on inbox raw materials
5. Lacks one-click vault health inspection and knowledge sorting automation

The upgraded AI dashboard fixes all these pain points while retaining your original note query modules.

Step 1: Set Up Obsidian Custom Plugin Development Environment

Build a lightweight custom dashboard plugin to support AI agent docking, running independently without conflicting with existing community plugins:

# Create project directory
mkdir obsidian-ai-dashboard
cd obsidian-ai-dashboard
# Initialize npm environment
npm init -y
# Install official Obsidian API dependency
npm install @obsidianmd/obsidian-api typescript
# Add build script dependency
npm install --save-dev esbuild

Create core entry file main.ts:

import { Plugin } from "obsidian";

export default class AIDashboardPlugin extends Plugin {
  async onload() {
    // Register homepage dashboard view
    this.registerView("ai-dashboard-view", (leaf) => {
      return new AIDashboardView(leaf, this);
    });
    // Add sidebar button to open dashboard
    this.addRibbonIcon("dashboard", "Open AI Dashboard", () => {
      this.activateView();
    });
  }

  async activateView() {
    const { workspace } = this.app;
    let leaf = workspace.getLeaf(false);
    await leaf.setViewState({ type: "ai-dashboard-view", active: true });
  }
}

Add build configuration in package.json:

"scripts": {
  "dev": "esbuild main.ts --outfile=main.js --target=es2020 --watch",
  "build": "esbuild main.ts --outfile=main.js --target=es2020 --minify"
}

Run compilation and copy files to your vault's .obsidian/plugins/obsidian-ai-dashboard/ folder, then enable the plugin in Obsidian settings.

Step 2: Build Integrated Frontend Panel with Frontend-Design Skill

Instead of bulky UI frameworks, call the official frontend-design Skill from Claude Code to generate lightweight dashboard HTML components. Send this prompt:

Create an Obsidian dashboard UI with 4 core sections:
1. Original Dataview module: Recent files, pending tasks, monthly note heatmap
2. AI Agent operation area: Buttons for deep research, code generation, vault sorting
3. External data panel: RSS feed list, GitHub repository update log
4. Inbox processing module: Auto summarize raw markdown via LLM
Use plain HTML + inline CSS, compatible with Obsidian internal view.

Step 3: Realize One-Click AI Agent Calling

Add click triggers on dashboard buttons to send tasks to Claude Code or Codex via local API:

// Trigger deep research task
document.getElementById("btn-deep-research").addEventListener("click", async () => {
  const vaultPath = this.app.vault.getRoot().path;
  const prompt = `Run deep research on all unprocessed inbox files under ${vaultPath}/Inbox, organize structured knowledge notes and save to /Research folder`;

  const res = await fetch("http://127.0.0.1:8080/claude-code/run", {
    method: "POST",
    headers: {"Content-Type": "application/json"},
    body: JSON.stringify({ task: prompt })
  });
  const result = await res.json();
  new Notice(`Deep Research finished: ${result.fileCount} notes generated`);
});

Start the local Claude Code background service:

claude-code serve --port 8080

Step 4: Embed Dynamic External Data Modules

RSS Real-Time Feed

Add DataviewJS code block to pull subscription news:

const RSS = require("rss-parser");
const parser = new RSS();
const feedUrl = "https://example-tech-blog.com/feed.xml";
const feed = await parser.parseURL(feedUrl);
let list = "";
feed.items.slice(0,10).forEach(item => {
  list += `- [${item.title}](${item.link}) | ${item.pubDate}\n`
})
dv.header(3, "Latest Tech RSS");
dv.markdown(list);

GitHub Repository Sync Log

Call GitHub open API to display commit updates:

# Terminal test request for GitHub latest commits
curl https://api.github.com/repos/your-name/your-project/commits?per_page=5

Wrap the request in the dashboard plugin to auto-refresh commit logs every hour.

Step 5: Auto Vault Maintenance & Knowledge Sorting

Add a vault inspection button to execute batch sorting scripts through Codex:

Scan the entire Obsidian vault:
1. Mark orphan files without internal links
2. Tag untagged notes by content topic via LLM
3. Merge duplicate concept notes
4. Generate vault structure overview report and save as Vault-Overview.md

Final Optimization Tips

1. Retain your original Dataview query code to avoid abandoning existing note statistics
2. Limit concurrent AI task quantity to prevent local port service overload
3. Add switch toggles in plugin settings to turn off RSS/GitHub data modules when not needed
4. Bind hotkeys for core dashboard functions via Obsidian hotkey settings panel

常见问题

Will this plugin conflict with my existing Obsidian plugins?

No. The AI Dashboard plugin is a standalone custom plugin that runs independently. It doesn't modify or interfere with Dataview, Templater, or any other community plugins. You can keep all your existing plugins and simply add this one as a new dashboard layer.

Do I need to keep Claude Code running in the background?

Only when you want to trigger AI tasks from the dashboard. The claude-code serve command runs a lightweight HTTP server on port 8080 that listens for dashboard requests. When not in use, you can stop it to free resources. The dashboard itself works fine without it — you just won't have one-click AI execution until the service is running.

Can I customize which AI agent handles which task?

Yes. The button handlers in Step 3 are fully customizable. You can route different tasks to different agents — for example, send code generation to Codex, deep research to Claude Code, and vault organization to a local LLM. Just modify the fetch URL and payload for each button.