prodex-js
- ide
The ultimate vide coding MCP!
About
What is prodex-js?
prodex-js is a JavaScript library that enhances AI-assisted coding ("vibe coding") by injecting component-level and page-level prompts into web pages. It includes basic vision integration so an MCP client can "ask questions" about what the screen displays. Designed for developers using MCP‑enabled agents in editors like Cursor, it works by adding a single script tag to the page.
How to use prodex-js?
Add the library script to the <head> of your HTML file and set the k parameter to load "magic components" (omit it for production). Then configure your editor’s MCP client to point to the prodex‑js MCP server (currently hosted at https://prodex-api.onrender.com/mcp/sse?api_key=sk_test). For example, in Claude Code run: claude mcp add prodex --transport sse https://prodex-api.onrender.com/mcp/sse?api_key=sk_test. For other editors, add the server definition to your MCP configuration file (e.g., claude_desktop_config.json).
Key features of prodex-js
- Component-level prompt injection
- Page-level prompt injection
- Basic vision integration (ask questions about screen content)
- Simple script tag setup (no build step required)
- Works with any MCP‑compatible agentic editor
Use cases of prodex-js
- Provide real‑time context about UI components to an AI coding agent during development.
- Enable an AI assistant to "see" the current screen and answer questions about layout or state.
- Streamline prompt engineering for vibe‑coding workflows by embedding prompts directly into the page.
- Use with React‑based (Vite) projects to give the AI agent structured component information.
FAQ from prodex-js
Which editors are supported?
Tested with Cursor, but it should work with any editor that supports MCP connections to agentic code assistants.
How do I get the magic components?
Set the k query parameter in the script tag URL (e.g., ?k=test). Without it, the components are not loaded—useful for production builds.
Is the backend server free to use?
Yes, you can use sk_test as the API key for testing. The backend is currently hosted externally; the author may release a local binary in the future.
What are the known framework limitations?
Only tested with two React‑based projects using Vite. It may not work with other frameworks or build tools.
Is prodex-js open source?
Yes, it is released under the MIT license. See the LICENSE file for details.
Details
- Author
- tarasyarema
- GitHub stars
- 6
- Category
- ide
- Repository
- tarasyarema/prodex-js
prodex-js
Simple JS library that let you vibe code to the next level!
https://github.com/user-attachments/assets/5fc85e16-0a18-4b97-aa6c-e18e6767a407
Features
- Component-level prompt;
- Page level prompt;
- Basic vision integration (MCP client can "ask question" to what you see in the screen);
- (Not implemented) Screen capture integration.
Usage
Code setup
To use, add the following to the head of your HTML file:
<script name="prodex" src="http://cdn.jsdelivr.net/gh/tarasyarema/prodex-js@v0.1.4/core.min.js?k=test"></script>
if you set the k the magic components will be loaded, if you do not set it the magic components will not load (e.g. for production builds).
You can set the @master to always get the latest version, or a specific version. But it might be "more" unstable.
MCP setup
Add the foloowing to your MCP setup
{
"mcpServers": {
"prodex": {
"url": "https://prodex-api.onrender.com/mcp/sse?api_key=sk_test"
}
}
}
you can use sk_test as the api_key for testing purposes.
Currently I'm hosting the backend myself, but in the future I might open source / distribute a binary so that you can
run the MCP locally, as it might be part of a bigger project.
If you are really interested in the backend or can not use the an external service, please let me know via LinkedIn
and I may give you access / binaries.
Claude code
Ensure you have 0.2.54 or above
claude mcp add prodex --transport sse https://prodex-api.onrender.com/mcp/sse?api_key=sk_test
Disclaimers
1. I tested with Cursor, but probably any other editor that has an MCP connection with their agentic code;
2. Currently tested in development in two React based projects (with vite), not sure if it will work with other frameworks.
Development
Check the core.js file for the source code.
Contributing
Please open a PR, or just DM me in LinkedIn (Taras Yarema) if you have questions.
License
MIT, see LICENSE for more information.
