x/wiki
1
0
Fork 0
mirror of https://github.com/waynesutton/markdown-site.git synced 2026-01-12 04:09:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: Multi-model AI chat and image generation in Dashboard

Browse Source
This commit is contained in:
Wayne Sutton
2026-01-01 22:00:46 -08:00
parent 4cfbb2588a
commit a9f56d9c04
35 changed files with 2859 additions and 179 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
content/blog/about-this-blog.md
View File

@@ -15,7 +15,7 @@ authorImage: "/images/authors/markdown.png"
# About This Markdown Framework
An open-source publishing framework built for AI agents and developers to ship websites, docs, or blogs.. Write markdown, sync from the terminal. Your content is instantly available to browsers, LLMs, and AI agents. Built on Convex and Netlify.
An open-source publishing framework built for AI agents and developers to ship websites, docs, or blogs. Write markdown, sync from the terminal. Your content is instantly available to browsers, LLMs, and AI agents. Built on Convex and Netlify.
## How It Works

2
content/blog/fork-configuration-guide.md
View File

@@ -309,6 +309,8 @@ Once configuration is complete:
3. **Test locally**: Run `npm run dev` and verify your site name, footer, and metadata
4. **Push to git**: Commit all changes and push to trigger a Netlify rebuild
**Important**: Keep your `fork-config.json` file. The `sync:discovery` and `sync:all` commands read from it to update discovery files (`AGENTS.md`, `CLAUDE.md`, `public/llms.txt`) with your configured values. Without it, these files would revert to placeholder values.
## Existing content
The configuration script only updates site-level settings. It does not modify your markdown content in `content/blog/` or `content/pages/`. Your existing posts and pages remain unchanged.

43
content/blog/setup-guide.md
View File

@@ -1536,7 +1536,7 @@ Content is stored in localStorage only and not synced to the database. Refreshin
## AI Agent chat
The site includes an AI writing assistant (Agent) powered by Anthropic Claude API. Agent can be enabled in two places:
The site includes an AI writing assistant (Agent) that supports multiple AI providers. Agent can be enabled in three places:
**1. Write page (`/write`)**
@@ -1566,11 +1566,39 @@ aiChat: true # Enable Agent in right sidebar
---
```
**3. Dashboard AI Agent (`/dashboard`)**
The Dashboard includes a dedicated AI Agent section with a tab-based UI for Chat and Image Generation.
**Chat Tab features:**
- Multi-model selector: Claude Sonnet 4, GPT-4o, Gemini 2.0 Flash
- Per-session chat history stored in Convex
- Markdown rendering for AI responses
- Copy functionality for AI responses
- Lazy API key validation (errors only shown when user tries to use a specific model)
**Image Tab features:**
- AI image generation with two models:
- Nano Banana (gemini-2.0-flash-exp-image-generation) - Experimental model
- Nano Banana Pro (imagen-3.0-generate-002) - Production model
- Aspect ratio selection: 1:1, 16:9, 9:16, 4:3, 3:4
- Images stored in Convex storage with session tracking
- Gallery view of recent generated images
**Environment variables:**
Agent requires the following Convex environment variables:
Agent requires API keys for the providers you want to use. Set these in Convex environment variables:
| Variable | Provider | Features |
| --- | --- | --- |
| `ANTHROPIC_API_KEY` | Anthropic | Claude Sonnet 4 chat |
| `OPENAI_API_KEY` | OpenAI | GPT-4o chat |
| `GOOGLE_AI_API_KEY` | Google | Gemini 2.0 Flash chat + image generation |
**Optional system prompt 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
@@ -1581,7 +1609,10 @@ Agent requires the following Convex 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
4. Add API keys for the providers you want to use:
- `ANTHROPIC_API_KEY` for Claude
- `OPENAI_API_KEY` for GPT-4o
- `GOOGLE_AI_API_KEY` for Gemini and image generation
5. Optionally add system prompt variables (`CLAUDE_PROMPT_STYLE`, etc.)
6. Deploy changes
@@ -1592,11 +1623,11 @@ Agent requires the following Convex environment variables:
- 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
- API key validation is lazy: errors only appear when you try to use a specific model
**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.
If an API key is not configured for a provider, Agent displays a user-friendly setup message with instructions when you try to use that model. Only configure the API keys for providers you want to use.
## Dashboard

4
content/pages/about.md
View File

@@ -3,10 +3,10 @@ title: "About"
slug: "about"
published: true
order: 2
excerpt: "An open-source publishing framework built for AI agents and developers to ship websites, docs, or blogs.."
excerpt: "An open-source publishing framework built for AI agents and developers to ship websites, docs, or blogs."
---
An open-source publishing framework built for AI agents and developers to ship websites, docs, or blogs.. Write markdown, sync from the terminal. Your content is instantly available to browsers, LLMs, and AI agents. Built on Convex and Netlify.
An open-source publishing framework built for AI agents and developers to ship websites, docs, or blogs. Write markdown, sync from the terminal. Your content is instantly available to browsers, LLMs, and AI agents. Built on Convex and Netlify.
## What makes it a dev sync system?

52
content/pages/changelog-page.md
View File

@@ -10,6 +10,58 @@ layout: "sidebar"
All notable changes to this project.
![](https://img.shields.io/badge/License-MIT-yellow.svg)
## v2.6.0
Released January 1, 2026
**Multi-model AI chat and image generation in Dashboard**
- AI Agent section with tab-based UI (Chat and Image Generation tabs)
- Multi-model selector for text chat
- Claude Sonnet 4 (Anthropic)
- GPT-4o (OpenAI)
- Gemini 2.0 Flash (Google)
- Lazy API key validation: errors only shown when user tries to use a specific model
- Each provider has friendly setup instructions with links to get API keys
- AI Image Generation tab
- Generate images using Gemini models (Nano Banana and Nano Banana Pro)
- Aspect ratio selector (1:1, 16:9, 9:16, 4:3, 3:4)
- Generated images stored in Convex storage with session tracking
- Markdown-rendered error messages with setup instructions
- New `aiDashboard` configuration in siteConfig
- `enableImageGeneration`: Toggle image generation tab
- `defaultTextModel`: Set default AI model for chat
- `textModels`: Configure available text chat models
- `imageModels`: Configure available image generation models
**Technical details:**
- New file: `convex/aiImageGeneration.ts` for Gemini image generation action
- New table: `aiGeneratedImages` in schema for tracking generated images
- Updated `convex/aiChatActions.ts` with multi-provider support
- Added `callAnthropicApi`, `callOpenAIApi`, `callGeminiApi` helper functions
- Added `getProviderFromModel` to determine provider from model ID
- Added `getApiKeyForProvider` for lazy API key retrieval
- Added `getNotConfiguredMessage` for provider-specific setup instructions
- Updated `src/components/AIChatView.tsx` with `selectedModel` prop
- Updated `src/pages/Dashboard.tsx` with new AI Agent section
- Tab-based UI for Chat and Image Generation
- Model dropdowns with provider labels
- Aspect ratio selector for image generation
- CSS styles for AI Agent section in `src/styles/global.css`
- `.ai-agent-tabs`, `.ai-agent-tab` for tab navigation
- `.ai-model-selector`, `.ai-model-dropdown` for model selection
- `.ai-aspect-ratio-selector` for aspect ratio options
- `.ai-generated-image`, `.ai-image-error`, `.ai-image-loading` for image display
**Environment Variables:**
- `ANTHROPIC_API_KEY`: Required for Claude models
- `OPENAI_API_KEY`: Required for GPT-4o
- `GOOGLE_AI_API_KEY`: Required for Gemini text chat and image generation
Updated files: `convex/aiImageGeneration.ts`, `convex/aiChatActions.ts`, `convex/aiChats.ts`, `convex/schema.ts`, `src/components/AIChatView.tsx`, `src/pages/Dashboard.tsx`, `src/config/siteConfig.ts`, `src/styles/global.css`, `files.md`, `TASK.md`, `changelog.md`, `content/pages/changelog-page.md`
## v2.5.0
Released January 1, 2026

29
content/pages/docs.md
View File

@@ -4,7 +4,7 @@ slug: "docs"
published: true
order: 0
layout: "sidebar"
aiChat: false
aiChat: true
rightSidebar: true
showFooter: true
---
@@ -1096,11 +1096,34 @@ When `requireAuth` is `false`, the dashboard is open access. When `requireAuth`
### AI Agent
- Dedicated AI chat section separate from the Write page
- Uses Anthropic Claude API (requires `ANTHROPIC_API_KEY` in Convex environment)
The Dashboard includes a dedicated AI Agent section with tab-based UI for Chat and Image Generation.
**Chat Tab:**
- Multi-model selector: Claude Sonnet 4, GPT-4o, Gemini 2.0 Flash
- Per-session chat history stored in Convex
- Markdown rendering for AI responses
- Copy functionality for AI responses
- Lazy API key validation (errors only shown when user tries to use a specific model)
**Image Tab:**
- AI image generation with two models:
- Nano Banana (gemini-2.0-flash-exp-image-generation) - Experimental model
- Nano Banana Pro (imagen-3.0-generate-002) - Production model
- Aspect ratio selection: 1:1, 16:9, 9:16, 4:3, 3:4
- Images stored in Convex storage with session tracking
- Gallery view of recent generated images
**Environment Variables (Convex):**
| Variable | Description |
| --- | --- |
| `ANTHROPIC_API_KEY` | Required for Claude Sonnet 4 |
| `OPENAI_API_KEY` | Required for GPT-4o |
| `GOOGLE_AI_API_KEY` | Required for Gemini 2.0 Flash and image generation |
**Note:** Only configure the API keys for models you want to use. If a key is not set, users see a helpful setup message when they try to use that model.
### Newsletter Management