Skill

frontend-design

frontend-design — a Claude Code skill from langconfig/langconfig

Features

✓Visual workflow builder for LangGraph
✓Custom agent configurations with AI assistance
✓Interactive chat testing for real-time agent behavior
✓Integrate RAG knowledge base for semantic search
✓Support for multiple AI models and integration patterns
✓Node-level caching for efficient execution
✓Export workflows as JSON or Python packages
✓Visit [langconfig/langconfig](https://github.com/langconfig/langconfig) for more

1. Clone Repository

bash

git clone https://github.com/langconfig/langconfig.git
cd langconfig

2. Install Frontend Dependencies

bash

npm install

3. Run Backend Setup Script

bash

python backend/scripts/setup.py

This automated script will:

Check Python 3.11+ and Docker prerequisites

Create .env from .env.example

Install backend Python dependencies

Start PostgreSQL via Docker

Initialize the database and seed agent templates

4. Add Your API Keys

Edit .env and add your API keys:

env

OPENAI_API_KEY=sk-...
ANTHROPIC_API_KEY=sk-ant-...
GOOGLE_API_KEY=AIza...

---