Siljangnim

A creative coding studio run by an agent.
Make live visuals by describing them, reshape them in conversation, mix pieces together,
play them live with MIDI, OSC and sound, and export them as video.

Get started · Try on the web · Guides · 한국어

▶ Watch with sound (30 s, English narration, Korean and English subtitles)

Get started

We strongly recommend running it locally with an agent attached (A). The web version is fine for
looking at the examples, but Siljangnim is built for an agent that can install and run open-source tools
on your machine — Python packages, ffmpeg, ML models, OSC — and the web can't do any of that. Locally,
your agent also keeps its own memory and files, and with Claude Code it runs on your Claude plan instead
of a separate API key.

Pick one. Each takes about a minute.

A. With Claude Code or Codex — recommended

Paste this into Claude Code:

Install the Siljangnim MCP server by running:
claude mcp add siljangnim -- npx -y siljangnim-mcp@latest
Then tell me to restart Claude Code.

Or into Codex:

Install the Siljangnim MCP server by running:
codex mcp add siljangnim -- npx -y siljangnim-mcp@latest
Then, in ~/.codex/config.toml under [mcp_servers.siljangnim], add the line tool_timeout_sec = 120
(some tools wait up to 110 seconds for a job). Then tell me to restart Codex.

Restart it, then ask for something:

Use siljangnim to make glowing jellyfish drifting in a dark sea, with a slider for how many there are.

A viewer opens in your browser and the scene appears there. Keep chatting with your agent to change it.

You need Node.js 22 or newer. Nothing else: the first time a tool needs Python, it is
downloaded into ~/.siljangnim/runtime/.

Codex (instead of codex mcp add) — add to ~/.codex/config.toml:

[mcp_servers.siljangnim]
command = "npx"
args = ["-y", "siljangnim-mcp@latest"]
tool_timeout_sec = 120

Cursor, Claude Desktop, Windsurf and others — add to the client's MCP settings
(.cursor/mcp.json, claude_desktop_config.json, …):

{
  "mcpServers": {
    "siljangnim": { "command": "npx", "args": ["-y", "siljangnim-mcp@latest"] }
  }
}

Options (port, which browser opens) are in docs/mcp.md. To remove it:
claude mcp remove siljangnim.

B. In your browser — nothing to install

Open siljangnim.vercel.app, then:

1. Click Examples (top right) and open any example — it runs right away.
2. To make your own, open Settings (gear icon) and paste an Anthropic or OpenAI API key.
   It stays in that browser tab and goes only to the model provider.
3. Type what you want in the chat.

The web version can't run tools on your computer (Python packages, ffmpeg, ML models, OSC), so most of what
the agent can do needs A or C. Use the web to look around; use A to make things.

C. Desktop app

Installers aren't published yet. Until they are, run it from the source — paste this into a terminal:

git clone https://github.com/okdalto/siljangnim.git && cd siljangnim && npm install && npm run dev

Next time, npm run dev in that folder (or ./run.sh, run.bat) is enough. Add your API key under
Settings; it is encrypted with the OS keychain and never reaches the app window. While the app is
open, Claude Code (option A) uses its window as the viewer.

To build an installer for your own machine: npm run dist (output in desktop/release/). The builds are
not code-signed, so macOS asks once: System Settings → Privacy & Security → Open Anyway.

What you can do

Siljangnim isn't a gallery of demos to download and run. It's a studio: you set the direction, the agent
writes the code, and the work keeps changing for as long as you keep talking to it.

• Make it by describing it — "glowing jellyfish drifting in a dark sea", "a hatching drawing of this photo,
  denser where it's closer". The agent picks the tools (shaders, physics engines, geometry libraries, Python
  packages, ML models), writes a WebGL2 or WebGPU scene, fixes its own errors and looks at the result before answering.
• Shape it in conversation — "slower, sunset colours", "twice the particles", "give me a slider for that".
  Anything you want to play with becomes a control: sliders, knobs, 2D pads, menus, buttons, colours. Every
  change is a version you can go back to and branch from, and you can read the code it wrote.
• Mix pieces together — open an example's details and press Mix in: its scene and assets come into your
  project and the agent blends the two into one image. Or paste a piece someone shared and ask for a mashup.
• Play it live — mouse, keyboard, microphone and audio files, camera, MIDI controllers and OSC (TouchOSC,
  Ableton, TouchDesigner). Ask the agent to wire knob 1 to colour; press Perform to send the scene full
  screen to a projector. Or switch to Timeline and keyframe the controls.
• Export it — MP4, WebM or PNG frames: frame-exact offline renders at any size (vertical 1080×1920, 4K), or
  a realtime capture of what you played. The intro video above was recorded from the examples this way.
• Pass it on — a project exports as project.md: what was asked, which tools were used and how. Another
  person's agent rebuilds it from that, and keeps remixing.

Start from one of 60+ examples, each built on an open-source project (REBOUND, Rapier, Three.js, Hydra,
p5.js, librosa, OpenCV, UMAP …) with its credits and license, and take it somewhere else.

A longer walk-through of the creative workflow (Korean).

Under the hood

• Siljangnim (실장님) is what Korean design studios call the person who runs the floor: you say what you want,
  and they know which people and tools to bring in.
• Open-source tools on your machine — Python packages run in isolated environments and installed programs
  (ffmpeg, Blender, …) run after you approve. What worked is saved as a recipe, so next time it's instant, and
  recipes are shared through registry/.
• Bring your own agent — Claude Code, Codex, Cursor or any MCP client drives the same studio as the built-in
  agent, which runs on Anthropic (Claude Opus 5.5 by default) or any OpenAI-compatible server (OpenAI, vLLM, Ollama, …).
• Isolated scenes — scene code runs on a separate origin and can't reach your projects or keys.

For developers

npm install
npm run web      # the studio at http://localhost:5173
npm run dev      # the desktop app with hot reload

studio/     The app: React + TypeScript UI, built-in agent, isolated scene runtime
desktop/    Electron shell: window, app:// protocol, key storage, hub process, installers
hub/        Python sidecar (uv-managed): runtime jobs and recipes
mcp/        MCP server for external agents (published as siljangnim-mcp)
examples/   Example projects shown in the app
registry/   Shared recipes, contributed by pull request
docs/       User guides (Korean)

Guides (Korean): the creative workflow, connecting an agent, tools on your machine, sharing, models.

Costs and security

• Cost — cloud models bill per token. A complex scene can take many rounds; one conversation can cost
  a few dollars. With Claude Code you use your Claude plan; self-hosted models have no per-token cost.
• Security — scene code runs on a separate origin and can't reach your projects or keys. Running code
  or installing packages on your machine asks first; it isolates files and dependencies, but it is not an
  OS sandbox. Everything local listens on 127.0.0.1 only — don't expose it to the network.

License

GPL-3.0. Third-party code, tools and material, with licenses and source links:
THIRD_PARTY_NOTICES.md. The open-source catalog starts from
index.opensource by 현 (@hyun2xyz). Projects the agent fetches keep
their own licenses.