GitHub リポジトリ · 投稿者 Every-Comment5473

ターミナル上の Claude Code におけるインテリジェント UI：本物の表、LaTeX、画像、ライブ図。

Name: ターミナル上の Claude Code におけるインテリジェント UI：本物の表、LaTeX、画像、ライブ図。
Author: Every-Comment5473

応答をターミナル内で組版された Typst 画像としてレンダリングする Claude Code モッド。表、LaTeX 数式、インライン画像、チャート、図、プランモード、テーマをサポートします。

Every-Comment5473@Every-Comment5473

razorback16/cc-intelligent-ui

翻訳済み

この mod について

CC Intelligent UI は、Typst を介して各回答を組版された画像としてレンダリングする Claude Code モッドであり、レンダーフックを使用して回答行を kitty graphics プレースホルダーで描画された PNG ページに置き換えます。レンダリングされた Markdown（見出し、表、タスクリスト、引用、構文ハイライトされたコード）、インラインおよびディスプレイ LaTeX、貼り付けおよびインライン画像、Claude が作成したチャート/図（CeTZ、cetz-plot、fletcher）をサポートします。プランモードでは、承認/編集/拒否コントロール付きでレンダリングされたプランを表示します。テーマには Claude Code カラー（デフォルト）と VS Code Markdown プレビューバリアントが含まれ、それぞれライト/ダークバージョンがあり、/iui theme <name> でカスタム JSON テーマも利用できます。kitty、Ghostty、cmux ではすぐに動作します。iTerm2 3.6+ では /iui setup が必要です。tmux や screen はサポートされていません。macOS で Claude Code 2.1.298+ を使用し、brew install typst と /plugin install cc-intelligent-ui --marketplace razorback16/cc-intelligent-ui でインストールします。約 450 のシステムプロンプトトークンが追加されます。保存されたトランスクリプトはプレーン Markdown のままです。画像内のテキストは検索できず、レンダリングはプログレッシブではありません。

インストール

まず作者の README で marketplace とプラグイン名を確認してください。コマンドはリポジトリの構成によって変わる場合があります。

claude plugin marketplace add razorback16/cc-intelligent-ui
claude plugin install cc-intelligent-ui@razorback16

原文 / README

I got tired of reading Markdown tables as rows of pipes, so I made Claude Code render its answers. CC Intelligent UI is a Claude Code mod that draws each answer as a typeset picture with Typst. Tables line up, math looks like a paper, and when a picture explains more than words, Claude draws a chart or a diagram itself. What you get Rendered Markdown: headings, tables, task lists, quotes, code with syntax colours, in your terminal's font LaTeX math , inline and display Images: the images you paste into the prompt show in the transcript, and images in an answer show inline Charts and diagrams that Claude writes on the fly (CeTZ, cetz-plot, fletcher), in your theme's colours Plan mode: the plan shows rendered, with approve / edit / reject under it You can still select and copy text from the pictures with the mouse Themes: Claude Code's own colors (the default), or VS Code's Markdown preview in Modern or Dark+/Light+ colors. Each theme has a light and a dark version, and the mod follows your terminal. You can also make your own with a small JSON file ( /iui theme <name> ) Terminals: kitty, Ghostty and cmux work out of the box. iTerm2 3.6+ needs /iui setup once. No tmux or screen. Other terminals just get the normal text. Install (macOS, Claude Code 2.1.298+): brew install typst /plugin install cc-intelligent-ui --marketplace razorback16/cc-intelligent-ui No restart needed. /iui off turns it off. How it works: a render hook swaps each answer row for PNG pages that Typst compiles in 0.15–0.6 s, drawn with kitty graphics placeholders. The saved transcript stays plain Markdown. The mod adds about 450 tokens to the system prompt so Claude knows it can write typst blocks. Honest limits: I have tested it only on macOS. ssh, Linux and other OSes are not tested yet; Rendering is not progressive: while Claude writes, the block is shown, and the picture shows once Claude finishes it. Search doesn't find text inside pictures. I built most of it with Claude Code itself. Feedback and bug reports welcome. GitHub: https://github.com/razorback16/cc-intelligent-ui Independent community project, not affiliated with Anthropic. submitted by /u/Every-Comment5473 to r/ClaudeCode [link] [comments]

作品情報

作者: Every-Comment5473
用途: テーマ・外観
掲載日: 2026年10月18日
ソース更新日: 2026年10月17日
スター数: 19
権限の足跡: 少なくとも L2（スキャン不完全）
回閲覧: 0

imagesmarkdownrender-hookterminal-renderingtypst

この作品を報告あなたの作品ですか？所有者確認へ

スポンサー

掲載は週 $10 から

少なくとも L2（スキャン不完全）

権限の足跡

自動スキャンの結果です。インストール前にソースを確認してください。レベルは機能を示すもので、安全認証ではありません。

スキャンは未完了です。外部依存をスキャンできません： AppKit 表示されているレベルは下限です。解析できなかった部分にはより高い権限が含まれる可能性があります。

コマンド実行
ファイル書き込み
ツール呼び出しの介入
ファイル読み取り
環境変数
プロンプト送信

検出箇所を見る（118）

コマンド実行・行221 行hooks/register.tsx

const got = await $.process.run(['pbpaste'], { timeoutMs: 2000, env: { LANG: 'en_US.UTF-8', LC_ALL: 'en_US.UTF-8' } }).catch(() => null)

ファイル書き込み・行361 行hooks/register.tsxawait $.fs.write(`${cache}/copy-debug.json`, JSON.stringify(full, null, 1)).catch(() => undefined)

ツール呼び出しの介入・行768 行hooks/register.tsxon('tool.call', { tool: ['Write', 'Edit'] }, async ($, e, next) => {

ツール呼び出しの介入・行786 行hooks/register.tsxon('tool.call', { tool: 'ExitPlanMode' }, async ($, e, next) => {

コマンド実行・行8 行hooks/lib/log.ts

await $.process.run(['sh', '-c', 'cat >> "$1"', 'sh', `${cache}/debug.log`], { stdin: `[${stamp}] ${text.trimEnd()}\n` }).catch(() => undefined)

コマンド実行・行63 行hooks/lib/mode.ts

const m = /\x1b\]11;rgba?:([0-9a-f]{1,4})\/([0-9a-f]{1,4})\/([0-9a-f]{1,4})(?:\/[0-9a-f]{1,4})?(?:\x07|\x1b\\)/i.exec(text)

ファイル読み取り・行96 行hooks/lib/themes.tsconst entries = await $.fs.list(base).catch(() => [])

ファイル読み取り・行100 行hooks/lib/themes.tsconst json = await $.fs.read(`${dir}/theme.json`).catch(() => null)

ファイル読み取り・行125 行hooks/lib/themes.tsconst stat = await $.fs.stat(file).catch(() => null)

コマンド実行・行81 行hooks/lib/command.tsconst head = /^\s*\/iui\s+/.exec(text)

環境変数・行58 行hooks/lib/setup.tsshell: (await $.env.get('SHELL')) ?? '',

環境変数・行59 行hooks/lib/setup.tshome: (await $.env.get('HOME')) ?? '',

環境変数・行60 行hooks/lib/setup.tszdotdir: (await $.env.get('ZDOTDIR')) || undefined,

環境変数・行61 行hooks/lib/setup.tsxdgConfig: (await $.env.get('XDG_CONFIG_HOME')) || undefined,

ファイル書き込み・行74 行hooks/lib/setup.tsawait $.fs.write(rc.path, withoutSetup(text))

コマンド実行・行78 行hooks/lib/setup.tsif (rc.kind === 'fish') await $.process.run(['mkdir', '-p', rc.path.replace(/\/[^/]*$/, '')]).catch(() => null)

ファイル書き込み・行79 行hooks/lib/setup.tsawait $.fs.write(rc.path, withSetup(text, rc.kind))

環境変数・行89 行hooks/lib/setup.tsconst file = rc ? rc.path.replace((await $.env.get('HOME')) ?? '\u0000', '~') : "your shell's start file"

環境変数・行103 行hooks/lib/host.tsconst profile = await $.env.get('ITERM_PROFILE')

コマンド実行・行105 行hooks/lib/host.ts$.process.run(['sh', '-c', ITERM_BOOKMARKS_SH], { timeoutMs: 5000 }).catch(() => null),

コマンド実行・行106 行hooks/lib/host.ts$.process.run(['sh', '-c', ITERM_DEFAULT_SH], { timeoutMs: 5000 }).catch(() => null),

コマンド実行・行110 行hooks/lib/host.ts

const named = await $.process.run(['osascript', '-l', 'JavaScript', '-e', FAMILY_JXA, spec.name], { timeoutMs: 5000 }).catch(() => null)

コマンド実行・行114 行hooks/lib/host.tsconst shown = await $.process.run(['sh', '-c', GHOSTTY_SH], { timeoutMs: 5000 }).catch(() => null)

コマンド実行・行123 行hooks/lib/host.ts

const named = await $.process.run(['osascript', '-l', 'JavaScript', '-e', FAMILY_JXA, font.postscript], { timeoutMs: 5000 }).catch(() => null)

コマンド実行・行127 行hooks/lib/host.tsconst got = await $.process.run(['fc-match', 'monospace', '-f', '%{family}'], { timeoutMs: 5000 }).catch(() => null)

コマンド実行・行164 行hooks/lib/host.tsconst got = await $.process.run(['sh', '-c', ITERM_MODE_SH], { timeoutMs: HOST_CHECK_MS }).catch(() => null)

コマンド実行・行174 行hooks/lib/host.tsconst got = await $.process.run(['perl', '-e', OSC11_PL], { timeoutMs: HOST_CHECK_MS }).catch(() => null)

コマンド実行・行181 行hooks/lib/host.tsconst got = await $.process.run(['sh', '-c', GHOSTTY_SH], { timeoutMs: HOST_CHECK_MS }).catch(() => null)

環境変数・行183 行hooks/lib/host.tsconst home = (await $.env.get('HOME')) ?? ''

環境変数・行196 行hooks/lib/host.tsxdgConfig: (await $.env.get('XDG_CONFIG_HOME')) || undefined,

環境変数・行198 行hooks/lib/host.tsresources: (await $.env.get('GHOSTTY_RESOURCES_DIR')) || undefined,

ファイル読み取り・行202 行hooks/lib/host.tsconst text = await $.fs.read(path).catch(() => null)

環境変数・行219 行hooks/lib/host.tsconst home = (await $.env.get('HOME')) ?? ''

環境変数・行229 行hooks/lib/host.tsconst home = (await $.env.get('HOME')) ?? ''

コマンド実行・行234 行hooks/lib/host.ts

const got = await $.process.run(['defaults', 'read', 'com.cmuxterm.app', 'appearanceMode'], { timeoutMs: HOST_CHECK_MS }).catch(() => null)

ファイル読み取り・行245 行hooks/lib/host.tsconst text = await $.fs.read(path).catch(() => null)

環境変数・行251 行hooks/lib/host.tsconst home = (await $.env.get('HOME')) ?? ''

環境変数・行253 行hooks/lib/host.tskittyDir: (await $.env.get('KITTY_CONFIG_DIRECTORY')) || undefined,

環境変数・行254 行hooks/lib/host.tsxdgConfig: (await $.env.get('XDG_CONFIG_HOME')) || undefined,

コマンド実行・行276 行hooks/lib/host.ts

const got = await $.process.run(['gsettings', 'get', 'org.gnome.desktop.interface', 'color-scheme'], { timeoutMs: HOST_CHECK_MS }).catch(() => null)

環境変数・行291 行hooks/lib/host.tsrioHome: (await $.env.get('RIO_CONFIG_HOME')) || undefined,

環境変数・行292 行hooks/lib/host.tsxdgConfig: (await $.env.get('XDG_CONFIG_HOME')) || undefined,

環境変数・行293 行hooks/lib/host.tshome: (await $.env.get('HOME')) ?? '',

コマンド実行・行314 行hooks/lib/host.ts

const got = await $.process.run(['defaults', 'read', '-g', 'AppleInterfaceStyle'], { timeoutMs: HOST_CHECK_MS }).catch(() => null)

コマンド実行・行318 行hooks/lib/host.ts

const got = await $.process.run(['gsettings', 'get', 'org.gnome.desktop.interface', 'color-scheme'], { timeoutMs: HOST_CHECK_MS }).catch(() => null)

コマンド実行・行52 行hooks/lib/terminals.tsconst m = /^\s*(\S.*?)\s+(\d+(?:\.\d+)?)\s*$/.exec(spec)

コマンド実行・行73 行hooks/lib/terminals.tsconst m = /^\s*#?([0-9a-f]{2})([0-9a-f]{2})([0-9a-f]{2})\s*$/i.exec(text)

コマンド実行・行80 行hooks/lib/terminals.tsconst m = /^\s*([\w-]+)\s*=\s*(.*?)\s*$/.exec(line)

コマンド実行・行89 行hooks/lib/terminals.tsconst m = /^\s*(light|dark)\s*:\s*(.*?)\s*$/i.exec(part)

コマンド実行・行127 行hooks/lib/terminals.tsconst m = /^\s*font-family\s*=\s*(.*?)\s*$/.exec(line)

コマンド実行・行142 行hooks/lib/terminals.tsconst m = /^([a-zA-Z][a-zA-Z0-9_-]*)\s+(.+)$/.exec(raw.trim())

コマンド実行・行237 行hooks/lib/terminals.tsconst m = /^"((?:[^"\\]|\\.)*)"|^'([^']*)'/.exec(value)

コマンド実行・行247 行hooks/lib/terminals.tsconst h = head.exec(line)

コマンド実行・行252 行hooks/lib/terminals.tsconst m = entry.exec(line)

コマンド実行・行23 行hooks/lib/markdown.tsconst m = FENCE.exec(line)

コマンド実行・行35 行hooks/lib/markdown.tsconst m = FENCE.exec(line)

コマンド実行・行131 行hooks/lib/markdown.tsconst m = FENCE.exec(line)

コマンド実行・行143 行hooks/lib/markdown.tsconst m = FENCE.exec(line)

コマンド実行・行100 行hooks/lib/typst.tsconst got = await $.process.run(['sh', flag, 'command -v typst'], { timeoutMs: 5000 }).catch(() => null)

環境変数・行104 行hooks/lib/typst.tsconst home = (await $.env.get('HOME').catch(() => undefined)) ?? ''

コマンド実行・行121 行hooks/lib/typst.tsconst got = await $.process.run(argv, { timeoutMs: 10000, env: noNetworkEnv(cache) }).catch(() => null)

コマンド実行・行180 行hooks/lib/typst.ts

if (paths.length) void Promise.resolve($.process.run(['touch', '-c', ...paths], { timeoutMs: 5000 })).catch(() => undefined)

コマンド実行・行214 行hooks/lib/typst.tsvoid Promise.resolve($.process.run(['kill', pid], { timeoutMs: 5000 })).catch(() => undefined)

コマンド実行・行226 行hooks/lib/typst.tsconst child = $.process.spawn({ argv: wrapPid(argv), ...(o.env ? { env: o.env } : {}) })

ファイル読み取り・行317 行hooks/lib/typst.tssegments = (JSON.parse((await $.fs.read(`${dir}/doc.json`)) as string) as { segments?: unknown }).segments

ファイル読み取り・行338 行hooks/lib/typst.tsconst files = (await $.fs.list(dir))

コマンド実行・行344 行hooks/lib/typst.tsconst heads = await $.process.run(['sh', '-c', HEADERS_SH, 'sh', ...files])

ファイル読み取り・行359 行hooks/lib/typst.tsconst kept = await $.fs.read(`${dir}/pages.json`).catch(() => null)

ファイル書き込み・行374 行hooks/lib/typst.tsawait $.fs.write(`${dir}/doc.json`, JSON.stringify({ base, segments, images }))

ファイル書き込み・行405 行hooks/lib/typst.tsawait $.fs.write(`${dir}/doc.json`, JSON.stringify({ base, segments: cut, images }))

ファイル書き込み・行418 行hooks/lib/typst.tsawait $.fs.write(`${dir}/pages.json`, JSON.stringify(result))

コマンド実行・行95 行hooks/lib/draw.tsxconst heading = /^ {0,3}(#{1,6})\s/.exec(line)

ファイル読み取り・行119 行hooks/lib/draw.tsxconst got = await $.fs.read(page.file, { as: 'bytes' }).catch(() => null)

ファイル読み取り・行62 行hooks/lib/designs.tsconst text = await $.fs.read(path).catch(() => null)

ファイル読み取り・行76 行hooks/lib/designs.tsconst text = await $.fs.read(path).catch(() => null)

ファイル書き込み・行84 行hooks/lib/designs.tsawait $.fs.write(path, designText(design))

ファイル読み取り・行75 行hooks/lib/answer.tsconst text = await $.fs.read(`${dir}/pages.json`).catch(() => null)

コマンド実行・行32 行hooks/lib/frame.tsconst m = /^(pid|size|clip) (.*)$/.exec(line.trim())

コマンド実行・行84 行hooks/lib/frame.tsconst tty = await $.process.run(['sh', '-c', CELL_SH], { timeoutMs: 5000 }).catch(() => null)

コマンド実行・行218 行hooks/lib/frame.tsif (stopped && pid) void Promise.resolve($.process.run(['kill', pid], { timeoutMs: 5000 })).catch(() => undefined)

コマンド実行・行228 行hooks/lib/frame.tsconst child = $.process.spawn({ argv: [perlFor(S.hostOs === 'Darwin'), '-e', WATCH_PL, ...(isClip ? ['clip'] : [])] })

コマンド実行・行33 行hooks/lib/env.tsconst made = await $.process.run(['sh', '-c', CACHE_SH]).catch(() => null)

ファイル読み取り・行37 行hooks/lib/env.tsconst listed = await $.fs.list(cache).catch(() => [])

環境変数・行39 行hooks/lib/env.tsconst program = (await $.env.get('TERM_PROGRAM')) ?? ''

環境変数・行40 行hooks/lib/env.tsconst term = (await $.env.get('TERM')) ?? ''

環境変数・行41 行hooks/lib/env.tsconst ssh = !!(await $.env.get('SSH_CONNECTION')) || !!(await $.env.get('SSH_TTY'))

環境変数・行45 行hooks/lib/env.tskitty: !!(await $.env.get('KITTY_WINDOW_ID')),

環境変数・行46 行hooks/lib/env.tstmux: !!(await $.env.get('TMUX')) || !!(await $.env.get('STY')) || /^tmux|^screen/i.test(term),

環境変数・行48 行hooks/lib/env.tsbackground: (await $.env.get('CLAUDE_CODE_SESSION_KIND')) === 'bg',

環境変数・行49 行hooks/lib/env.tsengineForced: isSet(await $.env.get('CLAUDE_CODE_FORCE_TERMINAL_IMAGES')),

環境変数・行50 行hooks/lib/env.tsmodForced: isSet(await $.env.get('IUI_FORCE')),

ファイル読み取り・行53 行hooks/lib/env.tsconst template = await $.fs.stat(`${root}/render/md.typ`).catch(() => null)

環境変数・行61 行hooks/lib/env.tsS.itermProfile = (await $.env.get('ITERM_PROFILE')) || undefined

環境変数・行62 行hooks/lib/env.tsS.isKitty = /kitty/i.test(term) || !!(await $.env.get('KITTY_WINDOW_ID')) || !!(await $.env.get('KITTY_PID'))

環境変数・行64 行hooks/lib/env.tsS.debug = isSet(await $.env.get('IUI_DEBUG'))

環境変数・行68 行hooks/lib/env.tssession: (await $.env.get('ITERM_SESSION_ID')) || undefined,

環境変数・行69 行hooks/lib/env.tslcTerminal: (await $.env.get('LC_TERMINAL')) || undefined,

環境変数・行72 行hooks/lib/env.ts!(await $.env.get('TMUX')) && !(await $.env.get('STY')) && (await $.env.get('CLAUDE_CODE_SESSION_KIND')) !== 'bg'

環境変数・行74 行hooks/lib/env.ts

S.isCmux = !!(await $.env.get('CMUX_SURFACE_ID')) || !!(await $.env.get('CMUX_WORKSPACE_ID')) || !!(await $.env.get('CMUX_SOCKET_PATH'))

環境変数・行75 行hooks/lib/env.tsS.colorFgBg = (await $.env.get('COLORFGBG')) ?? ''

環境変数・行97 行hooks/lib/env.tsconst home = (await $.env.get('HOME')) ?? ''

環境変数・行119 行hooks/lib/env.tstmpdir: (await $.env.get('CLAUDE_CODE_TMPDIR')) || undefined,

コマンド実行・行120 行hooks/lib/env.tsuid: await $.process.run(['id', '-u']).then(r => (r.exitCode === 0 ? r.stdout : ''), () => ''),

ファイル読み取り・行30 行hooks/lib/pictures.tsxif (!at) return $.fs.stat(file).catch(() => null)

ファイル読み取り・行38 行hooks/lib/pictures.tsxgot = $.fs.stat(file).catch(() => null)

コマンド実行・行51 行hooks/lib/pictures.tsxconst head = await $.process.run(['sh', '-c', HEADERS_SH, 'sh', file]).catch(() => null)

ファイル読み取り・行69 行hooks/lib/pictures.tsxconst got = await $.fs.read(p.file, { as: 'bytes' }).catch(() => null)

ファイル読み取り・行152 行hooks/lib/pictures.tsxconst made = await $.fs.stat(out).catch(() => null)

ファイル書き込み・行158 行hooks/lib/pictures.tsxawait $.fs.write(`${dir}/source.txt`, `${file}\n`).catch(() => undefined)

コマンド実行・行164 行hooks/lib/pictures.tsxconst ran = await $.process.run(argv, { timeoutMs: COMPILE_TIMEOUT_MS, env }).catch(failed)

コマンド実行・行165 行hooks/lib/pictures.tsxconst moved = ran.exitCode === 0 ? await $.process.run(['mv', '-f', part, out]).catch(failed) : null

ファイル読み取り・行186 行hooks/lib/pictures.tsxconst got = st.size <= SENT_TEXT_MAX_BYTES ? await $.fs.read(file).catch(() => null) : null

ファイル読み取り・行287 行hooks/lib/pictures.tsxconst projects = (await $.fs.list(ready.claudeTmp).catch(() => [])).filter(f => f.kind === 'dir')

コマンド実行・行147 行hooks/lib/plan.tsxconst got = await $.process.run(['sh', flag, 'command -v code'], { timeoutMs: 5000 }).catch(() => null)

コマンド実行・行186 行hooks/lib/plan.tsxawait $.process.run(argv!, { timeoutMs: EDIT_TIMEOUT_MS }).catch(() => null)

ファイル読み取り・行187 行hooks/lib/plan.tsxconst text = await $.fs.read(o.file).catch(() => null)

ファイル読み取り・行204 行hooks/lib/plan.tsxconst text = await $.fs.read(file).catch(() => null)

プロンプト送信・行214 行hooks/lib/plan.tsxawait $.prompt.submit({ text: `${PLAN_IMPLEMENT}\n\n${plan}`, asUser: true }).catch(() => undefined)

ターミナル上の Claude Code におけるインテリジェント UI：本物の表、LaTeX、画像、ライブ図。

この mod について

インストール

関連作品

fm

claude-pokemon

ui-themes