AI Chat Generator

A personal SSG for archiving AI brainstorming sessions and study plans.

Built with Astro 5, React, Three.js, and Tailwind CSS.
Fully integrated with GitHub Copilot via the Model Context Protocol.

Overview

AI Chat Generator turns your Copilot conversations and study plans into a navigable, searchable static website. Every session is stored as a typed MDX file. An MCP server exposes eight tools that let Copilot create files, append messages, toggle milestone status, and rebuild the site from natural language prompts.

Features

• MCP Server — 8 Copilot tools for content creation and management via stdio
• Inline plan editing — Notion-style edit mode on every plan page, with auto-save to disk
• Timeline homepage — vertical git-commit timeline of all sessions, sorted by date
• Three.js background — scroll-reactive wave particle field with mouse parallax
• Dark / Light mode — CSS variable theming with localStorage persistence and zero FOUC
• Syntax highlighting — Shiki-powered code blocks with copy-to-clipboard
• Content collections — Astro's type-safe MDX collections with Zod schema validation
• Documentation page — full setup and MCP reference at /docs
• CI pipeline — GitHub Actions workflow for tests, type check, and build

Technology Stack

Prerequisites

• Node.js 18 or later
• VS Code with the GitHub Copilot extension
• Git

Installation

1. Clone the repository

git clone https://github.com/your-username/ai-chat-generator.git
cd ai-chat-generator

2. Install dependencies

npm install

3. Start the development server

npm run dev

Open http://localhost:4321 in your browser.

MCP Server Setup

The MCP server lets GitHub Copilot call tools to create and manage content directly from the VS Code chat panel.

Configure the server path

Edit .vscode/mcp.json and update the command field to the absolute path of your Node.js binary:

{
  "servers": {
    "ai-chat-generator": {
      "type": "stdio",
      "command": "/home/YOU/.nvm/versions/node/v22.x.x/bin/node",
      "args": ["/absolute/path/to/ai-chat-generator/mcp/server.mjs"],
      "env": {}
    }
  }
}

Use which node (in a terminal where nvm is active) to find the correct path. VS Code spawns the MCP server in an isolated shell where nvm is not loaded, so a relative or node reference will not work.

Reload VS Code after editing mcp.json:

Ctrl+Shift+P > Developer: Reload Window

Available MCP tools

Example Copilot prompts

"Create a new chat log titled 'React performance deep-dive' with tags [react, perf]"
"List all my study plans"
"Mark the first milestone in jpf-gsoc-mastery-plan.mdx as complete"
"Build the site"

CLI Reference

npm run dev                          # Start local dev server
npm run build                        # Build static site to dist/
npm run preview                      # Preview the built site
npm test                             # Run unit tests
npm run test:coverage                # Run tests with coverage report
npm run lint                         # Run ESLint

npm run chat   -- "Title"            # Create a new chat MDX file
npm run plan   -- "Title"            # Create a new plan MDX file
npm run ls                           # List all chats and plans
npm run ls     -- chats              # List only chats
npm run ls     -- plans              # List only plans
npm run add    -- <file.mdx> user    # Append a User message (stdin)
npm run add    -- <file.mdx> ai      # Append an AI message (stdin)
npm run open   -- <file.mdx>         # Print file content to terminal

Content Schema

Chat session frontmatter (src/content/chats/*.mdx):

---
title: "Session Title"
date: 2026-02-25
tags: ["topic", "subtopic"]
tldr: "One-line summary"
action_items:
  - task: "Follow-up task description"
    done: false
---

Study plan frontmatter (src/content/plans/*.mdx):

---
title: "Plan Title"
date: 2026-02-25
tags: ["topic"]
tldr: "One-line summary"
difficulty: "intermediate"     # beginner | intermediate | advanced
duration: "3 months"
milestones:
  - title: "Phase 1"
    weeks: "Weeks 1-4"
    status: "not-started"      # not-started | in-progress | complete
---

Project Structure

ai-chat-generator/
├── src/
│   ├── components/          React islands and Astro UI components
│   ├── content/
│   │   ├── chats/           Chat session MDX files
│   │   └── plans/           Study plan MDX files
│   ├── layouts/             BaseLayout with navbar and theme toggle
│   ├── pages/               Route pages including docs and API routes
│   └── styles/              Global CSS with theme token system
├── mcp/
│   ├── server.mjs           MCP server entry point
│   └── utils.mjs            Pure utility functions (tested)
├── scripts/                 CLI scaffolding helpers
├── tests/                   Vitest unit tests
├── .github/
│   └── workflows/ci.yml     CI pipeline
├── .vscode/
│   └── mcp.json             MCP server configuration
└── astro.config.mjs

Running Tests

npm test                   # Single run
npm run test:watch         # Watch mode
npm run test:coverage      # With coverage report

Tests cover the MCP utility functions (mcp/utils.mjs) and plan serialization helpers.

Deployment

Build the production output:

npm run build
# Output written to dist/

The @astrojs/node adapter is required for the inline editing API route. Deploy to any Node.js-compatible platform: Vercel, Railway, Fly.io, or Render.

For a fully static deployment (no inline editing), remove the adapter, set output: 'static' in astro.config.mjs, and deploy to GitHub Pages or Netlify.

Contributing

See CONTRIBUTING.md for development workflow, commit conventions, and PR process.

Code of Conduct

This project follows the Contributor Covenant v2.1. All contributors are expected to uphold these standards.

License

MIT