#601

Global Rank · of 601 Skills

material-component-doc AI Agent Skill

View Source: bytedance/flowgram.ai

Critical

Installation

npx skills add bytedance/flowgram.ai --skill material-component-doc

13

Installs

Image

License @flowgram.ai/editor Ask DeepWiki juejin

FlowGram|Workflow development framework

English | 中文 | Español | Русский | Português | Deutsch | 日本語

FlowGram is a composable, visual, easy-to-integrate, and extensible workflow development framework & toolkit.
Our goal is to help developers build AI workflow platforms faster and simpler.
FlowGram comes with a suite of built-in tools for workflow development: flow canvas, node configuration form, variable scope chain, and ready-to-use materials (LLM, Condition, Code Editor etc). It’s not a ready-made workflow platform; it’s the framework and toolkit to build yours.

Learn more at FlowGram.AI 🌐

🎬 Demo

https://github.com/user-attachments/assets/fee87890-ceec-4c07-b659-08afc4dedc26

Open in CodeSandbox 🌐 or StackBlitz 🌐

In this demo, we iterate through a list of cities, fetch real-time weather via HTTP, parse temperatures with a Code node, generate outfit suggestions with an LLM, gate by a Condition, aggregate results across the loop, and finally use an Advisor LLM to pick the most comfortable city before sending the result to the End node.

🚀 Quick Start

  1. Create a new FlowGram project:
npx @flowgram.ai/create-app@latest

We recommend choosing the Free Layout Demo ⭐️ template.

  1. Start the project:
cd demo-free-layout
npm install
npm start
  1. Open http://localhost:3000 in your browser.

✨ Features

Feature Description Demo
Free Layout Canvas Free layout canvas where nodes can be placed anywhere and connected using free-form lines. Free Layout Demo
Fixed Layout Canvas Fixed layout canvas where nodes can be dragged to specified positions, with support for compound nodes like branches and loops. Fixed Layout Demo
Form The form engine manages the CRUD operations of node data and provides rendering, validation, side effects, linkage, and error-capturing capabilities, simplifying the development of node configurations. Form
Variable The variable engine supports scope constraints, variable structure inspection, and type inference, making it easy to manage data flow within the workflow. Variable

📖 Documentation

You can find the FlowGram documentation on the website.

The documentation is divided into several sections:

🙌 Contributors

FlowGram.AI Contributors

🌍 Adoption

  • Coze Studio is an all-in-one AI agent development tool. Providing the latest large models and tools, various development modes and frameworks, Coze Studio offers the most convenient AI agent development environment, from development to deployment.
  • NNDeploy is a workflow-based multi-platform ai deployment tool.
  • Certimate is an open-source SSL certificate management tool that helps you automatically apply for and deploy SSL certificates with a visual workflow. It is one of the ACME client options listed in the official documentation of Let's Encrypt.

📬 Contact us

Installs

Installs 13
Global Rank #601 of 601

Security Audit

ath High
socket Safe
Alerts: 0
snyk Low
EU EU-Hosted Inference API

Power your AI Agents with the best open-source models.

Drop-in OpenAI-compatible API. No data leaves Europe.

Explore Inference API

GLM

GLM 5

$1.00 / $3.20

per M tokens

Kimi

Kimi K2.5

$0.60 / $2.80

per M tokens

MiniMax

MiniMax M2.5

$0.30 / $1.20

per M tokens

Qwen

Qwen3.5 122B

$0.40 / $3.00

per M tokens

How to use this skill

1

Install material-component-doc by running npx skills add bytedance/flowgram.ai --skill material-component-doc in your project directory. Run the install command above in your project directory. The skill file will be downloaded from GitHub and placed in your project.

2

No configuration needed. Your AI agent (Claude Code, Cursor, Windsurf, etc.) automatically detects installed skills and uses them as context when generating code.

3

The skill enhances your agent's understanding of material-component-doc, helping it follow established patterns, avoid common mistakes, and produce production-ready output.

What you get

Skills are plain-text instruction files — not executable code. They encode expert knowledge about frameworks, languages, or tools that your AI agent reads to improve its output. This means zero runtime overhead, no dependency conflicts, and full transparency: you can read and review every instruction before installing.

Compatibility

This skill works with any AI coding agent that supports the skills.sh format, including Claude Code (Anthropic), Cursor, Windsurf, Cline, Aider, and other tools that read project-level context files. Skills are framework-agnostic at the transport level — the content inside determines which language or framework it applies to.

Data sourced from the skills.sh registry and GitHub. Install counts and security audits are updated regularly.

EU Made in Europe

Chat with 100+ AI Models in one App.

Use Claude, ChatGPT, Gemini alongside with EU-Hosted Models like Deepseek, GLM-5, Kimi K2.5 and many more.

Customer Support