brew install --cask opencoworkai/tap/open-codesign

scoop bucket add opencoworkai https://github.com/OpenCoworkAI/scoop-bucket
scoop install opencoworkai/open-codesign

winget install OpenCoworkAI.OpenCoDesign

xattr -cr "/Applications/Open CoDesign.app"

// Supported providers in TypeScript config format
interface ProviderConfig {
  type: 'anthropic' | 'openai' | 'google' | 'openrouter' | 
        'deepseek' | 'kimi' | 'glm' | 'siliconflow' | 
        'openai-compatible';
  apiKey: string;
  baseURL?: string; // For OpenAI-compatible endpoints
  model?: string;
}

undefined

**In-app configuration:**
1. Open Settings (gear icon or `Cmd+,` / `Ctrl+,`)
2. Navigate to **Providers** tab
3. Click **Add Provider**
4. Select provider type
5. Paste API key from environment variable
6. (Optional) Set base URL for custom endpoints
7. Click **Save**

undefined

In Open CoDesign:
1. Settings → Providers → Add Provider
2. Select **OpenAI-compatible**
3. Base URL: `http://localhost:11434/v1`
4. Leave API key empty
5. Model name: `llama3.1` (or your pulled model)

// The agent interprets natural language prompts
const prompt = `
Create a landing page for a SaaS product called "TaskFlow" 
with a hero section, feature cards, pricing table, and footer. 
Use a blue and white color scheme.
`;

// Comment mode workflow
1. Click "Comment" button in toolbar (or `C` key)
2. Click element in preview pane
3. Drop pin with feedback: "Make this heading larger and bold"
4. Agent rewrites only that region

// Example tweaks JSON structure (auto-generated)
{
  "primaryColor": { type: "color", value: "#3B82F6" },
  "headingSize": { type: "range", value: 32, min: 16, max: 64 },
  "spacing": { type: "range", value: 16, min: 8, max: 48 }
}

// Programmatic export pattern (desktop app API)
// Available in Electron main process

import { exportArtifact } from './export';

await exportArtifact({
  sessionId: 'abc123',
  format: 'html', // 'pdf' | 'pptx' | 'zip' | 'markdown'
  outputPath: './exports/my-design.html'
});

<!-- DESIGN.md in your workspace -->

**How to use:**
1. Create `DESIGN.md` in workspace directory (Settings → Workspace → Set Path)
2. In prompt, reference: "Follow the design system in DESIGN.md"
3. Agent reads file via permissioned local tools

// Session directory structure
~/.open-codesign/sessions/
  abc123/
    design-v1.html
    design-v2.html
    design-v3.html
    metadata.json
    chat-history.json

// Model selection pattern
1. Start design with claude-3-5-sonnet-20241022
2. Click model dropdown in top bar
3. Switch to gpt-4o for next iteration
4. Conversation context carries over

// Example: Use Claude for design, GPT for copy, Ollama for experiments

// In Settings → Providers, add:
[
  {
    name: "Anthropic",
    type: "anthropic",
    apiKey: process.env.ANTHROPIC_API_KEY,
    models: ["claude-3-5-sonnet-20241022"]
  },
  {
    name: "OpenAI",
    type: "openai",
    apiKey: process.env.OPENAI_API_KEY,
    models: ["gpt-4o", "gpt-4o-mini"]
  },
  {
    name: "Ollama Local",
    type: "openai-compatible",
    baseURL: "http://localhost:11434/v1",
    models: ["llama3.1", "codellama"]
  }
]

// Example custom tool definition
// Place in workspace/.open-codesign/tools/

import { Tool } from '@open-codesign/types';

export const fetchDataTool: Tool = {
  name: 'fetch_marketing_data',
  description: 'Fetch product metrics from local JSON file',
  parameters: {
    type: 'object',
    properties: {
      filePath: { type: 'string' }
    },
    required: ['filePath']
  },
  handler: async ({ filePath }) => {
    // Permission check happens in main process
    const data = await fs.readFile(filePath, 'utf-8');
    return JSON.parse(data);
  }
};

const reactPrompt = `
Create a reusable TaskCard component in React + TypeScript.
Props: title (string), description (string), status (enum: pending | done).
Use Tailwind CSS for styling.
`;

// Expected output structure
/*
interface TaskCardProps {
  title: string;
  description: string;
  status: 'pending' | 'done';
}

export const TaskCard: React.FC<TaskCardProps> = ({ 
  title, 
  description, 
  status 
}) => {
  return (
    <div className="p-4 bg-white rounded-lg shadow">
      <h3 className="text-lg font-bold">{title}</h3>
      <p className="text-gray-600">{description}</p>
      <span className={status === 'done' ? 'text-green-500' : 'text-yellow-500'}>
        {status}
      </span>
    </div>
  );
};
*/

const goodPrompt = `
[Type]: Landing page
[Purpose]: SaaS product launch
[Sections]: Hero with CTA, 3 feature cards, pricing table, footer
[Style]: Modern, minimal, blue/white palette
[Technical]: Responsive, mobile-first, use CSS Grid
[Extras]: Include hover effects on cards
`;

// ❌ Avoid vague prompts:
const badPrompt = "Make a nice website";

const slideDeckPrompt = `
Create a 5-slide pitch deck for TaskFlow:
1. Title slide with logo placeholder
2. Problem statement with bullet points
3. Solution overview with 3 features
4. Market opportunity (include a bar chart placeholder)
5. Call to action with contact info

Use a professional blue gradient background.
Export as PPTX.
`;

const pdfPrompt = `
Generate a quarterly business review report:
- Cover page with Q1 2026 title
- Executive summary (1 page)
- Key metrics table (revenue, users, churn)
- 3 charts: line graph (revenue), pie chart (user segments), bar chart (MRR)
- Conclusion with 3 action items

Use corporate colors: #1E40AF (blue), #064E3B (green).
Export as PDF with page numbers.
`;

// Set workspace to enable file-backed sessions
// Settings → Workspace → Set Path: ~/projects/my-designs

// Now designs auto-save to:
~/projects/my-designs/.open-codesign/
  sessions/
  cache/
  exports/

// Commit to git:
cd ~/projects/my-designs
git add .open-codesign/sessions/
git commit -m "Save design iterations"

// 1. Verify API key format
// Anthropic: sk-ant-api03-...
// OpenAI: sk-proj-... or sk-...
// Check for trailing spaces/newlines

// 2. Test connectivity
curl https://api.anthropic.com/v1/messages \
  -H "x-api-key: $ANTHROPIC_API_KEY" \
  -H "anthropic-version: 2023-06-01" \
  -H "content-type: application/json" \
  -d '{"model":"claude-3-5-sonnet-20241022","max_tokens":10,"messages":[{"role":"user","content":"Hi"}]}'

// 3. Check firewall/proxy settings
// Open CoDesign respects HTTP_PROXY and HTTPS_PROXY env vars

// 4. Enable diagnostics
// Settings → Advanced → Enable Provider Diagnostics
// Check logs in Help → Open Logs Folder

// ❌ Incorrect
model: "gemini-1.5-pro"

// ✅ Correct
model: "models/gemini-1.5-pro"

// Settings → Providers → [Your Relay] → Advanced
{
  "forceSystemMessage": true,
  "defaultInstructions": "You are a helpful assistant."
}

undefined

undefined

undefined

undefined

// 1. Check disk space (exports need temp space)
df -h  # macOS/Linux
wmic logicaldisk get size,freespace,caption  # Windows

// 2. Verify Chromium renderer (for PDF)
// Help → Open DevTools → Console
// Look for Chromium print errors

// 3. Try HTML export first (always works)
// Then convert HTML → PDF externally if needed

// 4. Check export logs
// macOS: ~/Library/Logs/open-codesign/export.log
// Windows: %APPDATA%\open-codesign\logs\export.log
// Linux: ~/.config/open-codesign/logs/export.log

// 1. Clear OAuth cache
// Settings → Advanced → Clear OAuth Cache

// 2. Ensure browser cookies for chat.openai.com are enabled

// 3. Try incognito/private window for OAuth flow

// 4. Verify subscription is active at https://chat.openai.com

// ~/.open-codesign/config.json
{
  "customModels": [
    {
      "id": "my-custom-model",
      "provider": "openai-compatible",
      "baseURL": "https://my-llm-api.com/v1",
      "apiKey": "ENV:MY_LLM_KEY",
      "contextWindow": 128000,
      "maxOutput": 4096
    }
  ]
}

// workspace/.open-codesign/permissions.json
{
  "allowedPaths": [
    "./design-system",
    "./assets",
    "./data"
  ],
  "deniedPaths": [
    "./secrets",
    "./.env"
  ],
  "allowNetworkAccess": false,
  "allowedTools": [
    "read_file",
    "search_files",
    "list_directory"
  ]
}