ModernBlog is a high-performance, AI-augmented platform designed for thinkers, learners, and creators. It blends professional engineering with personal development tools, creating a digital garden that grows alongside you.
ModernBlog isn't just a content management system; it’s an intellectual partner. By combining the Next.js 15 ecosystem with AI Services, it transforms static writing into an interactive journey of self-improvement and discovery.
- Next.js 15 (App Router): Leveraging the latest in React Server Components for a lightning-fast, "instant-load" reading experience.
- Prisma ORM & PostgreSQL: Ensuring your thoughts and data are persisted in a robust, structured way (moving beyond local SQLite for production).
- Tailwind CSS 4: A streamlined, modern aesthetic that prioritizes readability and focus.
ModernBlog is designed to integrate seamlessly with LLMs (OpenAI, Anthropic) to provide:
- Intelligent Summarization: Automatically distill long-form reflections into actionable insights.
- Semantic Search: Find connections between your past thoughts using vector-based search.
- Growth Analytics: AI-driven tracking of personal milestones and writing patterns.
Clean, logical, and optimized for both human developers and AI agents.
src/
├── app/ # The heart of the blog: routes, layouts, and growth-tracking views
├── components/ # Beautiful, accessible UI components (shadcn/ui)
├── lib/ # AI service integrations, Prisma client, and utility logic
├── schemas/ # The shared "Truth": Zod models for your data and AI prompts
└── hooks/ # Reactive logic for a seamless user experience
Clone the repository and install dependencies using npm:
npm install
Replace .env.example to actual info and rename it to .env
Generate the Prisma client and push the schema to your database:
npx prisma generate
npx prisma db push
Create admin account:
npx prisma db seedCheck if admin exist (optional):
npx prisma studioStart the local development environment:
npm run devThe application will be accessible at http://localhost:3000.
ModernBlog ships with a built-in MCP (Model Context Protocol) server integrated directly into the Next.js application. Any MCP-compatible AI assistant — VS Code Copilot, Claude Desktop, Cursor, or custom agents — can read, write, and manage your blog through natural conversation.
| Mode | Endpoint | Use Case |
|---|---|---|
| HTTP (Streamable) | http://localhost:3000/personal-blog-mcp-server |
Remote clients, web-based agents, multi-session |
| Stdio | npx tsx scripts/mcp-stdio.ts |
VS Code, Claude Desktop, local dev |
Both modes share the same 63 tools and auth system via the shared code in src/lib/mcp/.
| Benefit | Description |
|---|---|
| Conversational Blogging | Draft, edit, and publish posts by talking to your AI assistant — no dashboard clicking required. |
| AI-Powered Workflows | Chain tools together: generate a draft → summarize → publish → share. All in one conversation. |
| Full Admin Control | Manage posts, projects, garden notes, hub content, and site settings entirely through AI tools. |
| Secure Multi-User Auth | Regular users and admins get separate permission levels. Admin tools are blocked for non-admin sessions. |
| Session Introspection | auth_whoami instantly shows your current login state — no guessing if you're authenticated. |
| 63 Tools, Zero Config | Every API endpoint is exposed as a named tool with typed inputs. The AI knows exactly what's available. |
No separate install needed — the MCP server is part of the main project. Just start the Next.js app:
npm install
npm run dev # MCP HTTP endpoint is live at /personal-blog-mcp-serverA .vscode/mcp.json is already included with both transport modes:
{
"servers": {
"personal-blog": {
"type": "stdio",
"command": "npx",
"args": ["tsx", "${workspaceFolder}/scripts/mcp-stdio.ts"],
"env": { "BLOG_API_URL": "http://localhost:3000" }
},
"personal-blog-http": {
"type": "http",
"url": "http://localhost:3000/personal-blog-mcp-server"
}
}
}Add to your claude_desktop_config.json:
{
"mcpServers": {
"personal-blog": {
"command": "npx",
"args": ["tsx", "/path/to/personal_blog/scripts/mcp-stdio.ts"],
"env": {
"BLOG_API_URL": "https://your-blog.com"
}
}
}
}- Start a session — The AI calls
auth_loginwith your credentials. Session cookies are stored automatically. - Use any tool — Ask the AI to list posts, create a garden note, update settings, etc. Each tool maps to one API endpoint.
- Admin tools are gated — If you login as a regular user, admin-only tools (create post, manage settings) return a clear "insufficient privileges" error. Login with an admin account to unlock them.
- Check your session — Call
auth_whoamiat any time to see if you're logged in, what role you have, and whether admin tools are available.
| Category | Examples | Access |
|---|---|---|
| System | health_check, system_status, system_stats |
Public |
| Auth | auth_login, auth_logout, auth_whoami, auth_check |
Public |
| Posts | list_posts, get_post, react_to_post |
Public / Auth |
| Projects | list_projects, get_project |
Public |
| Garden | list_garden_notes, get_garden_note |
Public |
| Comments | list_comments, create_comment |
Auth |
| AI Services | ai_text_generate, ai_web_search, ai_mnemonic_generate, ... |
Mixed |
| User | get_user_profile, update_user_profile, toggle_bookmark, ... |
Auth |
| Admin | admin_create_post, admin_update_hub, admin_update_settings, ... |
Admin |
Full tool reference with input schemas is available in
mcp-server/SKILL.md. MCP source code lives insrc/lib/mcp/.
You: "Login to my blog as admin@example.com"
AI: → calls auth_login → "Logged in as admin@example.com (admin)"
You: "Create a new post about TypeScript generics"
AI: → calls admin_create_post → "Post created: TypeScript Generics 101"
You: "Now summarize it"
AI: → calls summarize_post → returns a 3-sentence summary
You: "Who am I logged in as?"
AI: → calls auth_whoami → "admin@example.com, role: admin, isAdmin: true"
I still lack of ideas on how to integrate (AI image and AI video into summary and reflection part). Therefore, although there are AI generation tool there, it is not fully functional.
Meanwhile, I am lacking ideas on badge creation, I am thinking about a custom badge for admin to add themselves, but that would require some editor logic. I have no idea yet.
If you would like to contribute, think about improving this part. I would be deeply appreciate if you can further improve this project.