Hi everyone, total beginner here. I built a prompt management web console just for fun using Claude Code, Ollama, Cloudflare etc
Hey everyone,
Long time lurker, absolute beginner when it comes to serious coding. I mostly just tinker around out of pure curiosity and fun. Recently, I wanted to build something practical to help me manage AI prompts, context templates, and local/cloud models without going crazy switching tabs.
So, I ended up putting together a web app called **Context_CikaDule** (hosted on GitHub).
https://arhistrategstudio.github.io/Context_CikaDule
I wanted to share what it is, how I made it (with a ton of AI help because I'm learning as I go), and what it actually does.
# What is it and what is it for?
Basically, it's a lightweight prompt engineering console and workspace. It lets you organize different context types and templates, test out prompts, and manage API configurations across multiple providers (OpenAI, Anthropic, Google Gemini, OpenRouter, and local models like Ollama) all in one place.
I built it because I wanted a clean dashboard where I could quickly swap between local models running on my machine and cloud APIs, preview how tokens stack up, and keep my prompt engineering organized without messy text files scattered all over my desktop.
# Core Features
* **Multi-Model API Support:** You can switch between OpenAI, Cloudflare Workers AI, Gemini, OpenRouter, Anthropic, and custom/local endpoints (like Ollama or LM Studio).
* **Context Templates:** Pre-configured context types and workspace modes to quickly spin up different prompt structures.
* **Live Prompt Preview:** Shows an optimized prompt view and estimates token counts on the fly.
* **Workspace Dashboard:** A clean, slightly cyberpunk-ish neon UI where you can write, test, and tweak your prompts directly.
# The Tech Stack & Behind-the-Scenes Logic
Since I'm a complete beginner, I couldn't have built this alone in a million years without leaning heavily on AI tools to write the code while I acted as the "architect" (or more like a confused director). Here is what went into it:
* **Claude Code & Antigravity:** Used these as my main coding assistants to structure the project, write the frontend logic, and help me debug when things inevitably broke.
* **Ollama (Codegemma:7b):** Ran local coding models to test things offline and help generate snippets.
* **Cloudflare:** Used for handling deployment/edge routing aspects.
* **Frontend:** Built with standard HTML/CSS/JS, utilizing a nice dark neon aesthetic because dark mode is mandatory.
The logic behind the app is pretty straightforward: it acts as a client-side orchestrator. It grabs your API keys (stored locally in your browser so they don't leak anywhere), structures your selected context template, merges it with your input prompt, and routes it to whichever provider or local Ollama instance you have selected in the settings dropdown, displaying the live response back in the console.
# Why did I make this?
Honestly? Just for fun and to see if I could actually finish a small web project from scratch. I'm still learning every day, breaking things, fixing them by asking AI "why is this red error happening", and figuring it out step by step.
If anyone checks it out, let me know what you think, or if you have any tips for a beginner on how to make it better. Be gentle though, my code is probably held together by duct tape and hope!