Sketch-programming (LLM-Transpiler) -

POC (or not just POC, will see)

Extention as one of implementation of Sketch programming https://github.com/DmitryOlkhovoi/Sketch-programming

VS Code Marketplace - https://marketplace.visualstudio.com/items?itemName=Sketch-programming.sketch-programming-llm-transpiler

Usage

If you have a new project - run all 3 commands.

Don't forget to add your key to sketch.config.js after Sketch-programming: Initialize.

Extension commands:

Sketch-programming: Initialize

CTR + Shift + P and search for Sketch-programming: Initialize. This command will create Sketch folder with a config and examples.

Common project structure (React example):

Project/
├── sketch/
│   ├── sketches/
│   │   └── reactComponent.md - Example (https://github.com/DmitryOlkhovoi/Sketch-programming/blob/main/ReactComponentAskedModelToAddMoreRulesItself.md)
│   ├── src/
│   │   ├── components/
│   │   │   └── ExampleReactComponent - Sketch code
│   └── sketch.config.js
├── src/
│   ├── components/
│   │   └── ExampleReactComponent.tsx - Transpiled file on save
│   ├── hooks/
│   ├── utils/
│   └── App.tsx
└── other_project_files/

Sketch-programming: Create assistant and vector store

CTR + Shift + P and search for Sketch-programming: Create assistant and vector store. This command will create Assistant and a Vector store for it.

Sketch-programming: Upload

CTR + Shift + P and search for Sketch-programming: Upload. This command will upload sketches to Vector store. Will remove old version and reattach to vector store.

Example with React.js

// @sketch:reactComponent
// @ext:tsx

Component Count

props add = 0
state count = 0

effect {
    console.log("Component mounted");
    
    cleanup {
        console.log("Cleanup");
    }
}

<div onclick="count += add"> Will add {add} </div>
<div>
    Current  count: {count}
</div>

transforms to

import React, { useState, useEffect } from 'react';

interface Props {
    add?: number;
}

const CountComponent: React.FC<Props> = ({ add = 0 }) => {
    const [count, setCount] = useState<number>(0);

    useEffect(() => {
        console.log("Component mounted");

        return () => {
            console.log("Cleanup");
        };
    }, []);

    const handleClick = () => {
        setCount((prev: number) => prev + add);
    };

    return (
        <div>
            <div onClick={handleClick}> Will add {add} </div>
            <div>
                Current count: {count}
            </div>
        </div>
    );
};

export default CountComponent;

Config

sketch.config.js:

export default {
    openAIApiKey: 'YOUR-API-KEY',
    projectId: "foo" // name of the Assistant and VectorStore
}

Current state

Supports only OpenAI Potantially have some problems as extension doesn't track config file changes. Or one of Sketch files removing. Work in progress. Better notifications and such edge cases will be handled.

Use extension commands to Initialize, Create Assistant and Vector store, and then to upload Sketches Example Sketch: https://github.com/DmitryOlkhovoi/Sketch-programming/blob/main/ReactComponentAskedModelToAddMoreRulesItself.md Full tutorial will be written.

Contributrion

Just do it if you want