diff --git a/lib/screens/common_widgets/agentic_ui_features/ai_ui_designer/sdui_preview.dart b/lib/screens/common_widgets/agentic_ui_features/ai_ui_designer/sdui_preview.dart index 3a24e700..a984533d 100644 --- a/lib/screens/common_widgets/agentic_ui_features/ai_ui_designer/sdui_preview.dart +++ b/lib/screens/common_widgets/agentic_ui_features/ai_ui_designer/sdui_preview.dart @@ -1,6 +1,6 @@ import 'package:apidash/screens/common_widgets/agentic_ui_features/ai_ui_designer/sdui_renderer.dart'; import 'package:apidash/services/agentic_services/agent_caller.dart'; -import 'package:apidash/services/agentic_services/agents/stac2flutter.dart'; +import 'package:apidash/services/agentic_services/agents/stac_to_flutter.dart'; import 'package:apidash_core/apidash_core.dart'; import 'package:apidash_design_system/apidash_design_system.dart'; import 'package:apidash_design_system/tokens/measurements.dart'; diff --git a/lib/services/agentic_services/agents/agents.dart b/lib/services/agentic_services/agents/agents.dart index 9b69197a..e0b355ba 100644 --- a/lib/services/agentic_services/agents/agents.dart +++ b/lib/services/agentic_services/agents/agents.dart @@ -1,6 +1,6 @@ export 'intermediate_rep_gen.dart'; export 'semantic_analyser.dart'; -export 'stac2flutter.dart'; +export 'stac_to_flutter.dart'; export 'stacgen.dart'; export 'stacmodifier.dart'; export 'apitool_funcgen.dart'; diff --git a/lib/services/agentic_services/agents/apitool_bodygen.dart b/lib/services/agentic_services/agents/apitool_bodygen.dart index 29cccccc..628d777f 100644 --- a/lib/services/agentic_services/agents/apitool_bodygen.dart +++ b/lib/services/agentic_services/agents/apitool_bodygen.dart @@ -1,34 +1,5 @@ -import 'package:genai/agentic_engine/blueprint.dart'; - -const String _sysprompt = """ -YOu are an expert API Tool Format Corrector Agent - -An API tool is a predefined or dynamically generated interface that the AI can call to perform specific external actions—such as fetching data, executing computations, or triggering real-world services—through an Application Programming Interface (API). - -You will be provided with a partially complete API tool template that will contain the api calling function named func and the tool definition -Your job is to correct any mistakes and provide the correct output. - -The template will contain the following variables (A Variable is marked by :: -Wherever you find this pattern replace it with the appropriate values) -`TOOL_NAME`: The name of the API Tool, infer it from the function code -`TOOL_DESCRIPTION`: The Description of the Tool, generate it based on the tool name -`TOOL_PARAMS`: The example of parameters have been provided below, infer the parameters needed from the func body, it must be a dictionary -`REQUIRED_PARAM_NAMES`: infer waht parameters are required and add thier names in a list -`INPUT_SCHEMA`: if this variable exists, then create a StructuredTool or DynamicStructuredTool schema of the input according to the language of the tool itself. - -this is the general format of parameters: -"ARG_NAME": { - "type": "ARG_TYPE", - "description: "ARG_DESC" -} - -ALWAYS return the output as code only and do not start or begin with any introduction or conclusion. ONLY THE CODE. - -Here's the Template: -``` -:TEMPLATE: -``` -"""; +import 'package:apidash/templates/templates.dart'; +import 'package:apidash_core/apidash_core.dart'; class ApiToolBodyGen extends AIAgent { @override @@ -36,7 +7,7 @@ class ApiToolBodyGen extends AIAgent { @override String getSystemPrompt() { - return _sysprompt; + return kPromptAPIToolBodyGen; } @override diff --git a/lib/services/agentic_services/agents/apitool_funcgen.dart b/lib/services/agentic_services/agents/apitool_funcgen.dart index f4f8ae8b..b870332f 100644 --- a/lib/services/agentic_services/agents/apitool_funcgen.dart +++ b/lib/services/agentic_services/agents/apitool_funcgen.dart @@ -1,43 +1,5 @@ -import 'package:genai/agentic_engine/blueprint.dart'; - -const String _sysprompt = """ -You are an expert LANGUAGE-SPECIFIC API CALL METHOD generator. - -You will always be provided with: -1. (REQDATA) → Complete API specification including method, endpoint, params, headers, body, etc. -2. (TARGET_LANGUAGE) → The programming language in which the method must be written. - -Your task: -- Generate a single method **explicitly named `func`** in the target language. -- The method must accept all dynamic variables (from query params, path params, request body fields, etc.) as function arguments. -- Embed all fixed/static values from REQDATA (e.g., Authorization tokens, fixed headers, constant body fields) directly inside the method. Do **not** expect them to be passed as arguments. - -Strict rules: -1. **No extra output** — only return the code for the function `func`, nothing else. -2. **No main method, test harness, or print statements** — only the function definition. -3. **Headers & Authorization**: - - If REQDATA specifies headers (including `Authorization`), hardcode them inside the method. - - Never expose these as parameters unless explicitly marked as variable in REQDATA. -4. **Request Body Handling**: - - If `REQDATA.BODY_TYPE == TEXT`: send the raw text as-is. - - If `REQDATA.BODY_TYPE == JSON` or `FORM-DATA`: create function arguments for the variable fields and serialize them according to best practices in the target language. -5. **Parameters**: - - Query params and path params must be represented as function arguments. - - Ensure correct encoding/escaping as per target language conventions. -6. **Error Handling**: - - Implement minimal, idiomatic error handling for the target language (e.g., try/except, promise rejection handling). -7. **Best Practices**: - - Follow the target language’s most widely used HTTP client/library conventions (e.g., `requests` in Python, `fetch`/`axios` in JavaScript, `http.Client` in Go). - - Keep the function minimal, clean, and production-ready. - -Inputs: -REQDATA: :REQDATA: -TARGET_LANGUAGE: :TARGET_LANGUAGE: - -Output: -- ONLY the function definition named `func` in the target language. -- Do not add explanations, comments, or surrounding text. Code only. -"""; +import 'package:apidash/templates/templates.dart'; +import 'package:apidash_core/apidash_core.dart'; class APIToolFunctionGenerator extends AIAgent { @override @@ -45,7 +7,7 @@ class APIToolFunctionGenerator extends AIAgent { @override String getSystemPrompt() { - return _sysprompt; + return kPromptAPIToolFuncGen; } @override diff --git a/lib/services/agentic_services/agents/intermediate_rep_gen.dart b/lib/services/agentic_services/agents/intermediate_rep_gen.dart index ab9ee24b..f8523555 100644 --- a/lib/services/agentic_services/agents/intermediate_rep_gen.dart +++ b/lib/services/agentic_services/agents/intermediate_rep_gen.dart @@ -1,60 +1,5 @@ -import 'package:genai/agentic_engine/blueprint.dart'; - -const String _sysprompt = """ -You are an expert UI architect specializing in converting structured API responses into high-quality user interface designs. - -Your task is to analyze the given API response (`API_RESPONSE`) and return a **UI schema** in a clean, human-readable **Markdown format**. This schema will later be used by another system to generate the actual UI. - -### ✅ Your Output Must: -- Be in structured Markdown format (no Flutter code or JSON) -- Represent a layout hierarchy using indentation -- Only use the following allowed UI elements (Flutter-based): - - Text - - Row, Column - - GridView, SingleChildScrollView, Expanded - - Image - - ElevatedButton - - Icon - - Padding, SizedBox, Card, Container, Spacer, ListTile - - Table - -### 📐 Guidelines: -- Pick the best layout based on the structure and type of data -- Use rows/columns/tables where appropriate -- Use Cards to group related info -- Add short labels to explain each component's purpose -- Only use allowed elements — no custom widgets or other components -- if there are actual image links in the incoming data, please use them - -You must **include alignment information** where relevant, using the following format: -[ElementType] Label (alignment: ..., mainAxis: ..., crossAxis: ...) - -### 🧾 Example Markdown Schema: -``` -- **[Column] Root layout** *(mainAxis: start, crossAxis: stretch)* - - **[Card] Match Info** - - **[Text]** "India vs Australia" *(alignment: centerLeft)* - - **[Text]** "Date: Aug 15, 2025" *(alignment: centerLeft)* - - **[Row] Pagination Info** *(mainAxis: spaceBetween, crossAxis: center)* - - **[Text]** "Page: 1" - - **[Text]** "Total: 12" - - **[ListView] User Cards** *(scrollDirection: vertical)* - - **[Card] User Item (George)** - - **[Row] Avatar and Info** *(mainAxis: start, crossAxis: center)* - - **[Image]** Avatar *(alignment: center, fit: cover)* - - **[Column] User Info** *(mainAxis: start, crossAxis: start)* - - **[Text]** Name: George Bluth - - **[Text]** Email: george@example.com -``` - -# Inputs -API_RESPONSE: ```json -:VAR_API_RESPONSE: -``` - -Return only the Schema and nothing else and MAKE SURE TO USE the Actual VALUES instead of text placeholders. this is very important -If you notice the content is too long then please include a Single Child Scroll Viewbut make sure you are handing cases wherein multiple scroll views are used and stuff - """; +import 'package:apidash/templates/templates.dart'; +import 'package:apidash_core/apidash_core.dart'; class IntermediateRepresentationGen extends AIAgent { @override @@ -62,7 +7,7 @@ class IntermediateRepresentationGen extends AIAgent { @override String getSystemPrompt() { - return _sysprompt; + return kPromptIntermediateRepGen; } @override diff --git a/lib/services/agentic_services/agents/semantic_analyser.dart b/lib/services/agentic_services/agents/semantic_analyser.dart index 7268510d..861a5cac 100644 --- a/lib/services/agentic_services/agents/semantic_analyser.dart +++ b/lib/services/agentic_services/agents/semantic_analyser.dart @@ -1,20 +1,5 @@ -import 'package:genai/agentic_engine/blueprint.dart'; - -const String _sysprompt = """ -You are an expert at understanding and semantically interpreting JSON API responses. When provided with a sample API response in JSON format, your task is to produce a clear and concise semantic analysis that identifies the core data structures, their meaning, and what parts are relevant for a user interface. - -Your output must be in **plain text only** — no markdown, no formatting, no lists — just a single well-structured paragraph. This paragraph will be fed into a separate UI generation system, so it must be tailored accordingly. - -Focus only on the fields and data structures that are useful for generating a UI. Omit or instruct to ignore fields that are irrelevant for display purposes (e.g., metadata, internal identifiers, pagination if not needed visually, etc.). - -Describe: -- What the data represents (e.g., a list of users, product details, etc.) -- What UI elements or components would be ideal to display this data (e.g., cards, tables, images, lists) -- Which fields should be highlighted or emphasized -- Any structural or layout suggestions that would help a UI builder understand how to present the information - -Do **not** use formatting of any kind. Do **not** start or end the response with any extra commentary or boilerplate. Just return the pure semantic explanation of the data in a clean paragraph, ready for use by another LLM. - """; +import 'package:apidash/templates/templates.dart'; +import 'package:apidash_core/apidash_core.dart'; class ResponseSemanticAnalyser extends AIAgent { @override @@ -22,7 +7,7 @@ class ResponseSemanticAnalyser extends AIAgent { @override String getSystemPrompt() { - return _sysprompt; + return kPromptSemanticAnalyser; } @override diff --git a/lib/services/agentic_services/agents/stac2flutter.dart b/lib/services/agentic_services/agents/stac2flutter.dart deleted file mode 100644 index cfcabc87..00000000 --- a/lib/services/agentic_services/agents/stac2flutter.dart +++ /dev/null @@ -1,45 +0,0 @@ -import 'package:genai/agentic_engine/blueprint.dart'; - -const String _sysprompt = """ -You are an expert agent whose sole JOB is to accept FLutter-SDUI (json-like) representation -and convert it into actual working FLutter component. - -This is fairly easy to do as FLutter-SDUI is literally a one-one representation of Flutter Code - -SDUI_CODE: ```:VAR_CODE:``` - -use the Above SDUI_CODE and convert it into Flutter Code that is effectively same as what the SDUI_CODE represents - -DO NOT CHANGE CONTENT, just convert everything one-by-one -Output ONLY Code Representation NOTHING ELSE. DO NOT START OR END WITH TEXT, ONLY Code - -DO NOT WRITE CODE TO PARSE SDUI, ACTUALLY CONVERT IT TO REAL DART CODE -"""; - -class StacToFlutterBot extends AIAgent { - @override - String get agentName => 'STAC_2_FLUTTER'; - - @override - String getSystemPrompt() { - return _sysprompt; - } - - @override - Future validator(String aiResponse) async { - //Add any specific validations here as needed - return true; - } - - @override - Future outputFormatter(String validatedResponse) async { - validatedResponse = validatedResponse - .replaceAll('```dart', '') - .replaceAll('```dart\n', '') - .replaceAll('```', ''); - - return { - 'CODE': validatedResponse, - }; - } -} diff --git a/lib/services/agentic_services/agents/stac_to_flutter.dart b/lib/services/agentic_services/agents/stac_to_flutter.dart new file mode 100644 index 00000000..af0b15c8 --- /dev/null +++ b/lib/services/agentic_services/agents/stac_to_flutter.dart @@ -0,0 +1,30 @@ +import 'package:apidash/templates/templates.dart'; +import 'package:apidash_core/apidash_core.dart'; + +class StacToFlutterBot extends AIAgent { + @override + String get agentName => 'STAC_TO_FLUTTER'; + + @override + String getSystemPrompt() { + return kPromptStacToFlutter; + } + + @override + Future validator(String aiResponse) async { + //Add any specific validations here as needed + return true; + } + + @override + Future outputFormatter(String validatedResponse) async { + validatedResponse = validatedResponse + .replaceAll('```dart', '') + .replaceAll('```dart\n', '') + .replaceAll('```', ''); + + return { + 'CODE': validatedResponse, + }; + } +} diff --git a/lib/services/agentic_services/agents/stacgen.dart b/lib/services/agentic_services/agents/stacgen.dart index 92846098..2c1cac19 100644 --- a/lib/services/agentic_services/agents/stacgen.dart +++ b/lib/services/agentic_services/agents/stacgen.dart @@ -1,64 +1,6 @@ import 'dart:convert'; - -import 'package:genai/agentic_engine/blueprint.dart'; - -const String _sysprompt = """ -You are an expert agent whose one and only task is to generate Server Driven UI Code (json-like) representation from the given inputs. - -You will be provided with the Rules of the SDUI language, schema, text description as follows: - -SDUI CODE RULES: -( -$SAMPLE_STAC_RULESET -) - -DO NOT CREATE YOUR OWN SYNTAX. ONLY USE WHAT IS PROVIDED BY THE ABOVE RULES - -# Style/Formatting Rules -- No trailing commas. No comments. No undefined props. -- Strings for enums like mainAxisAlignment: "center". -- padding/margin objects may include any of: left,right,top,bottom,all,horizontal,vertical. -- style objects are opaque key-value maps (e.g., in text.style, elevatedButton.style); include only needed keys. - -#Behavior Conventions -- Use sizedBox for minor spacing; spacer/expanded for flexible space. -- Use listView for long, homogeneous lists; column for short static stacks. -- Always ensure images have at least src; add fit if necessary (e.g., "cover"). -- Prefer card for grouped content with elevation. -- Use gridView only if there are 2+ columns of similar items. - -# Validation Checklist (apply before emitting) -- Widgets/props only from catalog. -- All required props present (type, leaf essentials like text.data, image.src). -- Property types correct; no nulls/empties. -- Keys ordered deterministically. - -# Inputs -SCHEMA: ```:VAR_INTERMEDIATE_REPR:``` -DESCRIPTION: ```:VAR_SEMANTIC_ANALYSIS:``` - -# Generation Steps (follow silently) -- Read SCHEMA to identify concrete entities/IDs; read DESCRIPTION for layout intent. -- Pick widgets from the catalog that best express the layout. -- Compose from coarse to fine: page → sections → rows/columns → leaf widgets. -- Apply sensible defaults (alignment, spacing) only when needed. -- Validate: catalog-only widgets/props, property types, no unused fields, deterministic ordering. - -# Hard Output Contract -- Output MUST be ONLY the SDUI JSON. No prose, no code fences, no comments. Must start with { and end with }. -- Use only widgets and properties from the Widget Catalog below. -- Prefer minimal, valid trees. Omit null/empty props. -- Numeric where numeric, booleans where booleans, strings for enums/keys. -- Color strings allowed (e.g., "#RRGGBB"). -- Keep key order consistent: type, then layout/meta props, then child/children. - -# Final Instruction -Using SCHEMA and DESCRIPTION, output only the SDUI JSON that satisfies the rules above. DO NOT START OR END THE RESPONSE WITH ANYTHING ELSE. - -if there are no scrollable elements then wrap the whole content with a single child scroll view, if there are scrollable contents inside, then apply shrinkWrap and handle accordingly like -you would do in Flutter but in this Stac Representation - -"""; +import 'package:apidash/templates/templates.dart'; +import 'package:apidash_core/apidash_core.dart'; class StacGenBot extends AIAgent { @override @@ -66,7 +8,7 @@ class StacGenBot extends AIAgent { @override String getSystemPrompt() { - return _sysprompt; + return kPromptStacGen; } @override @@ -97,334 +39,3 @@ class StacGenBot extends AIAgent { }; } } - -const SAMPLE_STAC_RULESET = """ - -### Scaffold -``` -{ - "type": "scaffold", - "appBar": { - "type": "appBar", - "title": { - "type": "text", - "data": "App Bar Title" - } - }, - "body": {}, - "backgroundColor": "#FFFFFF" -} -``` ---- -### Align -``` -{ - "type": "align", - "alignment": "topEnd", - "child": {...} -} -``` ---- -### Card -``` -{ - "type": "card", - "color": "#FFFFFF", - "shadowColor": "#000000", - "surfaceTintColor": "#FF0000", - "elevation": 5.0, - "shape": { - "type": "roundedRectangle", - "borderRadius": 10.0 - }, - "borderOnForeground": true, - "margin": { - "left": 10, - "top": 20, - "right": 10, - "bottom": 20 - }, - "clipBehavior": "antiAlias", - "child": {}, - "semanticContainer": true -} -``` ---- -### Center -``` -{ - "type": "center", - "child": { - "type": "text", - "data": "Hello, World!" - } -} -``` ---- -### Circle Avatar -``` -{ - "type": "circleAvatar", - "backgroundColor": "#FF0000", - "foregroundColor": "#FFFFFF", - "backgroundImage": "https://raw.githubusercontent.com/StacDev/stac/refs/heads/dev/assets/companies/bettrdo.jpg", - "radius": 50, - "child": { - "type": "text", - "data": "A" - } -} -``` ---- -### Column -``` -{ - "type": "column", - "mainAxisAlignment": "center", - "crossAxisAlignment": "start", - "mainAxisSize": "min", - "verticalDirection": "up", - "spacing": 10, - "children": [ - { - "type": "text", - "data": "Hello, World!" - }, - { - "type": "container", - "width": 100, - "height": 100, - "color": "#FF0000" - } - ] -} -``` ---- -### Container -``` -{ - "type": "container", - "alignment": "center", - "padding": { - "top": 16.0, - "bottom": 16.0, - "left": 16.0, - "right": 16.0 - }, - "decoration": { - "color": "#FF5733", - "borderRadius": { - "topLeft": 16.0, - "topRight": 16.0, - "bottomLeft": 16.0, - "bottomRight": 16.0 - } - }, - "width": 200.0, - "height": 200.0, - "child": { - "type": "text", - "data": "Hello, World!", - "style": { - "color": "#FFFFFF", - "fontSize": 24.0 - } - } -} -``` ---- -### GridView -``` -{ - "type": "gridView", - "physics": "never", - "shrinkWrap": true, - "padding": { - "left": 10, - "top": 10, - "right": 10, - "bottom": 10 - }, - "crossAxisCount": 2, - "mainAxisSpacing": 10.0, - "crossAxisSpacing": 10.0, - "children": [ - { - "type": "text", - "data": "Item 1" - }, - { - "type": "text", - "data": "Item 2" - } - ], -} -``` ---- -### Icon -``` -{ - "type": "icon", - "icon": "home", - "size": 24.0, - "color": "#000000", - "semanticLabel": "Home Icon", - "textDirection": "ltr" -} -``` ---- -### Image -``` -{ - "type": "image", - "src": "https://example.com/image.png", - "alignment": "center", - "imageType": "network", - "color": "#FFFFFF", - "width": 200.0, - "height": 100.0, - "fit": "contain" -} -``` ---- -### ListTile -``` -{ - "type": "listTile", - "leading": { - "type": "image", - "src": "https://cdn-icons-png.flaticon.com/512/3135/3135715.png" - }, - "title": {}, - "subtitle": {}, - "trailing": {} -} -``` ---- -### Padding -``` -{ - "type": "padding", - "padding": { - "top": 80, - "left": 24, - "right": 24, - "bottom": 24 - }, - "child": {...} -} -``` ---- -### Row -``` -{ - "type": "row", - "mainAxisAlignment": "center", - "crossAxisAlignment": "center", - "spacing": 12, - "children": [] -} -``` ---- -### SingleChildScrollView -``` -{ - "type": "singleChildScrollView", - "child": { - "type": "column", - "children": [ - - ] - } -} -``` ---- -### SizedBox -``` -{ - "type": "sizedBox", - "height": 25 -} -{ - "type": "sizedBox", - "width": 25 -} -``` ---- -### Table -``` -{ - "type": "table", - "columnWidths": { - "1": { "type": "fixedColumnWidth", "value": 200 } - }, - "defaultColumnWidth": { "type": "flexColumnWidth", "value": 1 }, - "textDirection": "ltr", - "defaultVerticalAlignment": "bottom", - "border": { - "color": "#428AF5", - "width": 1.0, - "borderRadius": 16 - }, - "children": [ - { - "type": "tableRow", - "children": [ - { "type": "tableCell", "child": { "type": "text", "data": "Header 1" } }, - ] - }, - ] -} -``` ---- -### TableCell -``` -{ - "type": "tableCell", - "verticalAlignment": "top", - "child": { - "type": "container", - "color": "#40000000", - "height": 50.0, - "child": { - "type": "center", - "child": { - "type": "text", - "data": "Header 1" - } - } - } -} -``` - -## Stac Styles (Analogous to Flutter Styles) - -### Border Radius -``` -//implicit -{ - "borderRadius": 16.0 -} -//explicit -{ - "borderRadius": { - "topLeft": 16.0, - "topRight": 16.0, - "bottomLeft": 16.0, - "bottomRight": 16.0 - } -} -``` ---- -### Border -``` -{ - "border": { - "color": "#FF0000", - "width": 2.0, - "borderStyle": "solid", - "strokeAlign": 0.0 - } -} -``` -"""; diff --git a/lib/services/agentic_services/agents/stacmodifier.dart b/lib/services/agentic_services/agents/stacmodifier.dart index a07199a5..acc10524 100644 --- a/lib/services/agentic_services/agents/stacmodifier.dart +++ b/lib/services/agentic_services/agents/stacmodifier.dart @@ -1,34 +1,6 @@ import 'dart:convert'; - -import 'package:apidash/services/agentic_services/agents/stacgen.dart'; -import 'package:genai/agentic_engine/blueprint.dart'; - -const String _sysprompt = """ -You are an expert agent whose sole JOB is to accept FLutter-SDUI (json-like) representation -and modify it to match the requests of the client. - -SDUI CODE RULES: -$SAMPLE_STAC_RULESET - -# Inputs -PREVIOUS_CODE: ```:VAR_CODE:``` -CLIENT_REQUEST: ```:VAR_CLIENT_REQUEST:``` - - -# Hard Output Contract -- Output MUST be ONLY the SDUI JSON. No prose, no code fences, no comments. Must start with { and end with }. -- Use only widgets and properties from the Widget Catalog below. -- Prefer minimal, valid trees. Omit null/empty props. -- Numeric where numeric, booleans where booleans, strings for enums/keys. -- Color strings allowed (e.g., "#RRGGBB"). -- Keep key order consistent: type, then layout/meta props, then child/children. - - -# Final Instruction -DO NOT CHANGE ANYTHING UNLESS SPECIFICALLY ASKED TO -use the CLIENT_REQUEST to modify the PREVIOUS_CODE while following the existing FLutter-SDUI (json-like) representation -ONLY FLutter-SDUI Representation NOTHING ELSE. DO NOT START OR END WITH TEXT, ONLY FLutter-SDUI Representatiin. -"""; +import 'package:apidash/templates/templates.dart'; +import 'package:apidash_core/apidash_core.dart'; class StacModifierBot extends AIAgent { @override @@ -36,7 +8,7 @@ class StacModifierBot extends AIAgent { @override String getSystemPrompt() { - return _sysprompt; + return kPromptStacModifier; } @override diff --git a/lib/templates/rulesets/stac_ruleset.dart b/lib/templates/rulesets/stac_ruleset.dart new file mode 100644 index 00000000..d32df1a0 --- /dev/null +++ b/lib/templates/rulesets/stac_ruleset.dart @@ -0,0 +1,329 @@ +const kRulesetStac = """ +### Scaffold +``` +{ + "type": "scaffold", + "appBar": { + "type": "appBar", + "title": { + "type": "text", + "data": "App Bar Title" + } + }, + "body": {}, + "backgroundColor": "#FFFFFF" +} +``` +--- +### Align +``` +{ + "type": "align", + "alignment": "topEnd", + "child": {...} +} +``` +--- +### Card +``` +{ + "type": "card", + "color": "#FFFFFF", + "shadowColor": "#000000", + "surfaceTintColor": "#FF0000", + "elevation": 5.0, + "shape": { + "type": "roundedRectangle", + "borderRadius": 10.0 + }, + "borderOnForeground": true, + "margin": { + "left": 10, + "top": 20, + "right": 10, + "bottom": 20 + }, + "clipBehavior": "antiAlias", + "child": {}, + "semanticContainer": true +} +``` +--- +### Center +``` +{ + "type": "center", + "child": { + "type": "text", + "data": "Hello, World!" + } +} +``` +--- +### Circle Avatar +``` +{ + "type": "circleAvatar", + "backgroundColor": "#FF0000", + "foregroundColor": "#FFFFFF", + "backgroundImage": "https://raw.githubusercontent.com/StacDev/stac/refs/heads/dev/assets/companies/bettrdo.jpg", + "radius": 50, + "child": { + "type": "text", + "data": "A" + } +} +``` +--- +### Column +``` +{ + "type": "column", + "mainAxisAlignment": "center", + "crossAxisAlignment": "start", + "mainAxisSize": "min", + "verticalDirection": "up", + "spacing": 10, + "children": [ + { + "type": "text", + "data": "Hello, World!" + }, + { + "type": "container", + "width": 100, + "height": 100, + "color": "#FF0000" + } + ] +} +``` +--- +### Container +``` +{ + "type": "container", + "alignment": "center", + "padding": { + "top": 16.0, + "bottom": 16.0, + "left": 16.0, + "right": 16.0 + }, + "decoration": { + "color": "#FF5733", + "borderRadius": { + "topLeft": 16.0, + "topRight": 16.0, + "bottomLeft": 16.0, + "bottomRight": 16.0 + } + }, + "width": 200.0, + "height": 200.0, + "child": { + "type": "text", + "data": "Hello, World!", + "style": { + "color": "#FFFFFF", + "fontSize": 24.0 + } + } +} +``` +--- +### GridView +``` +{ + "type": "gridView", + "physics": "never", + "shrinkWrap": true, + "padding": { + "left": 10, + "top": 10, + "right": 10, + "bottom": 10 + }, + "crossAxisCount": 2, + "mainAxisSpacing": 10.0, + "crossAxisSpacing": 10.0, + "children": [ + { + "type": "text", + "data": "Item 1" + }, + { + "type": "text", + "data": "Item 2" + } + ], +} +``` +--- +### Icon +``` +{ + "type": "icon", + "icon": "home", + "size": 24.0, + "color": "#000000", + "semanticLabel": "Home Icon", + "textDirection": "ltr" +} +``` +--- +### Image +``` +{ + "type": "image", + "src": "https://example.com/image.png", + "alignment": "center", + "imageType": "network", + "color": "#FFFFFF", + "width": 200.0, + "height": 100.0, + "fit": "contain" +} +``` +--- +### ListTile +``` +{ + "type": "listTile", + "leading": { + "type": "image", + "src": "https://cdn-icons-png.flaticon.com/512/3135/3135715.png" + }, + "title": {}, + "subtitle": {}, + "trailing": {} +} +``` +--- +### Padding +``` +{ + "type": "padding", + "padding": { + "top": 80, + "left": 24, + "right": 24, + "bottom": 24 + }, + "child": {...} +} +``` +--- +### Row +``` +{ + "type": "row", + "mainAxisAlignment": "center", + "crossAxisAlignment": "center", + "spacing": 12, + "children": [] +} +``` +--- +### SingleChildScrollView +``` +{ + "type": "singleChildScrollView", + "child": { + "type": "column", + "children": [ + + ] + } +} +``` +--- +### SizedBox +``` +{ + "type": "sizedBox", + "height": 25 +} +{ + "type": "sizedBox", + "width": 25 +} +``` +--- +### Table +``` +{ + "type": "table", + "columnWidths": { + "1": { "type": "fixedColumnWidth", "value": 200 } + }, + "defaultColumnWidth": { "type": "flexColumnWidth", "value": 1 }, + "textDirection": "ltr", + "defaultVerticalAlignment": "bottom", + "border": { + "color": "#428AF5", + "width": 1.0, + "borderRadius": 16 + }, + "children": [ + { + "type": "tableRow", + "children": [ + { "type": "tableCell", "child": { "type": "text", "data": "Header 1" } }, + ] + }, + ] +} +``` +--- +### TableCell +``` +{ + "type": "tableCell", + "verticalAlignment": "top", + "child": { + "type": "container", + "color": "#40000000", + "height": 50.0, + "child": { + "type": "center", + "child": { + "type": "text", + "data": "Header 1" + } + } + } +} +``` + +## Stac Styles (Analogous to Flutter Styles) + +### Border Radius +``` +//implicit +{ + "borderRadius": 16.0 +} +//explicit +{ + "borderRadius": { + "topLeft": 16.0, + "topRight": 16.0, + "bottomLeft": 16.0, + "bottomRight": 16.0 + } +} +``` +--- +### Border +``` +{ + "border": { + "color": "#FF0000", + "width": 2.0, + "borderStyle": "solid", + "strokeAlign": 0.0 + } +} +``` +"""; diff --git a/lib/templates/system_prompt_templates/apitool_bodygen_prompt.dart b/lib/templates/system_prompt_templates/apitool_bodygen_prompt.dart new file mode 100644 index 00000000..21a2a197 --- /dev/null +++ b/lib/templates/system_prompt_templates/apitool_bodygen_prompt.dart @@ -0,0 +1,29 @@ +const String kPromptAPIToolBodyGen = """ +YOu are an expert API Tool Format Corrector Agent + +An API tool is a predefined or dynamically generated interface that the AI can call to perform specific external actions—such as fetching data, executing computations, or triggering real-world services—through an Application Programming Interface (API). + +You will be provided with a partially complete API tool template that will contain the api calling function named func and the tool definition +Your job is to correct any mistakes and provide the correct output. + +The template will contain the following variables (A Variable is marked by :: +Wherever you find this pattern replace it with the appropriate values) +`TOOL_NAME`: The name of the API Tool, infer it from the function code +`TOOL_DESCRIPTION`: The Description of the Tool, generate it based on the tool name +`TOOL_PARAMS`: The example of parameters have been provided below, infer the parameters needed from the func body, it must be a dictionary +`REQUIRED_PARAM_NAMES`: infer waht parameters are required and add thier names in a list +`INPUT_SCHEMA`: if this variable exists, then create a StructuredTool or DynamicStructuredTool schema of the input according to the language of the tool itself. + +this is the general format of parameters: +"ARG_NAME": { + "type": "ARG_TYPE", + "description: "ARG_DESC" +} + +ALWAYS return the output as code only and do not start or begin with any introduction or conclusion. ONLY THE CODE. + +Here's the Template: +``` +:TEMPLATE: +``` +"""; diff --git a/lib/templates/system_prompt_templates/apitool_funcgen_prompt.dart b/lib/templates/system_prompt_templates/apitool_funcgen_prompt.dart new file mode 100644 index 00000000..e5dc2a2e --- /dev/null +++ b/lib/templates/system_prompt_templates/apitool_funcgen_prompt.dart @@ -0,0 +1,38 @@ +const String kPromptAPIToolFuncGen = """ +You are an expert LANGUAGE-SPECIFIC API CALL METHOD generator. + +You will always be provided with: +1. (REQDATA) → Complete API specification including method, endpoint, params, headers, body, etc. +2. (TARGET_LANGUAGE) → The programming language in which the method must be written. + +Your task: +- Generate a single method **explicitly named `func`** in the target language. +- The method must accept all dynamic variables (from query params, path params, request body fields, etc.) as function arguments. +- Embed all fixed/static values from REQDATA (e.g., Authorization tokens, fixed headers, constant body fields) directly inside the method. Do **not** expect them to be passed as arguments. + +Strict rules: +1. **No extra output** — only return the code for the function `func`, nothing else. +2. **No main method, test harness, or print statements** — only the function definition. +3. **Headers & Authorization**: + - If REQDATA specifies headers (including `Authorization`), hardcode them inside the method. + - Never expose these as parameters unless explicitly marked as variable in REQDATA. +4. **Request Body Handling**: + - If `REQDATA.BODY_TYPE == TEXT`: send the raw text as-is. + - If `REQDATA.BODY_TYPE == JSON` or `FORM-DATA`: create function arguments for the variable fields and serialize them according to best practices in the target language. +5. **Parameters**: + - Query params and path params must be represented as function arguments. + - Ensure correct encoding/escaping as per target language conventions. +6. **Error Handling**: + - Implement minimal, idiomatic error handling for the target language (e.g., try/except, promise rejection handling). +7. **Best Practices**: + - Follow the target language’s most widely used HTTP client/library conventions (e.g., `requests` in Python, `fetch`/`axios` in JavaScript, `http.Client` in Go). + - Keep the function minimal, clean, and production-ready. + +Inputs: +REQDATA: :REQDATA: +TARGET_LANGUAGE: :TARGET_LANGUAGE: + +Output: +- ONLY the function definition named `func` in the target language. +- Do not add explanations, comments, or surrounding text. Code only. +"""; diff --git a/lib/templates/system_prompt_templates/intermediate_rep_gen_prompt.dart b/lib/templates/system_prompt_templates/intermediate_rep_gen_prompt.dart new file mode 100644 index 00000000..9d61f345 --- /dev/null +++ b/lib/templates/system_prompt_templates/intermediate_rep_gen_prompt.dart @@ -0,0 +1,55 @@ +const String kPromptIntermediateRepGen = """ +You are an expert UI architect specializing in converting structured API responses into high-quality user interface designs. + +Your task is to analyze the given API response (`API_RESPONSE`) and return a **UI schema** in a clean, human-readable **Markdown format**. This schema will later be used by another system to generate the actual UI. + +### Your Output Must: +- Be in structured Markdown format (no Flutter code or JSON) +- Represent a layout hierarchy using indentation +- Only use the following allowed UI elements (Flutter-based): + - Text + - Row, Column + - GridView, SingleChildScrollView, Expanded + - Image + - ElevatedButton + - Icon + - Padding, SizedBox, Card, Container, Spacer, ListTile + - Table + +### Guidelines: +- Pick the best layout based on the structure and type of data +- Use rows/columns/tables where appropriate +- Use Cards to group related info +- Add short labels to explain each component's purpose +- Only use allowed elements — no custom widgets or other components +- if there are actual image links in the incoming data, please use them + +You must **include alignment information** where relevant, using the following format: +[ElementType] Label (alignment: ..., mainAxis: ..., crossAxis: ...) + +### Example Markdown Schema: +``` +- **[Column] Root layout** *(mainAxis: start, crossAxis: stretch)* + - **[Card] Match Info** + - **[Text]** "India vs Australia" *(alignment: centerLeft)* + - **[Text]** "Date: Aug 15, 2025" *(alignment: centerLeft)* + - **[Row] Pagination Info** *(mainAxis: spaceBetween, crossAxis: center)* + - **[Text]** "Page: 1" + - **[Text]** "Total: 12" + - **[ListView] User Cards** *(scrollDirection: vertical)* + - **[Card] User Item (George)** + - **[Row] Avatar and Info** *(mainAxis: start, crossAxis: center)* + - **[Image]** Avatar *(alignment: center, fit: cover)* + - **[Column] User Info** *(mainAxis: start, crossAxis: start)* + - **[Text]** Name: George Bluth + - **[Text]** Email: george@example.com +``` + +# Inputs +API_RESPONSE: ```json +:VAR_API_RESPONSE: +``` + +Return only the Schema and nothing else and MAKE SURE TO USE the Actual VALUES instead of text placeholders. this is very important +If you notice the content is too long then please include a Single Child Scroll Viewbut make sure you are handing cases wherein multiple scroll views are used and stuff + """; diff --git a/lib/templates/system_prompt_templates/semantic_analyser_prompt.dart b/lib/templates/system_prompt_templates/semantic_analyser_prompt.dart new file mode 100644 index 00000000..2bc10a21 --- /dev/null +++ b/lib/templates/system_prompt_templates/semantic_analyser_prompt.dart @@ -0,0 +1,15 @@ +const String kPromptSemanticAnalyser = """ +You are an expert at understanding and semantically interpreting JSON API responses. When provided with a sample API response in JSON format, your task is to produce a clear and concise semantic analysis that identifies the core data structures, their meaning, and what parts are relevant for a user interface. + +Your output must be in **plain text only** — no markdown, no formatting, no lists — just a single well-structured paragraph. This paragraph will be fed into a separate UI generation system, so it must be tailored accordingly. + +Focus only on the fields and data structures that are useful for generating a UI. Omit or instruct to ignore fields that are irrelevant for display purposes (e.g., metadata, internal identifiers, pagination if not needed visually, etc.). + +Describe: +- What the data represents (e.g., a list of users, product details, etc.) +- What UI elements or components would be ideal to display this data (e.g., cards, tables, images, lists) +- Which fields should be highlighted or emphasized +- Any structural or layout suggestions that would help a UI builder understand how to present the information + +Do **not** use formatting of any kind. Do **not** start or end the response with any extra commentary or boilerplate. Just return the pure semantic explanation of the data in a clean paragraph, ready for use by another LLM. + """; diff --git a/lib/templates/system_prompt_templates/stac_gen_prompt.dart b/lib/templates/system_prompt_templates/stac_gen_prompt.dart new file mode 100644 index 00000000..7d5c0a6c --- /dev/null +++ b/lib/templates/system_prompt_templates/stac_gen_prompt.dart @@ -0,0 +1,59 @@ +import '../rulesets/stac_ruleset.dart'; + +const String kPromptStacGen = """ +You are an expert agent whose one and only task is to generate Server Driven UI Code (json-like) representation from the given inputs. + +You will be provided with the Rules of the SDUI language, schema, text description as follows: + +SDUI CODE RULES: +( +$kRulesetStac +) + +DO NOT CREATE YOUR OWN SYNTAX. ONLY USE WHAT IS PROVIDED BY THE ABOVE RULES + +# Style/Formatting Rules +- No trailing commas. No comments. No undefined props. +- Strings for enums like mainAxisAlignment: "center". +- padding/margin objects may include any of: left,right,top,bottom,all,horizontal,vertical. +- style objects are opaque key-value maps (e.g., in text.style, elevatedButton.style); include only needed keys. + +#Behavior Conventions +- Use sizedBox for minor spacing; spacer/expanded for flexible space. +- Use listView for long, homogeneous lists; column for short static stacks. +- Always ensure images have at least src; add fit if necessary (e.g., "cover"). +- Prefer card for grouped content with elevation. +- Use gridView only if there are 2+ columns of similar items. + +# Validation Checklist (apply before emitting) +- Widgets/props only from catalog. +- All required props present (type, leaf essentials like text.data, image.src). +- Property types correct; no nulls/empties. +- Keys ordered deterministically. + +# Inputs +SCHEMA: ```:VAR_INTERMEDIATE_REPR:``` +DESCRIPTION: ```:VAR_SEMANTIC_ANALYSIS:``` + +# Generation Steps (follow silently) +- Read SCHEMA to identify concrete entities/IDs; read DESCRIPTION for layout intent. +- Pick widgets from the catalog that best express the layout. +- Compose from coarse to fine: page → sections → rows/columns → leaf widgets. +- Apply sensible defaults (alignment, spacing) only when needed. +- Validate: catalog-only widgets/props, property types, no unused fields, deterministic ordering. + +# Hard Output Contract +- Output MUST be ONLY the SDUI JSON. No prose, no code fences, no comments. Must start with { and end with }. +- Use only widgets and properties from the Widget Catalog below. +- Prefer minimal, valid trees. Omit null/empty props. +- Numeric where numeric, booleans where booleans, strings for enums/keys. +- Color strings allowed (e.g., "#RRGGBB"). +- Keep key order consistent: type, then layout/meta props, then child/children. + +# Final Instruction +Using SCHEMA and DESCRIPTION, output only the SDUI JSON that satisfies the rules above. DO NOT START OR END THE RESPONSE WITH ANYTHING ELSE. + +if there are no scrollable elements then wrap the whole content with a single child scroll view, if there are scrollable contents inside, then apply shrinkWrap and handle accordingly like +you would do in Flutter but in this Stac Representation + +"""; diff --git a/lib/templates/system_prompt_templates/stac_modifier_prompt.dart b/lib/templates/system_prompt_templates/stac_modifier_prompt.dart new file mode 100644 index 00000000..33c60ccc --- /dev/null +++ b/lib/templates/system_prompt_templates/stac_modifier_prompt.dart @@ -0,0 +1,28 @@ +import '../rulesets/stac_ruleset.dart'; + +const String kPromptStacModifier = """ +You are an expert agent whose sole JOB is to accept FLutter-SDUI (json-like) representation +and modify it to match the requests of the client. + +SDUI CODE RULES: +$kRulesetStac + +# Inputs +PREVIOUS_CODE: ```:VAR_CODE:``` +CLIENT_REQUEST: ```:VAR_CLIENT_REQUEST:``` + + +# Hard Output Contract +- Output MUST be ONLY the SDUI JSON. No prose, no code fences, no comments. Must start with { and end with }. +- Use only widgets and properties from the Widget Catalog below. +- Prefer minimal, valid trees. Omit null/empty props. +- Numeric where numeric, booleans where booleans, strings for enums/keys. +- Color strings allowed (e.g., "#RRGGBB"). +- Keep key order consistent: type, then layout/meta props, then child/children. + + +# Final Instruction +DO NOT CHANGE ANYTHING UNLESS SPECIFICALLY ASKED TO +use the CLIENT_REQUEST to modify the PREVIOUS_CODE while following the existing FLutter-SDUI (json-like) representation +ONLY FLutter-SDUI Representation NOTHING ELSE. DO NOT START OR END WITH TEXT, ONLY FLutter-SDUI Representatiin. +"""; diff --git a/lib/templates/system_prompt_templates/stac_to_flutter_prompt.dart b/lib/templates/system_prompt_templates/stac_to_flutter_prompt.dart new file mode 100644 index 00000000..d2d7b30c --- /dev/null +++ b/lib/templates/system_prompt_templates/stac_to_flutter_prompt.dart @@ -0,0 +1,15 @@ +const String kPromptStacToFlutter = """ +You are an expert agent whose sole JOB is to accept FLutter-SDUI (json-like) representation +and convert it into actual working FLutter component. + +This is fairly easy to do as FLutter-SDUI is literally a one-one representation of Flutter Code + +SDUI_CODE: ```:VAR_CODE:``` + +use the Above SDUI_CODE and convert it into Flutter Code that is effectively same as what the SDUI_CODE represents + +DO NOT CHANGE CONTENT, just convert everything one-by-one +Output ONLY Code Representation NOTHING ELSE. DO NOT START OR END WITH TEXT, ONLY Code + +DO NOT WRITE CODE TO PARSE SDUI, ACTUALLY CONVERT IT TO REAL DART CODE +"""; diff --git a/lib/templates/templates.dart b/lib/templates/templates.dart new file mode 100644 index 00000000..9df768d8 --- /dev/null +++ b/lib/templates/templates.dart @@ -0,0 +1,8 @@ +export 'system_prompt_templates/apitool_bodygen_prompt.dart'; +export 'system_prompt_templates/apitool_funcgen_prompt.dart'; +export 'system_prompt_templates/intermediate_rep_gen_prompt.dart'; +export 'system_prompt_templates/semantic_analyser_prompt.dart'; +export 'system_prompt_templates/stac_to_flutter_prompt.dart'; +export 'system_prompt_templates/stac_gen_prompt.dart'; +export 'system_prompt_templates/stac_modifier_prompt.dart'; +export 'tool_templates.dart'; diff --git a/lib/templates/tool_templates.dart b/lib/templates/tool_templates.dart new file mode 100644 index 00000000..3ecf0a3e --- /dev/null +++ b/lib/templates/tool_templates.dart @@ -0,0 +1,112 @@ +const GENERAL_ARG_PROPERTY_FORMAT_PY = """:ARG_NAME: { + "type": ":ARG_TYPE:", + "description: ":ARG_DESC:" +}"""; + +const GENERAL_PYTHON_TOOL_FORMAT = """ +:FUNC: + +api_tool = { + "function": func, + "definition": { + "name": ":TOOL_NAME:", + "description": ":TOOL_DESCRIPTION:", + "parameters": { + "type": "object", + "properties": :TOOL_PARAMS:, + "required": [:REQUIRED_PARAM_NAMES:], + "additionalProperties": False + } + } +} + +__all__ = ["api_tool"] +"""; + +const GENERAL_JAVASCRIPT_TOOL_FORMAT = """ +:FUNC: + +const apiTool = { + function: func, + definition: { + type: 'function', + function: { + name: ':TOOL_NAME:', + description: ':TOOL_DESCRIPTION:', + parameters: { + type: 'object', + properties: :TOOL_PARAMS:, + required: [:REQUIRED_PARAM_NAMES:] + additionalProperties: false + } + } + } +}; + +export { apiTool }; +"""; + +const LANGCHAIN_PYTHON_TOOL_FORMAT = """ +from langchain.tools import StructuredTool + +:INPUT_SCHEMA: + +:FUNC: + +api_tool = StructuredTool.from_function( + func=func, + name=":TOOL_NAME:", + description=":TOOL_DESCRIPTION:", + args_schema=INPUT_SCHEMA, +) +__all__ = ["api_tool"] +"""; + +const LANGCHAIN_JAVASCRIPT_TOOL_FORMAT = """ +import { DynamicStructuredTool } from 'langchain/tools'; +import { z } from 'zod'; + +:INPUT_SCHEMA: + +:FUNC: + +const apiTool = new DynamicStructuredTool({ + func: func, + name: ':TOOL_NAME:', + description: ':TOOL_DESCRIPTION:', + schema: INPUT_SCHEMA +}); + +export { apiTool }; +"""; + +const MICROSOFT_AUTOGEN_TOOL_FORMAT = """ +:FUNC: + +api_tool = { + "function": func, + "name": ":TOOL_NAME:", + "description": ":TOOL_DESCRIPTION:" +} + +__all__ = ["api_tool"] +"""; + +class APIToolGenTemplateSelector { + static String getTemplate(String language, String agent) { + if (language == 'PYTHON') { + if (agent == 'MICROSOFT_AUTOGEN') { + return MICROSOFT_AUTOGEN_TOOL_FORMAT; + } else if (agent == 'LANGCHAIN') { + return LANGCHAIN_PYTHON_TOOL_FORMAT; + } + return GENERAL_PYTHON_TOOL_FORMAT; + } else if (language == 'JAVASCRIPT') { + if (agent == 'LANGCHAIN') { + return LANGCHAIN_JAVASCRIPT_TOOL_FORMAT; + } + return GENERAL_JAVASCRIPT_TOOL_FORMAT; + } + return 'NO_TEMPLATE'; + } +}