adk-ui 0.8.0

Dynamic UI generation for ADK-Rust agents - render forms, cards, tables, charts and more
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125

use serde_json::{Value, json};

use super::spec::KitSpec;

#[derive(Debug, Clone)]
pub struct KitArtifacts {
    pub catalog: Value,
    pub tokens: Value,
    pub templates: Value,
    pub theme_css: String,
}

#[derive(Debug, Default)]
pub struct KitGenerator;

impl KitGenerator {
    pub fn new() -> Self {
        Self
    }

    pub fn generate(&self, spec: &KitSpec) -> KitArtifacts {
        let catalog_id = format!(
            "zavora.ai:adk-ui/kit/{}@{}",
            slugify(&spec.name),
            spec.version
        );

        let catalog = json!({
            "$schema": "https://json-schema.org/draft/2020-12/schema",
            "$id": catalog_id,
            "title": format!("ADK-UI Kit: {}", spec.name),
            "description": format!("Generated UI kit for {}", spec.name),
            "catalogId": catalog_id,
            "components": {},
            "theme": {
                "primaryColor": spec.colors.primary,
                "agentDisplayName": spec.name
            }
        });

        let tokens = json!({
            "colors": {
                "primary": spec.colors.primary,
                "accent": spec.colors.accent,
                "surface": spec.colors.surface,
                "background": spec.colors.background,
                "text": spec.colors.text
            },
            "typography": {
                "family": spec.typography.family,
                "scale": spec.typography.scale
            },
            "density": format!("{:?}", spec.density).to_lowercase(),
            "radius": format!("{:?}", spec.radius).to_lowercase()
        });

        let templates = json!({
            "templates": spec.templates
        });

        let theme_css = format!(
            ":root {{\n  --adk-primary: {};\n  --adk-font-family: \"{}\";\n}}\n",
            spec.colors.primary, spec.typography.family
        );

        KitArtifacts {
            catalog,
            tokens,
            templates,
            theme_css,
        }
    }
}

fn slugify(input: &str) -> String {
    let mut out = String::new();
    for ch in input.chars() {
        if ch.is_ascii_alphanumeric() {
            out.push(ch.to_ascii_lowercase());
        } else if (ch.is_whitespace() || ch == '-' || ch == '_') && !out.ends_with('-') {
            out.push('-');
        }
    }
    out.trim_matches('-').to_string()
}

#[cfg(test)]
mod tests {
    use super::*;
    use crate::kit::spec::{KitBrand, KitColors, KitSpec, KitTypography};

    #[test]
    fn generates_catalog_with_expected_id() {
        let spec = KitSpec {
            name: "Fintech Pro".to_string(),
            version: "0.1.0".to_string(),
            brand: KitBrand {
                vibe: "trustworthy".to_string(),
                industry: None,
            },
            colors: KitColors {
                primary: "#2F6BFF".to_string(),
                accent: None,
                surface: None,
                background: None,
                text: None,
            },
            typography: KitTypography {
                family: "Source Sans 3".to_string(),
                scale: None,
            },
            density: Default::default(),
            radius: Default::default(),
            components: Default::default(),
            templates: vec!["auth_login".to_string()],
        };

        let artifacts = KitGenerator::new().generate(&spec);
        assert_eq!(
            artifacts.catalog["catalogId"],
            "zavora.ai:adk-ui/kit/fintech-pro@0.1.0"
        );
        assert!(artifacts.tokens["colors"]["primary"].is_string());
    }
}