Build brief
Answer a few plain questions. You get one prompt to paste into your AI tool.
Your prompt
Copy it and paste it into Claude, ChatGPT, Cursor, Lovable, v0 or Bolt. It changes as you answer.
Prompt for your AI tool
I want to build: Chat assistant.
How to talk to the person (read this before you reply)
The person using you may not be a developer. When something is blocked or not available, tell them in plain words, never the technical detail.
1. Say three short things, in this order: what you could not do; what that means for them; the ONE thing they can do next.
2. Never show error codes (403, 404, 429) or words like proxy, registry, policy, sandbox, firewall, no-proxy list, token, MCP or fetch. Keep that detail to yourself unless they ask.
3. Do not narrate your attempts. Try once, switch to the fallback, then report the result.
4. End with what is done, what is a stand-in, and what they should do next.
Examples of how to say it:
- Cannot install: "I cannot download Tattva's code from inside this tool. Please upload the file tattva-free-source.md (https://lkb00.github.io/tattva/downloads/tattva-free-source.md) here, or tell me to read the small pieces at https://lkb00.github.io/tattva/downloads/source/index.md, and I will build your screen from it."
- Cannot open the website: "This tool cannot open the Tattva website, so I could only read a summary. If you can, paste the page or upload the file here, or switch on web access for this tool."
Use the Tattva design system. Read its guide first: https://lkb00.github.io/tattva/llms.txt (it links to a page for every part). Theme: lime. Mode: light and dark, following the device.
Setup:
1. If you can install packages, run npm install @tattva/ui, put @import "@tattva/ui/tokens.css"; and @source "../node_modules/@tattva/ui/dist"; at the top of the main stylesheet (they replace @import "tailwindcss";), and import every part from "@tattva/ui". If you cannot install packages, read https://lkb00.github.io/tattva/downloads/tattva-free-source.md, which holds the source of every free part in one file (if you only get a summary of it, read the small pieces listed in https://lkb00.github.io/tattva/downloads/source/index.md instead, one by one), recreate the parts you need under src/tattva/ with the same file names, and import from there.
2. If you used the source file, add the colours from https://lkb00.github.io/tattva/downloads/tokens.css to the project's global stylesheet. Toggle the dark class on the html element to follow the device's colour scheme.
Use these parts, in this order:
- ThreadTemplate: The page layout (Chat assistant).
- EmptyState: The first screen, before any message: what the assistant can do, in one heading and one line.
- MessageList: The scrolling thread.
- Message: One turn: the person's bubble or the assistant's text.
- Composer: The message box.
- Markdown: Renders the assistant's formatting safely.
- ThinkingBlock: Shows the assistant is working, and what it did.
- TypingIndicator: A quiet sign a reply is on the way.
- SuggestionChips: Starter prompts and follow-ups.
- MessageActions: Copy, retry and rate under a reply.
- ConversationList: Past chats in the sidebar.
- ModelPicker: Lets the person choose a model.
- CitationMarker: The small numbered marker in the text.
- SourceList: The sources behind an answer.
- SourceCard: One source.
- FeedbackBar: Thumbs up and down with a reason.
Rules:
- Import parts and icons only from the tattva folder, never from a deep path (icons are named like SendIcon and CopyIcon). Never write hex colours; use the tokens (var(--surface), var(--fg)).
- The AI colour marks AI only, and is never used as text. Amber means a person has to act.
- Every button and icon has a clear name. Status is never colour alone.
- If no part fits something I ask for, tell me and ask. Do not invent parts, props or colours.
Project brief (save it as tattva.md and read it first next time):
# Tattva project brief
Saved by the Tattva MCP server. Read this first in every session so the product stays consistent.
- Product: Chat assistant
- Stack: no-code
- Theme: lime (default)
- Mode: both
- Trust behaviours: sources, feedback
## Parts
- ThreadTemplate: The page layout (Chat assistant).
- EmptyState: The first screen, before any message: what the assistant can do, in one heading and one line.
- MessageList: The scrolling thread.
- Message: One turn: the person's bubble or the assistant's text.
- Composer: The message box.
- Markdown: Renders the assistant's formatting safely.
- ThinkingBlock: Shows the assistant is working, and what it did.
- TypingIndicator: A quiet sign a reply is on the way.
- SuggestionChips: Starter prompts and follow-ups.
- MessageActions: Copy, retry and rate under a reply.
- ConversationList: Past chats in the sidebar.
- ModelPicker: Lets the person choose a model.
- CitationMarker: The small numbered marker in the text.
- SourceList: The sources behind an answer.
- SourceCard: One source.
- FeedbackBar: Thumbs up and down with a reason.
## Rules
- Import from the package index only.
- Use tokens (`var(--surface)`), never hex values.
- The AI colour (`--lime`) is a fill, never text. Amber means a person has to act.
- Every control has an accessible name. Status is never colour alone.
- Run `review_code` on each file before finishing.Parts it will use (16)
- ThreadTemplate
- EmptyState
- MessageList
- Message
- Composer
- Markdown
- ThinkingBlock
- TypingIndicator
- SuggestionChips
- MessageActions
- ConversationList
- ModelPicker
- CitationMarker
- SourceList
- SourceCard
- FeedbackBar
Want the tool to look things up itself? Connect an AI tool.