FIBO Studio

• 

  Gemini LLM Agent Workflow: Translating natural language text prompts into the structured, editable FIBO JSON configuration.

• 

  Structured Control Panel: Displaying the AI-generated JSON, allowing the user to visually inspect and manually fine-tune all FIBO parameters

• 

  Final Output: Result of validated, structured JSON input, showcasing predictable, high-quality content generation.

Inspiration

The primary inspiration was the challenge of professional visual content creation. While models like Bria FIBO are incredibly powerful, they require complex, structured JSON inputs for precise control over the output (camera settings, lighting, composition). We were inspired to bridge the gap between creative freedom (natural language) and industrial precision (structured JSON), creating a tool that could be used in a fast, production-ready environment.

What it does

FIBO Studio is a JSON-native visual generation interface that acts as a professional control panel for Bria FIBO. It allows users to:

• Use a simple text prompt (Natural Language).
• Translate that text into a fully validated, structured FiboConfig JSON object.
• Visually inspect and manually edit the camera, lighting, and composition parameters generated by the AI.
• Generate the final visual based on the human-verified, structured JSON input.

How we built it

The solution is a modern web application built with React and TypeScript. The key technological components are:

• Vite/React/TypeScript for a high-performance front-end.
• Gemini API (@google/genai) for the core agent logic.
• Function Calling (Tool Use): We defined a strict generate_fibo_config function declaration to force Gemini to generate output that is 100% compliant with the required FIBO JSON schema. This is the core of the AI Agent Workflow.
• Component Structure: The UI separates input (App.tsx), controls (ControlPanel), and the structured output (JsonViewer) for clarity and professional usability.

Challenges we ran into

The main technical challenge was creating a deterministic workflow where the LLM (Gemini) could not fail to produce a valid JSON output. We solved this by making the FiboConfig schema extremely detailed, including ENUMs for fields like CameraAngle and LightingType. This approach significantly improved the reliability and accuracy of the translation from text to the required structured format, ensuring high-quality, professional results.

Accomplishments that we're proud of

We are proud of creating a fully structured, agent-based workflow that turns a complex technical requirement (JSON-native input) into an intuitive, productive tool. By leveraging Gemini's tool-use capabilities, we demonstrated a clear path for integrating powerful LLMs into industrial-scale content generation pipelines.

What we learned

We learned that standard text-generation is insufficient for professional applications requiring precision. Gemini's Function Calling is the superior method for creating reliable, structured, and predictable outputs (like JSON) from natural language prompts, effectively turning the LLM into a highly reliable Agent-Translator.

What's next for FIBO Studio

Future plans include integrating real-time feedback loops from the FIBO model, adding user profiles to save custom configurations, and extending the configuration schema for more advanced controls (e.g., depth of field effects, color grading presets).

Built With

• functioncalling(tooluse)
• geminiapi
• jsonschema
• node.js
• react
• tailwindcss
• typescript
• vite