Academyplugin

API keys & Tokens

Transforming your Figma designs into shadcn/ui code is now possible with our plugin, powered by advanced large language models (LLMs). This article explains the importance of API keys and tokens in using the plugin.

AI Models

Our plugin supports these AI platforms:

Supported AI models include:

  • Claude 4.5 Sonnet
  • *Claude Opus 4.5
  • Claude 4 Sonnet
  • Claude 3.7 Sonnet
  • Gemini 2.5 Pro
  • Gemini 3 Pro
  • v0-1.5-md
  • v0-1.5-lg

Why do you need an API Key?

An API key is essential for:

  • Access to AI Models: It allows the plugin to communicate with external AI providers to generate code.
  • Authentication & Authorization: It verifies your identity and authorizes requests.
  • Usage Tracking & Billing: It tracks your usage for billing purposes.

What are tokens?

Tokens are the basic units of data AI models use to process information. In our plugin:

  • Input Tokens: Describe your Figma design to the AI.
  • Output Tokens: Represent the generated shadcn/ui code.

Why are tokens (and AI usage) paid?

AI models incur costs due to:

  • Computational Resources: Training and running models require significant computing power.
  • Model Development & Maintenance: Continuous improvement and safety measures involve substantial investment.
  • Infrastructure Costs: Operating data centers and servers is expensive.
  • Specialized AI for Complex Tasks: Tailoring AI to specific tasks increases complexity and cost.

API keys and token-based billing enable these services, allowing our plugin to efficiently convert your designs into high-quality code. Understanding these concepts helps you manage your usage effectively.

In upcoming lessons, you'll learn how to obtain an API key from the mentioned platforms. Choose one to get started.

35 of 45