mirror of
https://github.com/waynesutton/markdown-site.git
synced 2026-01-12 04:09:14 +00:00
feat: add AI Agent chat integration with Anthropic Claude API
Add AI writing assistant (Agent) powered by Anthropic Claude API. Agent can be enabled on Write page (replaces textarea) and optionally in RightSidebar on posts/pages via frontmatter. Features: - AIChatView component with per-page chat history - Page content context support for AI responses - Markdown rendering for AI responses - User-friendly error handling for missing API keys - System prompt configurable via Convex environment variables - Anonymous session authentication using localStorage Environment variables required: - ANTHROPIC_API_KEY (required) - CLAUDE_PROMPT_STYLE, CLAUDE_PROMPT_COMMUNITY, CLAUDE_PROMPT_RULES (optional split prompts) - CLAUDE_SYSTEM_PROMPT (optional single prompt fallback) Configuration: - siteConfig.aiChat.enabledOnWritePage: Enable Agent toggle on /write page - siteConfig.aiChat.enabledOnContent: Allow Agent on posts/pages via frontmatter - Frontmatter aiChat: true (requires rightSidebar: true) Updated files: - src/components/AIChatView.tsx: AI chat interface component - src/components/RightSidebar.tsx: Conditional Agent rendering - src/pages/Write.tsx: Agent mode toggle (title changes to Agent) - convex/aiChats.ts: Chat history queries and mutations - convex/aiChatActions.ts: Claude API integration with error handling - convex/schema.ts: aiChats table with indexes - src/config/siteConfig.ts: AIChatConfig interface - Documentation updated across all files Documentation: - files.md: Updated component descriptions - changelog.md: Added v1.33.0 entry - TASK.md: Marked AI chat tasks as completed - README.md: Added AI Agent Chat section - content/pages/docs.md: Added AI Agent chat documentation - content/blog/setup-guide.md: Added AI Agent chat setup instructions - public/raw/changelog.md: Added v1.33.0 entry
This commit is contained in:
Wayne Sutton
@@ -1046,6 +1046,8 @@ Pages appear automatically in the navigation when published.
|
||||
|
||||
**Right sidebar:** When enabled in `siteConfig.rightSidebar.enabled`, posts and pages can display a right sidebar containing the CopyPageDropdown at 1135px+ viewport width. Add `rightSidebar: true` to frontmatter to enable. Without this field, pages render normally with CopyPageDropdown in the nav bar. When enabled, CopyPageDropdown moves from the navigation bar to the right sidebar on wide screens. The right sidebar is hidden below 1135px, and CopyPageDropdown returns to the nav bar automatically.
|
||||
|
||||
**AI Agent chat:** The site includes an AI writing assistant (Agent) powered by Anthropic Claude API. Enable Agent on the Write page via `siteConfig.aiChat.enabledOnWritePage` or in the right sidebar on posts/pages using `aiChat: true` frontmatter (requires `rightSidebar: true`). Requires `ANTHROPIC_API_KEY` environment variable in Convex. See the [AI Agent chat section](#ai-agent-chat) below for setup instructions.
|
||||
|
||||
### Update SEO Meta Tags
|
||||
|
||||
Edit `index.html` to update:
|
||||
@@ -1293,6 +1295,72 @@ A markdown writing page is available at `/write` (not linked in navigation). Use
|
||||
|
||||
Content is stored in localStorage only and not synced to the database. Refreshing the page preserves your content, but clearing browser data will lose it.
|
||||
|
||||
**AI Agent mode:** When `siteConfig.aiChat.enabledOnWritePage` is enabled, a toggle button appears in the Actions section. Clicking it replaces the textarea with the AI Agent chat interface. The page title changes to "Agent" when in chat mode. Requires `ANTHROPIC_API_KEY` environment variable in Convex. See the [AI Agent chat section](#ai-agent-chat) below for setup instructions.
|
||||
|
||||
## AI Agent chat
|
||||
|
||||
The site includes an AI writing assistant (Agent) powered by Anthropic Claude API. Agent can be enabled in two places:
|
||||
|
||||
**1. Write page (`/write`)**
|
||||
|
||||
Enable Agent mode on the Write page via `siteConfig.aiChat.enabledOnWritePage`. When enabled, a toggle button appears in the Actions section. Clicking it replaces the textarea with the Agent chat interface. The page title changes to "Agent" when in chat mode.
|
||||
|
||||
**Configuration:**
|
||||
|
||||
```typescript
|
||||
// src/config/siteConfig.ts
|
||||
aiChat: {
|
||||
enabledOnWritePage: true, // Enable Agent toggle on /write page
|
||||
enabledOnContent: true, // Allow Agent on posts/pages via frontmatter
|
||||
},
|
||||
```
|
||||
|
||||
**2. Right sidebar on posts/pages**
|
||||
|
||||
Enable Agent in the right sidebar on individual posts or pages using the `aiChat` frontmatter field. Requires both `rightSidebar: true` and `siteConfig.aiChat.enabledOnContent: true`.
|
||||
|
||||
**Frontmatter example:**
|
||||
|
||||
```markdown
|
||||
---
|
||||
title: "My Post"
|
||||
rightSidebar: true
|
||||
aiChat: true # Enable Agent in right sidebar
|
||||
---
|
||||
```
|
||||
|
||||
**Environment variables:**
|
||||
|
||||
Agent requires the following Convex environment variables:
|
||||
|
||||
- `ANTHROPIC_API_KEY` (required): Your Anthropic API key for Claude API access
|
||||
- `CLAUDE_PROMPT_STYLE` (optional): First part of system prompt
|
||||
- `CLAUDE_PROMPT_COMMUNITY` (optional): Second part of system prompt
|
||||
- `CLAUDE_PROMPT_RULES` (optional): Third part of system prompt
|
||||
- `CLAUDE_SYSTEM_PROMPT` (optional): Single system prompt (fallback if split prompts not set)
|
||||
|
||||
**Setting environment variables:**
|
||||
|
||||
1. Go to [Convex Dashboard](https://dashboard.convex.dev)
|
||||
2. Select your project
|
||||
3. Navigate to Settings > Environment Variables
|
||||
4. Add `ANTHROPIC_API_KEY` with your API key value
|
||||
5. Optionally add system prompt variables (`CLAUDE_PROMPT_STYLE`, etc.)
|
||||
6. Deploy changes
|
||||
|
||||
**How it works:**
|
||||
|
||||
- Agent uses anonymous session IDs stored in localStorage for chat history
|
||||
- Each post/page has its own chat context (identified by slug)
|
||||
- Chat history is stored per-session, per-context in Convex (aiChats table)
|
||||
- Page content can be provided as context for AI responses
|
||||
- Chat history limited to last 20 messages for efficiency
|
||||
- If API key is not set, Agent displays "API key is not set" error message
|
||||
|
||||
**Error handling:**
|
||||
|
||||
If `ANTHROPIC_API_KEY` is not configured in Convex environment variables, Agent displays a user-friendly error message: "API key is not set". This helps identify when the API key is missing in production deployments.
|
||||
|
||||
## Next Steps
|
||||
|
||||
After deploying:
|
||||
|
||||
@@ -9,6 +9,64 @@ layout: "sidebar"
|
||||
All notable changes to this project.
|
||||
|
||||
|
||||
## v1.33.0
|
||||
|
||||
Released December 26, 2025
|
||||
|
||||
**AI Chat Write Agent (Agent) integration**
|
||||
|
||||
- AI Agent chat interface powered by Anthropic Claude API
|
||||
- New `AIChatView` component for AI-powered chat interface
|
||||
- Available on Write page (replaces textarea when enabled) and optionally in RightSidebar on posts/pages
|
||||
- Per-session, per-context chat history stored in Convex (aiChats table)
|
||||
- Supports page content as context for AI responses
|
||||
- Markdown rendering for AI responses with copy functionality
|
||||
- Theme-aware styling matching the site's design system
|
||||
- Uses Phosphor Icons for all UI elements
|
||||
- Convex backend for AI chat
|
||||
- New `convex/aiChats.ts` with queries and mutations for chat history
|
||||
- New `convex/aiChatActions.ts` with Claude API integration (requires ANTHROPIC_API_KEY environment variable)
|
||||
- System prompt configurable via Convex environment variables:
|
||||
- `CLAUDE_PROMPT_STYLE`, `CLAUDE_PROMPT_COMMUNITY`, `CLAUDE_PROMPT_RULES` (split prompts, joined with separators)
|
||||
- `CLAUDE_SYSTEM_PROMPT` (single prompt, fallback if split prompts not set)
|
||||
- Chat history limited to last 20 messages for context efficiency
|
||||
- Error handling: displays "API key is not set" message when ANTHROPIC_API_KEY is missing in Convex environment variables
|
||||
- Configuration options
|
||||
- `siteConfig.aiChat` interface with `enabledOnWritePage` and `enabledOnContent` boolean flags
|
||||
- Both flags default to false (opt-in feature)
|
||||
- New `aiChat` frontmatter field for posts and pages (requires rightSidebar: true)
|
||||
- Write page AI Agent mode
|
||||
- Title changes from "Blog Post" or "Page" to "Agent" when in AI chat mode
|
||||
- Toggle button text changes between "Agent" and "Text Editor"
|
||||
- Page scroll prevention when switching modes (no page jump)
|
||||
- RightSidebar AI chat support
|
||||
- Conditionally renders AIChatView when enabled via frontmatter `aiChat: true` field
|
||||
- Requires both `siteConfig.aiChat.enabledOnContent` and frontmatter `aiChat: true`
|
||||
- Passes page content as context for AI responses
|
||||
|
||||
Updated files: `src/components/AIChatView.tsx`, `src/components/RightSidebar.tsx`, `src/pages/Write.tsx`, `src/pages/Post.tsx`, `src/config/siteConfig.ts`, `convex/schema.ts`, `convex/aiChats.ts`, `convex/aiChatActions.ts`, `convex/posts.ts`, `convex/pages.ts`, `scripts/sync-posts.ts`, `src/styles/global.css`, `package.json`
|
||||
|
||||
Documentation updated: `files.md`, `changelog.md`, `README.md`, `content/blog/setup-guide.md`, `public/raw/docs.md`
|
||||
|
||||
## v1.32.0
|
||||
|
||||
Released December 25, 2025
|
||||
|
||||
**Custom homepage configuration**
|
||||
|
||||
- Set any page or blog post to serve as the homepage instead of the default Home component
|
||||
- Configure via `siteConfig.homepage` with `type` ("default", "page", or "post"), `slug` (required for page/post), and `originalHomeRoute` (default: "/home")
|
||||
- Custom homepage retains all Post component features (sidebar, copy dropdown, author info, footer) but without the featured section
|
||||
- Original homepage remains accessible at `/home` route (or configured `originalHomeRoute`) when custom homepage is set
|
||||
- SEO metadata uses the page/post's frontmatter when used as homepage
|
||||
- Back button hidden when Post component is used as homepage
|
||||
- Fork configuration support for homepage
|
||||
- Added `homepage` field to `fork-config.json.example`
|
||||
- Updated `configure-fork.ts` to handle homepage configuration
|
||||
- Documentation added to `FORK_CONFIG.md` with usage examples
|
||||
|
||||
Updated files: `src/App.tsx`, `src/pages/Post.tsx`, `src/config/siteConfig.ts`, `scripts/configure-fork.ts`, `fork-config.json.example`, `FORK_CONFIG.md`
|
||||
|
||||
## v1.31.1
|
||||
|
||||
Released December 25, 2025
|
||||
|
||||
@@ -5,9 +5,12 @@ published: true
|
||||
order: 0
|
||||
layout: "sidebar"
|
||||
rightSidebar: true
|
||||
aiChat: true
|
||||
footer: true
|
||||
---
|
||||
|
||||
## Getting Started
|
||||
|
||||
Reference documentation for setting up, customizing, and deploying this markdown framework.
|
||||
|
||||
**How publishing works:** Write posts in markdown, run `npm run sync` for development or `npm run sync:prod` for production, and they appear on your live site immediately. No rebuild or redeploy needed. Convex handles real-time data sync, so connected browsers update automatically.
|
||||
|
||||
Reference in New Issue
Block a user