prompt-canvas

KO | EN

gitlite — search

#hacktoberfest #react #llm #rust #linux #macos #nodejs #windows #awesome #cli #kubernetes #pytorch #mcp #openai

(★ 23)

Visual prompts for coding agents directly from your frontend.

prompt-canvas 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# prompt-canvas

![NPM Downloads](https://img.shields.io/npm/dw/prompt-canvas)
![GitHub Repo stars](https://img.shields.io/github/stars/adiasg/prompt-canvas)

Visual prompts for coding agents directly from your frontend. A React component for annotating changes & sending them to coding agents.

![Prompt Canvas Demo](https://raw.githubusercontent.com/adiasg/prompt-canvas/main/assets/prompt-canvas-quick-demo.gif)

## Quickstart

Installation prompt:
```
Install prompt-canvas, a developer overlay for drawing on the frontend. Look up instructions in the repo README: https://github.com/adiasg/prompt-canvas.
```

### Install

```bash
npm install prompt-canvas
```

### Add to NextJS App Router

Place the component in `app/layout.tsx` with:
```tsx
import { PromptCanvas } from 'prompt-canvas';
// ...
// Place this in your body
// Only mount in development mode
{process.env.NODE_ENV === 'development' && <PromptCanvas />}
// ...
```

### Usage

- Run the dev server (`npm run dev`) and open the web app in the browser. **Supported browsers:** Chrome, Firefox. 
- Draw changes, then copy screenshot (⌘C) to paste in your coding agent.

### Tips

- It helps to have design guidelines for the coding agent (`AGENTS.md`, `.cursor/rules`, etc.). Here's a great starter from [OpenAI's cookbook](https://cookbook.openai.com/examples/gpt-5/gpt-5_prompting_guide#matching-codebase-design-standards).

## Keyboard Shortcuts

| Shortcut         | Tool              |
|------------------|-------------------|
| P                | Pen               |
| B                | Box               |
| T                | Text              |
| E                | Eraser            |
| ⌘C               | Copy screenshot   |
| ⌘Z / ⌘⇧Z         | Undo / Redo       |

prompt-canvas

prompt-canvas 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

prompt-canvas

prompt-canvas 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README