AI Coding Agent Widget for Web Development - Code mutates like cosmic radiation
Verified details
These details have been verified by PyPIProject links
GitHub Statistics
Maintainers
Project description
AI coding assistant that lives in your dev environment
Powered by Claude. Reads, writes, and edits your code while you work.
Quick Start • Features • Vite • Next.js • Configuration
Choose Your Integration
| Your Project | Recommended |
|---|---|
| Plain HTML/CSS | cosmux dev — zero config! |
| Vite/React/Vue | Vite Plugin |
| Next.js | Next.js Wrapper |
| Other frameworks | Manual Script |
| Standalone Chat | http://localhost:3333/cosmux |
HTML/CSS Projects
The simplest way to use Cosmux. No configuration needed.
1. Install
pip install cosmux
2. Set your API key
export ANTHROPIC_API_KEY=sk-ant-api03-...
3. Start development
cd your-website/
cosmux dev
Open http://localhost:5174 — your website with the AI assistant injected.
What you get:
- CSS changes update instantly (no page reload)
- HTML changes auto-reload the page
- Widget auto-injected into your HTML
- Backend + Vite dev server managed for you
Quick Start (Standalone)
Just want the chat interface? No widget injection needed.
1. Install
pip install cosmux
2. Set your API key
# .env or environment
ANTHROPIC_API_KEY=sk-ant-api03-...
3. Start the server
cosmux serve
4. Open the chat
Visit http://localhost:3333/cosmux — the AI assistant is ready!
Features
| Feature | Description | |
|---|---|---|
| 💬 | Chat Interface | Natural conversation with streaming responses |
| 🧠 | Extended Thinking | Watch the AI reason through complex problems |
| 📁 | File Operations | Read, Write, Edit files in your project |
| 💻 | Terminal Access | Run shell commands via Bash tool |
| 🔍 | Code Search | Glob and Grep tools for finding code |
| 💾 | Session Persistence | Chat history saved locally |
| 📖 | Context-Aware | Reads CLAUDE.md for project understanding |
Vite Integration
Inject the widget automatically into your Vite app.
1. Install both packages
pip install cosmux
npm install -D cosmux
2. Add the plugin
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { cosmux } from 'cosmux/vite'
export default defineConfig({
plugins: [
react(),
cosmux() // Starts server + injects widget
]
})
3. Run your dev server
npm run dev
The widget appears automatically! The plugin:
- Starts
cosmux servewhen Vite starts - Injects the widget into your HTML
- Stops the server when Vite closes
Plugin Options
cosmux({
port: 3333, // Server port (default: 3333)
autoStart: true, // Auto-start server (default: true)
injectWidget: true, // Inject widget script (default: true)
workspace: './', // Workspace path (default: cwd)
})
Next.js Integration
Option 1: Config Wrapper
// next.config.mjs
import { withCosmux } from 'cosmux/next'
export default withCosmux({
// your existing Next.js config
})
Option 2: Widget Component (App Router)
Create a client component:
// components/CosmuxWidget.tsx
'use client'
import { useEffect } from 'react'
export function CosmuxWidget({ port = 3333 }: { port?: number }) {
useEffect(() => {
if (process.env.NODE_ENV !== 'development') return
;(window as any).__COSMUX_CONFIG__ = { serverUrl: `http://localhost:${port}` }
const script = document.createElement('script')
script.src = `http://localhost:${port}/static/cosmux-widget.iife.js`
script.async = true
document.body.appendChild(script)
return () => { script.remove() }
}, [port])
return null
}
Add to your layout:
// app/layout.tsx
import { CosmuxWidget } from '@/components/CosmuxWidget'
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<CosmuxWidget />
</body>
</html>
)
}
Manual Integration
For any web project, add the script tags:
<script>
window.__COSMUX_CONFIG__ = { serverUrl: 'http://localhost:3333' };
</script>
<script src="http://localhost:3333/static/cosmux-widget.iife.js"></script>
<link rel="stylesheet" href="http://localhost:3333/static/cosmux-widget.css">
Then start the server:
cosmux serve
CLI Commands
# Development (HTML/CSS projects)
cosmux dev # Start dev environment with HMR
cosmux dev --port 8080 # Custom dev server port
cosmux dev -w ./my-site # Specify workspace
# Server only (for other integrations)
cosmux serve # Start the backend server
cosmux serve --port 4000 # Custom port
cosmux serve --workspace ./project # Specific workspace
# Setup & Auth
cosmux init # Create CLAUDE.md template
cosmux login # Login with Claude Max (OAuth)
cosmux logout # Remove stored credentials
cosmux status # Show auth status
cosmux version # Show version
Configuration
Environment Variables
| Variable | Description | Default |
|---|---|---|
ANTHROPIC_API_KEY |
Your Anthropic API key | Required |
COSMUX_PORT |
Server port | 3333 |
COSMUX_MODEL |
Claude model | claude-opus-4-5-20251101 |
Project Context
Create a CLAUDE.md file in your project root to give the AI context:
# My Project
## Tech Stack
- React 18 + TypeScript
- Tailwind CSS
## Code Style
- Use functional components
- Prefer named exports
How It Works
- Install —
pip install cosmuxadds the CLI and server - Start —
cosmux serveruns the agent server - Connect — Open
/cosmuxor inject the widget - Code — AI reads and modifies files in your workspace
All file operations happen locally. Your code is only sent to Claude's API for processing.
Troubleshooting
Widget doesn't appear?
- Check that the server is running (look for "Cosmux Server Starting" in terminal)
- Verify your API key is set in
.env - Try opening
http://localhost:3333/cosmuxdirectly
Server won't start?
- Check if port 3333 is in use:
lsof -i :3333 - Try a different port:
cosmux serve --port 4000
"cosmux: command not found"?
- Make sure Python bin directory is in your PATH
- Try:
python -m cosmux serve
Requirements
- Python 3.11+ — for the server
- Node.js 18+ — only for Vite/Next.js integration (optional)
- Anthropic API key — console.anthropic.com
License
MIT — see LICENSE
Project details
Verified details
These details have been verified by PyPIProject links
GitHub Statistics
Maintainers
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
cosmux-0.3.0.tar.gz
(1.3 MB
view details)
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file cosmux-0.3.0.tar.gz.
File metadata
- Download URL: cosmux-0.3.0.tar.gz
- Upload date:
- Size: 1.3 MB
- Tags: Source
- Uploaded using Trusted Publishing? Yes
- Uploaded via: twine/6.1.0 CPython/3.13.7
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
e51d51fb763aa65ba757b7965003edf8c700ba845a1cc25a08df0b5067014a78
|
|
| MD5 |
f663a2e3bd79e922ebde0d6f18df7c8e
|
|
| BLAKE2b-256 |
fdd740fa3b9c87c466ec06d88f63bde8dee946837fa8d2142b6f822d1b1f58ef
|
Provenance
The following attestation bundles were made for cosmux-0.3.0.tar.gz:
Publisher:
release.yml on techdivision-rnd/cosmux
-
Statement:
-
Statement type:
https://in-toto.io/Statement/v1 -
Predicate type:
https://docs.pypi.org/attestations/publish/v1 -
Subject name:
cosmux-0.3.0.tar.gz -
Subject digest:
e51d51fb763aa65ba757b7965003edf8c700ba845a1cc25a08df0b5067014a78 - Sigstore transparency entry: 834814997
- Sigstore integration time:
-
Permalink:
techdivision-rnd/cosmux@fd378826e7d273f93c337402f080543ef082d968 -
Branch / Tag:
refs/heads/master - Owner: https://github.com/techdivision-rnd
-
Access:
private
-
Token Issuer:
https://token.actions.githubusercontent.com -
Runner Environment:
github-hosted -
Publication workflow:
release.yml@fd378826e7d273f93c337402f080543ef082d968 -
Trigger Event:
push
-
Statement type:
File details
Details for the file cosmux-0.3.0-py3-none-any.whl.
File metadata
- Download URL: cosmux-0.3.0-py3-none-any.whl
- Upload date:
- Size: 1.3 MB
- Tags: Python 3
- Uploaded using Trusted Publishing? Yes
- Uploaded via: twine/6.1.0 CPython/3.13.7
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
44c74c71ee9d94583b64413b75a351792d4e34f331570a44ed8b786d552cbc88
|
|
| MD5 |
6f94f2080f9d460788c5d1ffe2d0328c
|
|
| BLAKE2b-256 |
8079486ad1aeeafef7eee84f07162837d718f2c258627c6ddd098186d1d23c23
|
Provenance
The following attestation bundles were made for cosmux-0.3.0-py3-none-any.whl:
Publisher:
release.yml on techdivision-rnd/cosmux
-
Statement:
-
Statement type:
https://in-toto.io/Statement/v1 -
Predicate type:
https://docs.pypi.org/attestations/publish/v1 -
Subject name:
cosmux-0.3.0-py3-none-any.whl -
Subject digest:
44c74c71ee9d94583b64413b75a351792d4e34f331570a44ed8b786d552cbc88 - Sigstore transparency entry: 834815001
- Sigstore integration time:
-
Permalink:
techdivision-rnd/cosmux@fd378826e7d273f93c337402f080543ef082d968 -
Branch / Tag:
refs/heads/master - Owner: https://github.com/techdivision-rnd
-
Access:
private
-
Token Issuer:
https://token.actions.githubusercontent.com -
Runner Environment:
github-hosted -
Publication workflow:
release.yml@fd378826e7d273f93c337402f080543ef082d968 -
Trigger Event:
push
-
Statement type:
