> ## Documentation Index
> Fetch the complete documentation index at: https://docs.krea.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Krea Documentation Home

> AI-powered creative tools for everyone. Generate stunning images and videos with cutting-edge AI models, or integrate our API into your applications.

export const ImageCard = ({title, icon, href, image, description, width, height, target, rel}) => {
  const style = {};
  if (width) style.width = width;
  if (height) style.height = height;
  return <a href={href} target={target} rel={rel || (target === "_blank" ? "noopener noreferrer" : undefined)} className="group relative block rounded-lg border border-gray-200 dark:border-gray-800 overflow-hidden hover:border-gray-300 dark:hover:border-gray-700 transition-all duration-200 hover:shadow-lg aspect-[5/3]" style={style}>
      {}
      <img src={image} alt={title} className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />

      {}
      <div className="absolute inset-0 bg-gradient-to-t from-black/70 via-black/30 to-transparent dark:hidden" />

      {}
      <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent hidden dark:block" />

      {}
      <div className="relative h-full flex flex-col justify-end p-4">
        <div className="flex items-center gap-2 mb-1">
          {icon && <Icon icon={icon} iconType="solid" color="#ffffff" size={14} />}
          <h3 className="text-base font-semibold text-white group-hover:text-gray-100 transition-colors">
            {title}
          </h3>
        </div>
        <p className="text-xs text-white/90 line-clamp-2">
          {description}
        </p>
      </div>
    </a>;
};

<a href="/developers/krea-2/overview" className="not-prose group relative block mb-10 aspect-[2/1] h-[40vh] w-full rounded-lg overflow-hidden">
  <img src="https://s.krea.ai/docs/krea-2-hero.webp" alt="" className="absolute inset-0 m-0 w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" style={{ objectPosition: "20% 20%" }} />

  <div className="absolute inset-0 bg-gradient-to-t from-black/75 via-black/35 to-black/10 dark:from-black/85 dark:via-black/45 dark:to-black/20" />

  <div className="relative h-full flex flex-col justify-end p-8">
    <h1 className="text-4xl md:text-5xl font-bold text-white m-0 drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]">
      Krea 2
    </h1>

    <p className="text-base md:text-lg text-white/95 mt-2 max-w-2xl drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]">
      Our first foundation image model. Trained from scratch for full creative control — style transfer, moodboards, and tunable creativity.
    </p>

    <div className="mt-4">
      <span className="inline-flex items-center px-4 py-2 rounded-lg bg-white text-black text-sm font-medium group-hover:opacity-90 transition-opacity">
        Get started

        <svg className="ml-1.5 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
        </svg>
      </span>
    </div>
  </div>
</a>

## For Creators

Get started with Krea's creative tools and learn how to make the most of AI-powered generation.

<div className="grid grid-cols-2 gap-4">
  <ImageCard title="User Guide" href="/user-guide" image="https://s.krea.ai/docs-image_gen.webp" description="Complete guide to all creative tools and features" />

  <ImageCard title="AI Models" href="user-guide/features/model-overview" image="https://s.krea.ai/docs-video.webp" description="Explore all available AI models and their strengths" />
</div>

## For Developers

Build powerful applications with Krea's API. Access all our AI models with simple REST endpoints.

<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
  <ImageCard title="Developer Docs" href="/developers/introduction" image="https://s.krea.ai/docs-enhancer.webp" description="Integration guides, concepts, and usage" />

  <ImageCard title="Code Examples" href="/developers/examples/text-to-image" image="https://s.krea.ai/docs-edit.webp" description="See code examples for common use cases" />

  <ImageCard title="Model API Reference" href="/api-reference/introduction" image="https://s.krea.ai/docs-realtime.webp" description="Complete endpoint documentation and schemas" />

  <ImageCard title="Interactive Playground" href="https://www.krea.ai/app/api/playground" target="_blank" image="https://s.krea.ai/docs-developer.webp" description="Try the API live in your browser — moodboards, assets, code export" />
</div>

## Get Help

<CardGroup cols={2}>
  <Card icon="discord" href="https://www.krea.ai/discord" title="Join our Discord">
    Connect with the community and get support
  </Card>

  <Card icon="envelope" href="mailto:help@krea.ai" title="Email Support">
    Contact our support team
  </Card>
</CardGroup>