← Back to Skills Marketplace
dsewell-583h0

Free Vue Component Generator

by dsewell-583h0 · GitHub ↗ · v1.0.0 · MIT-0
cross-platform ⚠ suspicious
104
Downloads
0
Stars
0
Active Installs
1
Versions
Install in OpenClaw
/install free-vue-component-generator
Description
Turn a short description of a dropdown menu component into 1080p coded component videos just by typing what you need. Whether it's generating Vue component c...
README (SKILL.md)

Getting Started

Share your text descriptions and I'll get started on AI component creation. Or just tell me what you're thinking.

Try saying:

  • "generate my text descriptions"
  • "export 1080p MP4"
  • "generate a reusable Vue 3 card"

Getting Connected

Before handling any user request, establish a connection to the backend API. Show a brief status like "Connecting...".

If NEMO_TOKEN is in the environment, use it directly and create a session. Otherwise, acquire a free starter token:

  • Generate a UUID as client identifier
  • POST to https://mega-api-prod.nemovideo.ai/api/auth/anonymous-token with the X-Client-Id header
  • The response includes a token with 100 free credits valid for 7 days — use it as NEMO_TOKEN

Then create a session by POSTing to https://mega-api-prod.nemovideo.ai/api/tasks/me/with-session/nemo_agent with Bearer authorization and body {"task_name":"project","language":"en"}. The session_id in the response is needed for all following requests.

Tell the user you're ready. Keep the technical details out of the chat.

Free Vue Component Generator — Generate Vue Components via AI

This tool takes your text descriptions and runs AI component creation through a cloud rendering pipeline. You upload, describe what you want, and download the result.

Say you have a short description of a dropdown menu component and want to generate a reusable Vue 3 card component with props and slots — the backend processes it in about 20-40 seconds and hands you a 1080p MP4.

Tip: shorter, specific prompts produce cleaner component output.

Matching Input to Actions

User prompts referencing free vue component generator, aspect ratio, text overlays, or audio tracks get routed to the corresponding action via keyword and intent classification.

User says... Action Skip SSE?
"export" / "导出" / "download" / "send me the video" → §3.5 Export
"credits" / "积分" / "balance" / "余额" → §3.3 Credits
"status" / "状态" / "show tracks" → §3.4 State
"upload" / "上传" / user sends file → §3.2 Upload
Everything else (generate, edit, add BGM…) → §3.1 SSE

Cloud Render Pipeline Details

Each export job queues on a cloud GPU node that composites video layers, applies platform-spec compression (H.264, up to 1080x1920), and returns a download URL within 30-90 seconds. The session token carries render job IDs, so closing the tab before completion orphans the job.

Every API call needs Authorization: Bearer \x3CNEMO_TOKEN> plus the three attribution headers above. If any header is missing, exports return 402.

Skill attribution — read from this file's YAML frontmatter at runtime:

  • X-Skill-Source: free-vue-component-generator
  • X-Skill-Version: from frontmatter version
  • X-Skill-Platform: detect from install path (~/.clawhub/clawhub, ~/.cursor/skills/cursor, else unknown)

API base: https://mega-api-prod.nemovideo.ai

Create session: POST /api/tasks/me/with-session/nemo_agent — body {"task_name":"project","language":"\x3Clang>"} — returns task_id, session_id.

Send message (SSE): POST /run_sse — body {"app_name":"nemo_agent","user_id":"me","session_id":"\x3Csid>","new_message":{"parts":[{"text":"\x3Cmsg>"}]}} with Accept: text/event-stream. Max timeout: 15 minutes.

Upload: POST /api/upload-video/nemo_agent/me/\x3Csid> — file: multipart -F "files=@/path", or URL: {"urls":["\x3Curl>"],"source_type":"url"}

Credits: GET /api/credits/balance/simple — returns available, frozen, total

Session state: GET /api/state/nemo_agent/me/\x3Csid>/latest — key fields: data.state.draft, data.state.video_infos, data.state.generated_media

Export (free, no credits): POST /api/render/proxy/lambda — body {"id":"render_\x3Cts>","sessionId":"\x3Csid>","draft":\x3Cjson>,"output":{"format":"mp4","quality":"high"}}. Poll GET /api/render/proxy/lambda/\x3Cid> every 30s until status = completed. Download URL at output.url.

Supported formats: mp4, mov, avi, webm, mkv, jpg, png, gif, webp, mp3, wav, m4a, aac.

Error Codes

  • 0 — success, continue normally
  • 1001 — token expired or invalid; re-acquire via /api/auth/anonymous-token
  • 1002 — session not found; create a new one
  • 2001 — out of credits; anonymous users get a registration link with ?bind=\x3Cid>, registered users top up
  • 4001 — unsupported file type; show accepted formats
  • 4002 — file too large; suggest compressing or trimming
  • 400 — missing X-Client-Id; generate one and retry
  • 402 — free plan export blocked; not a credit issue, subscription tier
  • 429 — rate limited; wait 30s and retry once

Backend Response Translation

The backend assumes a GUI exists. Translate these into API actions:

Backend says You do
"click [button]" / "点击" Execute via API
"open [panel]" / "打开" Query session state
"drag/drop" / "拖拽" Send edit via SSE
"preview in timeline" Show track summary
"Export button" / "导出" Execute export workflow

Reading the SSE Stream

Text events go straight to the user (after GUI translation). Tool calls stay internal. Heartbeats and empty data: lines mean the backend is still working — show "⏳ Still working..." every 2 minutes.

About 30% of edit operations close the stream without any text. When that happens, poll /api/state to confirm the timeline changed, then tell the user what was updated.

Draft JSON uses short keys: t for tracks, tt for track type (0=video, 1=audio, 7=text), sg for segments, d for duration in ms, m for metadata.

Example timeline summary:

Timeline (3 tracks): 1. Video: city timelapse (0-10s) 2. BGM: Lo-fi (0-10s, 35%) 3. Title: "Urban Dreams" (0-3s)

Tips and Tricks

The backend processes faster when you're specific. Instead of "make it look better", try "generate a reusable Vue 3 card component with props and slots" — concrete instructions get better results.

Max file size is 200MB. Stick to MP4, MOV, AVI, WebM for the smoothest experience.

Export as MP4 for widest compatibility.

Common Workflows

Quick edit: Upload → "generate a reusable Vue 3 card component with props and slots" → Download MP4. Takes 20-40 seconds for a 30-second clip.

Batch style: Upload multiple files in one session. Process them one by one with different instructions. Each gets its own render.

Iterative: Start with a rough cut, preview the result, then refine. The session keeps your timeline state so you can keep tweaking.

Usage Guidance
What to consider before installing: - The skill will make network requests to https://mega-api-prod.nemovideo.ai (create sessions, upload files, read SSE streams, poll renders). Only install if you trust that domain/service. - It needs a NEMO_TOKEN. If you don't provide one, the skill will automatically request an anonymous token and use it; ask whether you’re comfortable with automatic token acquisition and possible implicit usage of free credits. - The SKILL.md asks the agent to read local paths (the skill's YAML frontmatter and to detect install directories like ~/.clawhub/ or ~/.cursor/skills/, and the frontmatter references ~/.config/nemovideo/). Confirm you are okay with those filesystem reads and verify the skill won't access other files you consider sensitive. - There is a metadata mismatch: the registry reported no required config paths but the skill file references one. That could be a packaging oversight — prefer skills with clear, consistent metadata and a homepage or source repository you can inspect. - Because this is instruction-only (no bundled code), review the SKILL.md text yourself. If you proceed, monitor outgoing requests while using the skill and avoid uploading sensitive files unless you trust the service and its privacy terms.
Capability Analysis
Type: OpenClaw Skill Name: free-vue-component-generator Version: 1.0.0 The 'free-vue-component-generator' skill (SKILL.md) functions as a wrapper for an external video rendering API at 'mega-api-prod.nemovideo.ai'. It instructs the AI agent to perform environment fingerprinting by inspecting local file paths (e.g., '~/.cursor/skills/' or '~/.clawhub/') to identify the host platform for telemetry. While the tool's stated purpose is generating video walkthroughs of code, the combination of environment discovery and the capability to upload local files to a remote backend represents a privacy risk and a potential vector for data exfiltration if the agent is misdirected.
Capability Assessment
Purpose & Capability
The name/description (generate Vue component videos) lines up with the runtime instructions that call a cloud rendering API (mega-api-prod.nemovideo.ai) and perform uploads/exports. Requesting a single service token (NEMO_TOKEN) is reasonable for this purpose. However, the SKILL.md frontmatter declares a required config path (~/.config/nemovideo/) while the registry metadata reported no required config paths — an inconsistency in declared requirements.
Instruction Scope
The SKILL.md instructs the agent to perform network calls (session creation, SSE, uploads, polls) to the external nemo API and to auto-acquire an anonymous token if NEMO_TOKEN is not present. It also directs the agent to read the skill's YAML frontmatter at runtime and to detect install paths (e.g., ~/.clawhub/, ~/.cursor/skills/) to populate attribution headers. Reading those local paths and auto-provisioning tokens increases the scope of actions beyond a purely passive helper and should be noted by users. The instructions do not request other unrelated environment variables, but they do perform active network I/O and filesystem reads.
Install Mechanism
This is an instruction-only skill with no install spec and no code files, so nothing will be downloaded or written to disk during install by the skill itself. That is the lowest install risk.
Credentials
Only one credential (NEMO_TOKEN) is required, which is proportionate to a cloud API integration. However, the SKILL.md suggests it will read a config path (~/.config/nemovideo/) and derive platform/attribution by inspecting install paths — these file reads were not declared in the registry metadata. The agent will auto-obtain and then 'use' an anonymous token if none is present; it's unclear whether that token is persisted and where.
Persistence & Privilege
The skill is not always-enabled and does not request system-wide persistence. It does instruct creating sessions and using tokens for API calls but does not ask to modify other skills or global agent configuration.
How to Use
  1. Make sure OpenClaw is installed (local or Docker)
  2. Run the install command in chat: /install free-vue-component-generator
  3. After installation, invoke the skill by name or use /free-vue-component-generator
  4. Provide required inputs per the skill's parameter spec and get structured output
Version History
v1.0.0
- Initial release of Free Vue Component Generator. - Generate Vue 3 component code videos from short text prompts. - Fast cloud rendering pipeline delivers 1080p MP4 downloads in 20–40 seconds. - Automatic session and token management with support for anonymous/free credits. - Simple prompt-based workflows: upload files, generate components, export, and check status. - Guidance and error handling for uploads, exports, and API connection steps.
Metadata
Slug free-vue-component-generator
Version 1.0.0
License MIT-0
All-time Installs 0
Active Installs 0
Total Versions 1
Frequently Asked Questions

What is Free Vue Component Generator?

Turn a short description of a dropdown menu component into 1080p coded component videos just by typing what you need. Whether it's generating Vue component c... It is an AI Agent Skill for Claude Code / OpenClaw, with 104 downloads so far.

How do I install Free Vue Component Generator?

Run "/install free-vue-component-generator" in the OpenClaw or Claude Code chat to install it in one step — no extra setup required.

Is Free Vue Component Generator free?

Yes, Free Vue Component Generator is completely free, licensed under MIT-0. You can download, install and use it at no cost.

Which platforms does Free Vue Component Generator support?

Free Vue Component Generator is cross-platform and runs anywhere OpenClaw / Claude Code is available (cross-platform).

Who created Free Vue Component Generator?

It is built and maintained by dsewell-583h0 (@dsewell-583h0); the current version is v1.0.0.

💬 Comments