Codex Mcps Demo
What is Codex Mcps Demo
codex-mcps-demo is a demonstration project that utilizes the Claude AI model from Anthropic to generate diagrams from code structures. It serves as an example of how to integrate AI capabilities into coding workflows.
Use cases
Use cases include generating documentation for codebases, visualizing code structures for better understanding, and automating the documentation process in continuous integration workflows.
How to use
To use codex-mcps-demo, clone the repository, set up your environment with the required API key and Node.js version, install necessary dependencies, and run the provided scripts to generate diagrams from your code.
Key features
Key features include the ability to generate AI-driven diagrams from code, integration with Anthropic’s Claude AI, and a customizable workflow that can be adapted for automated documentation generation.
Where to use
codex-mcps-demo can be used in software development environments, particularly in projects that require documentation generation, code visualization, or integration of AI tools into development processes.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Overview
What is Codex Mcps Demo
codex-mcps-demo is a demonstration project that utilizes the Claude AI model from Anthropic to generate diagrams from code structures. It serves as an example of how to integrate AI capabilities into coding workflows.
Use cases
Use cases include generating documentation for codebases, visualizing code structures for better understanding, and automating the documentation process in continuous integration workflows.
How to use
To use codex-mcps-demo, clone the repository, set up your environment with the required API key and Node.js version, install necessary dependencies, and run the provided scripts to generate diagrams from your code.
Key features
Key features include the ability to generate AI-driven diagrams from code, integration with Anthropic’s Claude AI, and a customizable workflow that can be adapted for automated documentation generation.
Where to use
codex-mcps-demo can be used in software development environments, particularly in projects that require documentation generation, code visualization, or integration of AI tools into development processes.
Clients Supporting MCP
The following are the main client software that supports the Model Context Protocol. Click the link to visit the official website for more information.
Content
codex-mcps-demo
Try it out
git clone https://github.com/jordan-cutler/codex-mcps-demo.gitto clone the repo.- Create a
.envfile and setANTHROPIC_API_KEYto your API key from the Anthropic console. nvm install 22 && nvm alias default 22 && nvm use 22to ensure you have node 22 and are using itnpm i -g pnpmto ensure you havepnpminstalledpnpm installto install dependenciesnpm install -g @anthropic-ai/claude-codeto install Claude per the official docsnode --experimental-strip-types scripts/claudeDiagram.ts <inputFolder>. For example,node --experimental-strip-types scripts/claudeDiagram.ts folder-samples/slack.- You should see the
outputs/folder update as Claude runs. Once it’s finished, it will output adiagram.ai.mdfile to<inputFolder>/diagram.ai.md. For example, here’s a commit from running it on folder-samples/slack
[!NOTE]
From the.claude/settings.jsonfile, Claude has access to bash commands. Run the script at your own risk.
Future expansion
There is a Github action in .github/workflows/claude-diagram.yml which runs the Claude script on a hardcoded folder (folder-samples/slack). This could be modified to only pass in any folders which have changed from the most recent push. Doing this would auto-generate documentation for every changed folder in the codebase as engineers commit to it.
You may or may not want to do this for your own reasons 😄
Dev Tools Supporting MCP
The following are the main code editors that support the Model Context Protocol. Click the link to visit the official website for more information.
