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 main application settings. This is typically found via "Settings".
  2. Locate the field for entering your API Key.
  3. Select the desired AI model from the available options in a dropdown menu. The available models will depend on the API key you provided. CODED FLOWS will use this model to generate your canvas.

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.

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