Quick Start

Prerequisites

• Node.js 18+
• Ollama installed and running

Installation

# Clone the repository
git clone <repository-url>
cd image-mcp-generation

# Install dependencies
npm install

# Pull the Ollama model
ollama pull phi3:mini

# Start development servers
npm run dev

The SPA will be at http://localhost:3000 (or next available port) and the MCP server at ws://localhost:8080.

Usage

Chat Commands

Just type naturally! The agent will detect chart requests. You can also click on the sample prompt buttons above the input field for quick suggestions.

Example requests:

• "Create a bar chart showing quarterly sales"
• "Show me a pie chart of market share distribution"
• "Generate a line graph of temperature over time"
• "Create a bar chart with a blue gradient background showing sales data"
• "Generate a chart with background image showing quarterly revenue"

Status Monitoring

Click the status indicator button in the header to view:

• MCP Server connection status and port
• Ollama Server connection status and host
• Current model name and availability

Chart Interaction

• Charts render inline in the conversation
• Click any chart to expand it in a full-screen modal
• Click outside the modal or the Close button to dismiss

API Methods

Project Structure

image-mcp-generation/
├── spa/                    # React SPA
│   ├── src/
│   │   ├── components/     # React components (Chat, Message, ChartImage, StatusModal)
│   │   ├── hooks/          # Custom hooks (useWebSocket)
│   │   ├── services/       # API services (mcpClient)
│   │   └── config/         # Configuration files (prompts.json)
│   └── package.json
│
├── mcp-server/             # MCP Server
│   ├── src/
│   │   ├── agent/          # Agent and Ollama client
│   │   ├── tools/          # MCP tools
│   │   └── utils/          # Utilities
│   └── package.json
│
├── experiments/            # Experiment tracking
│   ├── prompts/            # Prompt versions and logs
│   └── results/            # Benchmark results
│
├── docs/                   # Documentation
│   ├── INSTALL.md          # Installation guide
│   ├── UPDATE.md           # Update procedures
│   └── ARCHITECTURE.md     # System architecture
│
└── scripts/                # Utility scripts
    ├── benchmark.js        # Performance benchmarks
    └── analyze-prompts.js  # Prompt analysis

Configuration

Create a .env file (optional, defaults are provided):

# Server
PORT=8080
OLLAMA_HOST=http://localhost:11434
OLLAMA_MODEL=phi3:mini

# SPA
VITE_WS_URL=ws://localhost:8080

# Logging
DISABLE_PROMPT_LOGGING=false

Prompt Configuration

Sample prompts are stored in spa/src/config/prompts.json. The application randomly displays 3 prompts from the 30 available options on each page load.

Scripts

UI Features

Status Monitoring

• Click the status indicator in the header to view detailed server information
• Shows MCP server connection status and port
• Displays Ollama server connection status and host
• Lists current model name and availability
• Refresh button to update status in real-time

Sample Prompts

• Collapsible section above the input field
• Displays 3 randomly selected prompts from 30 available options
• Prompts are randomized on each page load
• Click any prompt to populate the input field
• Toggle button to show/hide the prompts section

Chart Display

• Charts render inline in the conversation
• Click any chart to expand in a full-screen modal
• Optimized chart size (578x434px) for fast rendering
• Smooth animations and transitions
• Close button or click outside to dismiss modal

Prompt Documentation

All prompts are version-controlled in experiments/prompts/:

• system-prompts.md - Chat system prompts
• chart-prompts.md - Chart generation prompts
• prompt-registry.json - Central prompt configuration
• prompt-log.jsonl - Runtime logs (gitignored)

Sample user prompts are stored in spa/src/config/prompts.json (30 prompts, 3 shown randomly).

Experiments

Run A/B tests on prompt variations:

1. Add variants to prompt files
2. Configure in prompt-registry.json
3. Analyze with npm run analyze-prompts

Performance

Run benchmarks:

npm run benchmark

Outputs latency percentiles, success rates, and token throughput.

Documentation

• Installation Guide
• Update Procedures
• Architecture
• Next Steps & Improvements
• Experiments

License

MIT