Repository files navigation

Codex Artifacts logo

Codex Artifacts

Turn an agent's HTML output into a private link you can open and share.

Codex Artifacts is a self-hosted home for reports, dashboards, plans, and walkthroughs made by coding agents. It is useful when a chat response is too cramped, a file is awkward to pass around, or you want to revisit the result later at the same URL.

Your installation runs in your Cloudflare account. You control its data, credentials, and access. There is no shared hosted service.

Open the public demo

How it works

  1. Ask your agent to create an artifact.
  2. The agent builds and publishes the page.
  3. The page opens in your browser.
  4. You share it only with the people who need it.

Artifacts start private and expire after three days unless you ask for a different lifetime. Reusing an artifact keeps the same URL, which is handy for plans and reports that change over time.

Install with your agent

You need Node.js 26.7 or later, a Cloudflare account, and a Google account.

Give this request to Codex or Claude Code:

Install Codex Artifacts for me from https://github.com/none23/codex-artifacts.
First, ask me for the owner email address and any workspace viewers. Guide me
through creating a Google OAuth web client, then ask for its client ID and
secret. Have me enter secrets locally instead of in chat. Ask me to authorize
Cloudflare when needed. Then deploy the service, link its included skill into
this agent, verify the deployment, and tell me how to create my first artifact.

The agent can handle the repository, deployment, and skill setup. You will still need to sign in to Cloudflare and create a Google OAuth web client when prompted. Enter secrets locally instead of pasting them into chat.

Prefer to install it yourself? Show the manual steps.

1. Create a Google OAuth client

Create a web OAuth client in Google Cloud Console. Add this redirect URI:

http://localhost:5173/api/auth/callback/google

Copy the client ID and client secret. You will add the production redirect URI after deployment.

2. Deploy

git clone https://github.com/none23/codex-artifacts.git
cd codex-artifacts
npm ci
export GOOGLE_CLIENT_ID="your-client-id"export GOOGLE_CLIENT_SECRET="your-client-secret"
npm run setup -- --owner you@example.com

Setup signs in to Cloudflare, creates the required storage, deploys the service, and prints its URL.

To give someone read-only access to every artifact, add them as a workspace viewer:

npm run setup -- --owner you@example.com --viewer teammate@example.com

3. Finish Google sign-in

Add the production callback URL printed by setup to the same Google OAuth client. Open the service URL and choose Sign in with Google.

4. Connect your agent

Link the included skill into Codex, Claude Code, or both:

REPO_DIR="$(pwd)"
mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills"
ln -sfn "$REPO_DIR/skills/codex-artifacts" \
"${CODEX_HOME:-$HOME/.codex}/skills/codex-artifacts"
mkdir -p "$HOME/.claude/skills"
ln -sfn "$REPO_DIR/skills/codex-artifacts" \
"$HOME/.claude/skills/codex-artifacts"

Start a new agent session after linking the skill.

Create your first artifact

Ask in plain language:

Use codex-artifacts to create and publish a visual architecture report for this repository.

Include access or lifetime in the request when needed:

Publish this as a private artifact, share it with teammate@example.com, and keep it for one week.

The skill handles the publishing commands. You only need to describe the result and who should see it.

Access and configuration

ChoiceWhat it means
OwnerCan publish, update, delete, and manage access for every artifact
Workspace viewerCan read every artifact but cannot change anything
Artifact recipientCan read one artifact shared with their email address or email domain
Public accessAnyone with the link can read that artifact

Prefer exact email addresses for sensitive artifacts. Sharing with a domain gives every signed-in account on that domain access.

Setup saves the deployment configuration and secrets in ignored local files. Keep the repository clone, keep those files private, and rerun npm run setup when you need to change the installation. npm run setup -- --help lists the available settings.

For security reporting and secret-handling guidance, read SECURITY.md. For development setup and contribution rules, read CONTRIBUTING.md.

Codex Artifacts is independent and is not affiliated with or endorsed by OpenAI or Anthropic.

About

Publish agent-created artifacts as private, shareable web pages.

Resources

Contributing

Security policy

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Repository files navigation

Codex Artifacts logo

Codex Artifacts

Turn an agent's HTML output into a private link you can open and share.

Codex Artifacts is a self-hosted home for reports, dashboards, plans, and walkthroughs made by coding agents. It is useful when a chat response is too cramped, a file is awkward to pass around, or you want to revisit the result later at the same URL.

Your installation runs in your Cloudflare account. You control its data, credentials, and access. There is no shared hosted service.

Open the public demo

How it works

  1. Ask your agent to create an artifact.
  2. The agent builds and publishes the page.
  3. The page opens in your browser.
  4. You share it only with the people who need it.

Artifacts start private and expire after three days unless you ask for a different lifetime. Reusing an artifact keeps the same URL, which is handy for plans and reports that change over time.

Install with your agent

You need Node.js 26.7 or later, a Cloudflare account, and a Google account.

Give this request to Codex or Claude Code:

Install Codex Artifacts for me from https://github.com/none23/codex-artifacts.
First, ask me for the owner email address and any workspace viewers. Guide me
through creating a Google OAuth web client, then ask for its client ID and
secret. Have me enter secrets locally instead of in chat. Ask me to authorize
Cloudflare when needed. Then deploy the service, link its included skill into
this agent, verify the deployment, and tell me how to create my first artifact.

The agent can handle the repository, deployment, and skill setup. You will still need to sign in to Cloudflare and create a Google OAuth web client when prompted. Enter secrets locally instead of pasting them into chat.

Prefer to install it yourself? Show the manual steps.

1. Create a Google OAuth client

Create a web OAuth client in Google Cloud Console. Add this redirect URI:

http://localhost:5173/api/auth/callback/google

Copy the client ID and client secret. You will add the production redirect URI after deployment.

2. Deploy

git clone https://github.com/none23/codex-artifacts.git
cd codex-artifacts
npm ci
export GOOGLE_CLIENT_ID="your-client-id"export GOOGLE_CLIENT_SECRET="your-client-secret"
npm run setup -- --owner you@example.com

Setup signs in to Cloudflare, creates the required storage, deploys the service, and prints its URL.

To give someone read-only access to every artifact, add them as a workspace viewer:

npm run setup -- --owner you@example.com --viewer teammate@example.com

3. Finish Google sign-in

Add the production callback URL printed by setup to the same Google OAuth client. Open the service URL and choose Sign in with Google.

4. Connect your agent

Link the included skill into Codex, Claude Code, or both:

REPO_DIR="$(pwd)"
mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills"
ln -sfn "$REPO_DIR/skills/codex-artifacts" \
"${CODEX_HOME:-$HOME/.codex}/skills/codex-artifacts"
mkdir -p "$HOME/.claude/skills"
ln -sfn "$REPO_DIR/skills/codex-artifacts" \
"$HOME/.claude/skills/codex-artifacts"

Start a new agent session after linking the skill.

Create your first artifact

Ask in plain language:

Use codex-artifacts to create and publish a visual architecture report for this repository.

Include access or lifetime in the request when needed:

Publish this as a private artifact, share it with teammate@example.com, and keep it for one week.

The skill handles the publishing commands. You only need to describe the result and who should see it.

Access and configuration

ChoiceWhat it means
OwnerCan publish, update, delete, and manage access for every artifact
Workspace viewerCan read every artifact but cannot change anything
Artifact recipientCan read one artifact shared with their email address or email domain
Public accessAnyone with the link can read that artifact

Prefer exact email addresses for sensitive artifacts. Sharing with a domain gives every signed-in account on that domain access.

Setup saves the deployment configuration and secrets in ignored local files. Keep the repository clone, keep those files private, and rerun npm run setup when you need to change the installation. npm run setup -- --help lists the available settings.

For security reporting and secret-handling guidance, read SECURITY.md. For development setup and contribution rules, read CONTRIBUTING.md.

Codex Artifacts is independent and is not affiliated with or endorsed by OpenAI or Anthropic.

About

Publish agent-created artifacts as private, shareable web pages.

Resources

Contributing

Security policy

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Codex Artifacts logo

Codex Artifacts

Turn an agent's HTML output into a private link you can open and share.

Codex Artifacts is a self-hosted home for reports, dashboards, plans, and walkthroughs made by coding agents. It is useful when a chat response is too cramped, a file is awkward to pass around, or you want to revisit the result later at the same URL.

Your installation runs in your Cloudflare account. You control its data, credentials, and access. There is no shared hosted service.

Open the public demo

How it works

  1. Ask your agent to create an artifact.
  2. The agent builds and publishes the page.
  3. The page opens in your browser.
  4. You share it only with the people who need it.

Artifacts start private and expire after three days unless you ask for a different lifetime. Reusing an artifact keeps the same URL, which is handy for plans and reports that change over time.

Install with your agent

You need Node.js 26.7 or later, a Cloudflare account, and a Google account.

Give this request to Codex or Claude Code:

Install Codex Artifacts for me from https://github.com/none23/codex-artifacts.
First, ask me for the owner email address and any workspace viewers. Guide me
through creating a Google OAuth web client, then ask for its client ID and
secret. Have me enter secrets locally instead of in chat. Ask me to authorize
Cloudflare when needed. Then deploy the service, link its included skill into
this agent, verify the deployment, and tell me how to create my first artifact.

The agent can handle the repository, deployment, and skill setup. You will still need to sign in to Cloudflare and create a Google OAuth web client when prompted. Enter secrets locally instead of pasting them into chat.

Prefer to install it yourself? Show the manual steps.

1. Create a Google OAuth client

Create a web OAuth client in Google Cloud Console. Add this redirect URI:

http://localhost:5173/api/auth/callback/google

Copy the client ID and client secret. You will add the production redirect URI after deployment.

2. Deploy

git clone https://github.com/none23/codex-artifacts.git
cd codex-artifacts
npm ci
export GOOGLE_CLIENT_ID="your-client-id"export GOOGLE_CLIENT_SECRET="your-client-secret"
npm run setup -- --owner you@example.com

Setup signs in to Cloudflare, creates the required storage, deploys the service, and prints its URL.

To give someone read-only access to every artifact, add them as a workspace viewer:

npm run setup -- --owner you@example.com --viewer teammate@example.com

3. Finish Google sign-in

Add the production callback URL printed by setup to the same Google OAuth client. Open the service URL and choose Sign in with Google.

4. Connect your agent

Link the included skill into Codex, Claude Code, or both:

REPO_DIR="$(pwd)"
mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills"
ln -sfn "$REPO_DIR/skills/codex-artifacts" \
"${CODEX_HOME:-$HOME/.codex}/skills/codex-artifacts"
mkdir -p "$HOME/.claude/skills"
ln -sfn "$REPO_DIR/skills/codex-artifacts" \
"$HOME/.claude/skills/codex-artifacts"

Start a new agent session after linking the skill.

Create your first artifact

Ask in plain language:

Use codex-artifacts to create and publish a visual architecture report for this repository.

Include access or lifetime in the request when needed:

Publish this as a private artifact, share it with teammate@example.com, and keep it for one week.

The skill handles the publishing commands. You only need to describe the result and who should see it.

Access and configuration

ChoiceWhat it means
OwnerCan publish, update, delete, and manage access for every artifact
Workspace viewerCan read every artifact but cannot change anything
Artifact recipientCan read one artifact shared with their email address or email domain
Public accessAnyone with the link can read that artifact

Prefer exact email addresses for sensitive artifacts. Sharing with a domain gives every signed-in account on that domain access.

Setup saves the deployment configuration and secrets in ignored local files. Keep the repository clone, keep those files private, and rerun npm run setup when you need to change the installation. npm run setup -- --help lists the available settings.

For security reporting and secret-handling guidance, read SECURITY.md. For development setup and contribution rules, read CONTRIBUTING.md.

Codex Artifacts is independent and is not affiliated with or endorsed by OpenAI or Anthropic.

About

Publish agent-created artifacts as private, shareable web pages.

Resources

Contributing

Security policy

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Codex Artifacts logo

Codex Artifacts

Turn an agent's HTML output into a private link you can open and share.

Codex Artifacts is a self-hosted home for reports, dashboards, plans, and walkthroughs made by coding agents. It is useful when a chat response is too cramped, a file is awkward to pass around, or you want to revisit the result later at the same URL.

Your installation runs in your Cloudflare account. You control its data, credentials, and access. There is no shared hosted service.

Open the public demo

How it works

  1. Ask your agent to create an artifact.
  2. The agent builds and publishes the page.
  3. The page opens in your browser.
  4. You share it only with the people who need it.

Artifacts start private and expire after three days unless you ask for a different lifetime. Reusing an artifact keeps the same URL, which is handy for plans and reports that change over time.

Install with your agent

You need Node.js 26.7 or later, a Cloudflare account, and a Google account.

Give this request to Codex or Claude Code:

Install Codex Artifacts for me from https://github.com/none23/codex-artifacts.
First, ask me for the owner email address and any workspace viewers. Guide me
through creating a Google OAuth web client, then ask for its client ID and
secret. Have me enter secrets locally instead of in chat. Ask me to authorize
Cloudflare when needed. Then deploy the service, link its included skill into
this agent, verify the deployment, and tell me how to create my first artifact.

The agent can handle the repository, deployment, and skill setup. You will still need to sign in to Cloudflare and create a Google OAuth web client when prompted. Enter secrets locally instead of pasting them into chat.

Prefer to install it yourself? Show the manual steps.

1. Create a Google OAuth client

Create a web OAuth client in Google Cloud Console. Add this redirect URI:

http://localhost:5173/api/auth/callback/google

Copy the client ID and client secret. You will add the production redirect URI after deployment.

2. Deploy

git clone https://github.com/none23/codex-artifacts.git
cd codex-artifacts
npm ci
export GOOGLE_CLIENT_ID="your-client-id"export GOOGLE_CLIENT_SECRET="your-client-secret"
npm run setup -- --owner you@example.com

Setup signs in to Cloudflare, creates the required storage, deploys the service, and prints its URL.

To give someone read-only access to every artifact, add them as a workspace viewer:

npm run setup -- --owner you@example.com --viewer teammate@example.com

3. Finish Google sign-in

Add the production callback URL printed by setup to the same Google OAuth client. Open the service URL and choose Sign in with Google.

4. Connect your agent

Link the included skill into Codex, Claude Code, or both:

REPO_DIR="$(pwd)"
mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills"
ln -sfn "$REPO_DIR/skills/codex-artifacts" \
"${CODEX_HOME:-$HOME/.codex}/skills/codex-artifacts"
mkdir -p "$HOME/.claude/skills"
ln -sfn "$REPO_DIR/skills/codex-artifacts" \
"$HOME/.claude/skills/codex-artifacts"

Start a new agent session after linking the skill.

Create your first artifact

Ask in plain language:

Use codex-artifacts to create and publish a visual architecture report for this repository.

Include access or lifetime in the request when needed:

Publish this as a private artifact, share it with teammate@example.com, and keep it for one week.

The skill handles the publishing commands. You only need to describe the result and who should see it.

Access and configuration

ChoiceWhat it means
OwnerCan publish, update, delete, and manage access for every artifact
Workspace viewerCan read every artifact but cannot change anything
Artifact recipientCan read one artifact shared with their email address or email domain
Public accessAnyone with the link can read that artifact

Prefer exact email addresses for sensitive artifacts. Sharing with a domain gives every signed-in account on that domain access.

Setup saves the deployment configuration and secrets in ignored local files. Keep the repository clone, keep those files private, and rerun npm run setup when you need to change the installation. npm run setup -- --help lists the available settings.

For security reporting and secret-handling guidance, read SECURITY.md. For development setup and contribution rules, read CONTRIBUTING.md.

Codex Artifacts is independent and is not affiliated with or endorsed by OpenAI or Anthropic.

About

Publish agent-created artifacts as private, shareable web pages.

Resources

Contributing

Security policy

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Repository files navigation

Codex Artifacts logo

Codex Artifacts

Turn an agent's HTML output into a private link you can open and share.

Codex Artifacts is a self-hosted home for reports, dashboards, plans, and walkthroughs made by coding agents. It is useful when a chat response is too cramped, a file is awkward to pass around, or you want to revisit the result later at the same URL.

Your installation runs in your Cloudflare account. You control its data, credentials, and access. There is no shared hosted service.

Open the public demo

How it works

  1. Ask your agent to create an artifact.
  2. The agent builds and publishes the page.
  3. The page opens in your browser.
  4. You share it only with the people who need it.

Artifacts start private and expire after three days unless you ask for a different lifetime. Reusing an artifact keeps the same URL, which is handy for plans and reports that change over time.

Install with your agent

You need Node.js 26.7 or later, a Cloudflare account, and a Google account.

Give this request to Codex or Claude Code:

Install Codex Artifacts for me from https://github.com/none23/codex-artifacts.
First, ask me for the owner email address and any workspace viewers. Guide me
through creating a Google OAuth web client, then ask for its client ID and
secret. Have me enter secrets locally instead of in chat. Ask me to authorize
Cloudflare when needed. Then deploy the service, link its included skill into
this agent, verify the deployment, and tell me how to create my first artifact.

The agent can handle the repository, deployment, and skill setup. You will still need to sign in to Cloudflare and create a Google OAuth web client when prompted. Enter secrets locally instead of pasting them into chat.

Prefer to install it yourself? Show the manual steps.

1. Create a Google OAuth client

Create a web OAuth client in Google Cloud Console. Add this redirect URI:

http://localhost:5173/api/auth/callback/google

Copy the client ID and client secret. You will add the production redirect URI after deployment.

2. Deploy

git clone https://github.com/none23/codex-artifacts.git
cd codex-artifacts
npm ci
export GOOGLE_CLIENT_ID="your-client-id"export GOOGLE_CLIENT_SECRET="your-client-secret"
npm run setup -- --owner you@example.com

Setup signs in to Cloudflare, creates the required storage, deploys the service, and prints its URL.

To give someone read-only access to every artifact, add them as a workspace viewer:

npm run setup -- --owner you@example.com --viewer teammate@example.com

3. Finish Google sign-in

Add the production callback URL printed by setup to the same Google OAuth client. Open the service URL and choose Sign in with Google.

4. Connect your agent

Link the included skill into Codex, Claude Code, or both:

REPO_DIR="$(pwd)"
mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills"
ln -sfn "$REPO_DIR/skills/codex-artifacts" \
"${CODEX_HOME:-$HOME/.codex}/skills/codex-artifacts"
mkdir -p "$HOME/.claude/skills"
ln -sfn "$REPO_DIR/skills/codex-artifacts" \
"$HOME/.claude/skills/codex-artifacts"

Start a new agent session after linking the skill.

Create your first artifact

Ask in plain language:

Use codex-artifacts to create and publish a visual architecture report for this repository.

Include access or lifetime in the request when needed:

Publish this as a private artifact, share it with teammate@example.com, and keep it for one week.

The skill handles the publishing commands. You only need to describe the result and who should see it.

Access and configuration

ChoiceWhat it means
OwnerCan publish, update, delete, and manage access for every artifact
Workspace viewerCan read every artifact but cannot change anything
Artifact recipientCan read one artifact shared with their email address or email domain
Public accessAnyone with the link can read that artifact

Prefer exact email addresses for sensitive artifacts. Sharing with a domain gives every signed-in account on that domain access.

Setup saves the deployment configuration and secrets in ignored local files. Keep the repository clone, keep those files private, and rerun npm run setup when you need to change the installation. npm run setup -- --help lists the available settings.

For security reporting and secret-handling guidance, read SECURITY.md. For development setup and contribution rules, read CONTRIBUTING.md.

Codex Artifacts is independent and is not affiliated with or endorsed by OpenAI or Anthropic.

About

Publish agent-created artifacts as private, shareable web pages.

Resources

Contributing

Security policy

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Codex Artifacts logo

Codex Artifacts

Turn an agent's HTML output into a private link you can open and share.

Codex Artifacts is a self-hosted home for reports, dashboards, plans, and walkthroughs made by coding agents. It is useful when a chat response is too cramped, a file is awkward to pass around, or you want to revisit the result later at the same URL.

Your installation runs in your Cloudflare account. You control its data, credentials, and access. There is no shared hosted service.

Open the public demo

How it works

  1. Ask your agent to create an artifact.
  2. The agent builds and publishes the page.
  3. The page opens in your browser.
  4. You share it only with the people who need it.

Artifacts start private and expire after three days unless you ask for a different lifetime. Reusing an artifact keeps the same URL, which is handy for plans and reports that change over time.

Install with your agent

You need Node.js 26.7 or later, a Cloudflare account, and a Google account.

Give this request to Codex or Claude Code:

Install Codex Artifacts for me from https://github.com/none23/codex-artifacts.
First, ask me for the owner email address and any workspace viewers. Guide me
through creating a Google OAuth web client, then ask for its client ID and
secret. Have me enter secrets locally instead of in chat. Ask me to authorize
Cloudflare when needed. Then deploy the service, link its included skill into
this agent, verify the deployment, and tell me how to create my first artifact.

The agent can handle the repository, deployment, and skill setup. You will still need to sign in to Cloudflare and create a Google OAuth web client when prompted. Enter secrets locally instead of pasting them into chat.

Prefer to install it yourself? Show the manual steps.

1. Create a Google OAuth client

Create a web OAuth client in Google Cloud Console. Add this redirect URI:

http://localhost:5173/api/auth/callback/google

Copy the client ID and client secret. You will add the production redirect URI after deployment.

2. Deploy

git clone https://github.com/none23/codex-artifacts.git
cd codex-artifacts
npm ci
export GOOGLE_CLIENT_ID="your-client-id"export GOOGLE_CLIENT_SECRET="your-client-secret"
npm run setup -- --owner you@example.com

Setup signs in to Cloudflare, creates the required storage, deploys the service, and prints its URL.

To give someone read-only access to every artifact, add them as a workspace viewer:

npm run setup -- --owner you@example.com --viewer teammate@example.com

3. Finish Google sign-in

Add the production callback URL printed by setup to the same Google OAuth client. Open the service URL and choose Sign in with Google.

4. Connect your agent

Link the included skill into Codex, Claude Code, or both:

REPO_DIR="$(pwd)"
mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills"
ln -sfn "$REPO_DIR/skills/codex-artifacts" \
"${CODEX_HOME:-$HOME/.codex}/skills/codex-artifacts"
mkdir -p "$HOME/.claude/skills"
ln -sfn "$REPO_DIR/skills/codex-artifacts" \
"$HOME/.claude/skills/codex-artifacts"

Start a new agent session after linking the skill.

Create your first artifact

Ask in plain language:

Use codex-artifacts to create and publish a visual architecture report for this repository.

Include access or lifetime in the request when needed:

Publish this as a private artifact, share it with teammate@example.com, and keep it for one week.

The skill handles the publishing commands. You only need to describe the result and who should see it.

Access and configuration

ChoiceWhat it means
OwnerCan publish, update, delete, and manage access for every artifact
Workspace viewerCan read every artifact but cannot change anything
Artifact recipientCan read one artifact shared with their email address or email domain
Public accessAnyone with the link can read that artifact

Prefer exact email addresses for sensitive artifacts. Sharing with a domain gives every signed-in account on that domain access.

Setup saves the deployment configuration and secrets in ignored local files. Keep the repository clone, keep those files private, and rerun npm run setup when you need to change the installation. npm run setup -- --help lists the available settings.

For security reporting and secret-handling guidance, read SECURITY.md. For development setup and contribution rules, read CONTRIBUTING.md.

Codex Artifacts is independent and is not affiliated with or endorsed by OpenAI or Anthropic.

About

Publish agent-created artifacts as private, shareable web pages.

Resources

Contributing

Security policy

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Codex Artifacts logo

Codex Artifacts

Turn an agent's HTML output into a private link you can open and share.

Codex Artifacts is a self-hosted home for reports, dashboards, plans, and walkthroughs made by coding agents. It is useful when a chat response is too cramped, a file is awkward to pass around, or you want to revisit the result later at the same URL.

Your installation runs in your Cloudflare account. You control its data, credentials, and access. There is no shared hosted service.

Open the public demo

How it works

  1. Ask your agent to create an artifact.
  2. The agent builds and publishes the page.
  3. The page opens in your browser.
  4. You share it only with the people who need it.

Artifacts start private and expire after three days unless you ask for a different lifetime. Reusing an artifact keeps the same URL, which is handy for plans and reports that change over time.

Install with your agent

You need Node.js 26.7 or later, a Cloudflare account, and a Google account.

Give this request to Codex or Claude Code:

Install Codex Artifacts for me from https://github.com/none23/codex-artifacts.
First, ask me for the owner email address and any workspace viewers. Guide me
through creating a Google OAuth web client, then ask for its client ID and
secret. Have me enter secrets locally instead of in chat. Ask me to authorize
Cloudflare when needed. Then deploy the service, link its included skill into
this agent, verify the deployment, and tell me how to create my first artifact.

The agent can handle the repository, deployment, and skill setup. You will still need to sign in to Cloudflare and create a Google OAuth web client when prompted. Enter secrets locally instead of pasting them into chat.

Prefer to install it yourself? Show the manual steps.

1. Create a Google OAuth client

Create a web OAuth client in Google Cloud Console. Add this redirect URI:

http://localhost:5173/api/auth/callback/google

Copy the client ID and client secret. You will add the production redirect URI after deployment.

2. Deploy

git clone https://github.com/none23/codex-artifacts.git
cd codex-artifacts
npm ci
export GOOGLE_CLIENT_ID="your-client-id"export GOOGLE_CLIENT_SECRET="your-client-secret"
npm run setup -- --owner you@example.com

Setup signs in to Cloudflare, creates the required storage, deploys the service, and prints its URL.

To give someone read-only access to every artifact, add them as a workspace viewer:

npm run setup -- --owner you@example.com --viewer teammate@example.com

3. Finish Google sign-in

Add the production callback URL printed by setup to the same Google OAuth client. Open the service URL and choose Sign in with Google.

4. Connect your agent

Link the included skill into Codex, Claude Code, or both:

REPO_DIR="$(pwd)"
mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills"
ln -sfn "$REPO_DIR/skills/codex-artifacts" \
"${CODEX_HOME:-$HOME/.codex}/skills/codex-artifacts"
mkdir -p "$HOME/.claude/skills"
ln -sfn "$REPO_DIR/skills/codex-artifacts" \
"$HOME/.claude/skills/codex-artifacts"

Start a new agent session after linking the skill.

Create your first artifact

Ask in plain language:

Use codex-artifacts to create and publish a visual architecture report for this repository.

Include access or lifetime in the request when needed:

Publish this as a private artifact, share it with teammate@example.com, and keep it for one week.

The skill handles the publishing commands. You only need to describe the result and who should see it.

Access and configuration

ChoiceWhat it means
OwnerCan publish, update, delete, and manage access for every artifact
Workspace viewerCan read every artifact but cannot change anything
Artifact recipientCan read one artifact shared with their email address or email domain
Public accessAnyone with the link can read that artifact

Prefer exact email addresses for sensitive artifacts. Sharing with a domain gives every signed-in account on that domain access.

Setup saves the deployment configuration and secrets in ignored local files. Keep the repository clone, keep those files private, and rerun npm run setup when you need to change the installation. npm run setup -- --help lists the available settings.

For security reporting and secret-handling guidance, read SECURITY.md. For development setup and contribution rules, read CONTRIBUTING.md.

Codex Artifacts is independent and is not affiliated with or endorsed by OpenAI or Anthropic.

About

Publish agent-created artifacts as private, shareable web pages.

Resources

Contributing

Security policy

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Repository files navigation

Codex Artifacts logo

Codex Artifacts

Turn an agent's HTML output into a private link you can open and share.

Codex Artifacts is a self-hosted home for reports, dashboards, plans, and walkthroughs made by coding agents. It is useful when a chat response is too cramped, a file is awkward to pass around, or you want to revisit the result later at the same URL.

Your installation runs in your Cloudflare account. You control its data, credentials, and access. There is no shared hosted service.

Open the public demo

How it works

  1. Ask your agent to create an artifact.
  2. The agent builds and publishes the page.
  3. The page opens in your browser.
  4. You share it only with the people who need it.

Artifacts start private and expire after three days unless you ask for a different lifetime. Reusing an artifact keeps the same URL, which is handy for plans and reports that change over time.

Install with your agent

You need Node.js 26.7 or later, a Cloudflare account, and a Google account.

Give this request to Codex or Claude Code:

Install Codex Artifacts for me from https://github.com/none23/codex-artifacts.
First, ask me for the owner email address and any workspace viewers. Guide me
through creating a Google OAuth web client, then ask for its client ID and
secret. Have me enter secrets locally instead of in chat. Ask me to authorize
Cloudflare when needed. Then deploy the service, link its included skill into
this agent, verify the deployment, and tell me how to create my first artifact.

The agent can handle the repository, deployment, and skill setup. You will still need to sign in to Cloudflare and create a Google OAuth web client when prompted. Enter secrets locally instead of pasting them into chat.

Prefer to install it yourself? Show the manual steps.

1. Create a Google OAuth client

Create a web OAuth client in Google Cloud Console. Add this redirect URI:

http://localhost:5173/api/auth/callback/google

Copy the client ID and client secret. You will add the production redirect URI after deployment.

2. Deploy

git clone https://github.com/none23/codex-artifacts.git
cd codex-artifacts
npm ci
export GOOGLE_CLIENT_ID="your-client-id"export GOOGLE_CLIENT_SECRET="your-client-secret"
npm run setup -- --owner you@example.com

Setup signs in to Cloudflare, creates the required storage, deploys the service, and prints its URL.

To give someone read-only access to every artifact, add them as a workspace viewer:

npm run setup -- --owner you@example.com --viewer teammate@example.com

3. Finish Google sign-in

Add the production callback URL printed by setup to the same Google OAuth client. Open the service URL and choose Sign in with Google.

4. Connect your agent

Link the included skill into Codex, Claude Code, or both:

REPO_DIR="$(pwd)"
mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills"
ln -sfn "$REPO_DIR/skills/codex-artifacts" \
"${CODEX_HOME:-$HOME/.codex}/skills/codex-artifacts"
mkdir -p "$HOME/.claude/skills"
ln -sfn "$REPO_DIR/skills/codex-artifacts" \
"$HOME/.claude/skills/codex-artifacts"

Start a new agent session after linking the skill.

Create your first artifact

Ask in plain language:

Use codex-artifacts to create and publish a visual architecture report for this repository.

Include access or lifetime in the request when needed:

Publish this as a private artifact, share it with teammate@example.com, and keep it for one week.

The skill handles the publishing commands. You only need to describe the result and who should see it.

Access and configuration

ChoiceWhat it means
OwnerCan publish, update, delete, and manage access for every artifact
Workspace viewerCan read every artifact but cannot change anything
Artifact recipientCan read one artifact shared with their email address or email domain
Public accessAnyone with the link can read that artifact

Prefer exact email addresses for sensitive artifacts. Sharing with a domain gives every signed-in account on that domain access.

Setup saves the deployment configuration and secrets in ignored local files. Keep the repository clone, keep those files private, and rerun npm run setup when you need to change the installation. npm run setup -- --help lists the available settings.

For security reporting and secret-handling guidance, read SECURITY.md. For development setup and contribution rules, read CONTRIBUTING.md.

Codex Artifacts is independent and is not affiliated with or endorsed by OpenAI or Anthropic.

About

Publish agent-created artifacts as private, shareable web pages.

Resources

Contributing

Security policy

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Used by

Contributors

Languages