ContextWeave

ContextWeave UI Generation Prompt

Application Summary

ContextWeave is an AI-powered developer tool that provides instant, curated documentation context for any library or framework. It helps developers:

  • Understand new libraries quickly
  • Get relevant examples and best practices
  • Reduce time spent searching documentation

The application has two core components:

  1. Frontend: Next.js marketing site and playground
  2. Backend: FastAPI service handling context generation

Marketing Content

Core Messaging

  • "Stop Googling, Start Building"
  • "Your AI wing-agent for shipping code that works the first time"
  • "Context when you need it, not when you find it"

Feature Highlights

  • Instant Library Context: Get up to speed with any library in seconds
  • Curated Examples: Real-world code snippets tailored to your use case
  • Best Practices: Avoid common pitfalls with expert guidance
  • Seamless Integration: Works with your existing tools and workflows

Marketing Pages

  1. Homepage: Hero section with value proposition
  2. Features: Detailed feature breakdown with benefits
  3. Examples: Interactive demo of context generation
  4. Docs: Technical documentation
  5. Playground: Live testing environment

Frontend Architecture

Pages to Generate

  • /: Marketing homepage
  • /features: Feature showcase
  • /examples: Use case examples
  • /docs: Technical documentation
  • /playground: Interactive demo
  • /dashboard: User dashboard (authenticated)

Components to Reuse

  • Header: Global navigation
  • Footer: Site footer with links
  • HeroSection: Landing page hero
  • FeaturesSection: Feature cards
  • MarkdownRenderer: Docs content renderer
  • CodeBlock: Syntax-highlighted code snippets

Design Guidelines

  • Maintain existing Tailwind CSS configuration
  • Use shadcn/ui component library
  • Dark/light mode support
  • Monospace font for code elements

Backend Architecture

Supabase Services

Loading diagram...

Function Requirements

  1. User Authentication:

    • GitHub OAuth integration
    • Session management

  2. Library Search:

    • Fuzzy search by name/description
    • Filter by library type (npm/pypi/github)

  3. Context Generation:

    • Retrieve library metadata
    • Fetch documentation chunks
    • Return curated context

Best Practices

  • TypeScript for type safety
  • Modular function organization
  • Error handling middleware
  • Rate limiting for API protection