Using AI in CODED FLOWS

AI to Generate UI Canvas

In CODED FLOWS UI Flow projects, you have the option to utilize Artificial Intelligence to generate the layout and components of your Streamlit UI canvas automatically. This provides an alternative approach to manually constructing the interface by dragging and dropping UI elements.

Overview

Instead of building your UI piece by piece, you can describe the desired interface to the AI, and CODED FLOWS will attempt to generate the corresponding canvas structure and the necessary flow bricks.

Feature Status

Please be aware that this AI generation feature is continually being improved and may not always produce perfect results. Consider it a helpful starting point that might require further refinement.

Configuring AI Providers

To leverage the AI Canvas generation feature, you need to configure your preferred Artificial Intelligence provider by adding your API key and selecting the corresponding model within the CODED FLOWS settings.

Access Settings

  1. Navigate to the AI Configuration panel from the AI menu located at the start of the sidebar.

  2. From the Provider dropdown menu, select an LLM provider (e.g. OpenAI, Grok, Google, etc.), then enter the corresponding API key. You can repeat this step to add multiple providers, each with its own API key. Once a key is validated, the models exposed by that provider become available in the application.

  3. Select the default AI models to use for each core task:

    • Brick creation
    • UI generation
    • Debugging

    Each task can use a different model, depending on your preferences and the models available from the configured providers.

Get API Key for OpenAI

  1. Go to the OpenAI developer platform: https://platform.openai.com/.
  2. Log in or sign up for an account.
  3. Navigate to the "API keys" section (usually found under your profile or in the sidebar).
  4. Click "Create new secret key."
  5. Give your key a name and click "Create secret key."
  6. Crucially, copy the key immediately. You will not be able to view it again after closing the modal. Store it securely.

Get API Key for Anthropic

  1. Go to the Anthropic console: https://console.anthropic.com/.
  2. Log in or sign up for an account.
  3. Click on your profile icon in the top right corner and select "API Keys."
  4. Click the "Create Key" button.
  5. Enter a name for your key and click "Create Key."
  6. Copy your key and store it in a safe place. You will not be able to view it again once you leave the page.

Get API Key for Mistral AI

  1. Go to the Mistral AI console: https://console.mistral.ai/.
  2. Log in or sign up for an account.
  3. Navigate to the "API Keys" section (usually in the sidebar under "API").
  4. Click "Create new key."
  5. Optionally, give your key a name and set an expiration date.
  6. Click "Create key."
  7. Copy the generated key immediately as it will not be shown again. Store it securely.

Get API Key for DeepSeek

  1. Go to the DeepSeek Open Platform: https://platform.deepseek.com/.
  2. Log in or sign up for an account. You might be able to use a Google account to log in.
  3. Click on "API keys" in the left-hand sidebar.
  4. Click "Create new key."
  5. Give it a name and click "Create API key."
  6. Copy your API key. It will only be visible at the time of creation. Store it securely.

How to Generate a UI Canvas with AI

Follow these steps to use the AI generation feature:

  1. Navigate to the Canvas View: Open your UI Flow project and ensure you are in the canvas view.

  2. Locate the AI Button: Within the canvas view area, find and click on the button labeled "AI".

  3. Prompt the AI: Clicking the "AI" button will open a modal window with a text input field.

  4. Describe Your UI: In the prompt field, clearly describe the UI you want to create. Be specific about the elements (e.g., "a title", "a text input for name", "a button labeled 'Submit'", "a slider for age", "a plot area"), their arrangement, and any initial content if applicable. For example:

    Create a page with the title 'User Information'. Below the title, add a text input field for 'First Name', another for 'Last Name', and a button labeled 'Save Profile'.

  5. Generate the Canvas: After entering your description, click the "Generate" button within the modal. Your default model is automatically selected, but you can switch to another available model if needed before generating your UI canvas.

Generation Speed

The AI generation process for the UI canvas might feel slower compared to typical AI text streaming. This is because CODED FLOWS must wait for the AI to return the complete, structured definition of the UI before it can render the canvas and create the corresponding flow bricks. Patience is appreciated during this step.

Once the generation is complete:

  • The UI Canvas will be updated to reflect the generated interface based on your prompt.
  • Corresponding visual element bricks (representing each generated UI component like text inputs, buttons, etc.) will be automatically added to the Flow View.

You can then proceed to connect these new bricks in the flow view to define the application's logic, data processing, and how user interactions with the UI elements trigger specific actions.

Previous
AI to Generate Bricks
Next
Package Structure & Configuration