Skip to content

shivamani-yamana/schema-iq

Repository files navigation

SchemaIQ – AI Powered Schema Generator & Visualizer

SchemaIQ is an AI-powered database schema generator and SQL query assistant built with Next.js, HeroUI, and React Flow. It uses Google Gemini via ai-sdk to generate database schemas and SQL queries from natural language prompts, and visualizes the schema as an interactive diagram.


Features

  • AI Schema Generation:
    Describe your app or data needs in plain English and get a full database schema (tables, columns, relationships) generated by AI.

  • AI SQL Query Generation:
    Ask questions about your schema and get valid SQL queries generated instantly.

  • Schema Visualization:
    See your generated schema as an interactive, draggable diagram with table details and relationships.

  • Copy SQL Commands:
    Easily copy generated SQL queries and table creation statements.

  • Customizable Prompts:
    Prompt templates are stored securely (e.g., Vercel Blob, Pastebin, etc.) and injected dynamically.

  • Modern UI:
    Built with HeroUI for a beautiful, responsive, and accessible interface.


Getting Started

1. Install Dependencies

npm install
# or
yarn install
# or
pnpm install

2. Set Up Environment Variables

Create a .env file in the project root and add your Google Generative AI API key and prompt URLs:

GOOGLE_GENERATIVE_AI_API_KEY=your-google-api-key
MASTER_PROMPT_URL = your-prompt-txt-file-url

3. Prompt Templates (Recommended for Production)

  • Store your prompt templates (e.g., schemaPrompt.txt, sqlPrompt.txt) in Vercel Blob, Pastebin, or another secure storage.
  • Update your API route to fetch and inject dynamic descriptions into the prompt at runtime using the URLs in your .env.

4. Run the Development Server

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 in your browser.


Deployment

Deploy easily on Vercel for best performance and integration with Vercel Blob or other remote storage.


Project Structure

  • src/app/page.tsx – Main UI and chat history.
  • src/components/PromptInput.tsx – Prompt input, mode selection, and schema input modal.
  • src/components/ChatMessage.tsx – Renders user and AI messages, including schema visualizer and SQL snippets.
  • src/components/SchemaVisualizer.tsx – Interactive schema diagram using React Flow.
  • src/lib/types.ts – Type definitions for schema, tables, and columns.
  • src/lib/prompts.ts – (Optional) Prompt template functions if not using remote storage.
  • src/store/useAppStore.ts – Zustand store for app state and chat history.
  • src/app/api/chat/route.ts – API route for AI schema and SQL generation.
  • src/components/Navbar.tsx – Top navigation bar with GitHub link.
  • src/components/ui/aurora-background.tsx – Aurora background effect.
  • src/components/ui/cover.tsx – Animated cover effect for tagline.
  • src/components/ui/sparkles.tsx – Sparkle particle background.

Custom Prompts & Security

  • Do not commit prompt templates to GitHub.
    Store them in Vercel Blob, Pastebin, or another secure storage and fetch at runtime.
  • See .gitignore for excluded files.

Technologies Used


Accessibility

  • All inputs and controls use proper ARIA labels.
  • Responsive and keyboard-accessible UI.

Contributing

Pull requests and issues are welcome!
Please do not submit sensitive prompt templates or API keys.


License

MIT


Credits


Troubleshooting

  • API Key Issues:
    Make sure your Google API key is valid and set in .env.
  • Prompt Templates Not Found:
    Ensure your prompt files are uploaded to Vercel Blob, Pastebin, or other storage and URLs are correct.
  • Schema Not Visualizing:
    Make sure your API returns a valid schema object.

Example Prompt

"A library management system with books, members, and loans."


Example SQL Query

"Show all overdue loans for a member."


Contact

For questions or support, open an issue or contact the

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published